{"_id":"@sberdevices/plasma-ui","_rev":"1293-e3b17ab6de31c0cf3d2ad58eca20824f","name":"@sberdevices/plasma-ui","dist-tags":{"canary":"1.96.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0","latest":"1.95.0","rc":"0.98.0-rc.0"},"versions":{"0.98.0-canary.277.f6105371370bb9588ab669a6481dceb5d8f531ca.0":{"name":"@sberdevices/plasma-ui","version":"0.98.0-canary.277.f6105371370bb9588ab669a6481dceb5d8f531ca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"0.8.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"0.2.0","@sberdevices/plasma-tokens":"0.4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f6105371370bb9588ab669a6481dceb5d8f531ca","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@0.98.0-canary.277.f6105371370bb9588ab669a6481dceb5d8f531ca.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-5nkj+mImnuaKqQCgAm37YCvNJvarOkStwmgULS9PkOanr0UtsXbkcJ3/l18c6OQjSf/1FpEK+bSQKN1BERRkHQ==","shasum":"9d4043d7685d476ee2b25ef9153a25aa4fc94145","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-0.98.0-canary.277.f6105371370bb9588ab669a6481dceb5d8f531ca.0.tgz","fileCount":480,"unpackedSize":930771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZwEICRA9TVsSAnZWagAAP4AP/2pX4efyY3NpCXQzKXzi\nBjgUclaNhZ2Z5I6B8EIPCdCcEXrerGwPGOtp/P76cmL51KFer/1lbVJlQEC4\ncQUMvtSc77NOYlrf26JAeu8F473UoSaeBGzjOQUHQ3S+BssEeKqv3Md5vHfa\nP6nq5n9sSDdR613tp8Tl1w21qzs7q9YoQ/LestZhOZATW3FKtAySB0blwvEY\nd5OuddXb7qn55PUMp7bcpUwUr6g/A/5/PEcWiYgMambY2rxuqxONTIFy/VAd\nUTCevr2Re9FxFSq1RS979TqcHRbAD70CRFrVrn4052AkAca2syXIBHrzHOXb\nUhDc20f9oGfBfURiFr44eKWdor8XZF2ooETD8iC4JiHPvFDTnvDETDQmJgC3\noKOiIYuysihJIOxOK80PTu7mlIAJf092x2Zd5SOTiq+GqPXoyM+pfvcJ/gKz\nMYEX2hW9+pi++9jT5JoVRRPeZd1yUBM5J/1E8+rGOhR/h6DHDLQv8KcpgsEk\nfCQUnnpQEaQfKv7UAKBhDNB55uC3Xj1G5kmT/sbrLDrdy5JxjrFsQXPmWTNm\nRwFGGpMb1KlRS9BC2KNTjHUO83PRVeLyzfi7/HOTpBQwwREr7Ui8QggJjNq2\nJEUMvysCkofP5m6SarZaP4/7XdXIfcpJRpehF6YvTGGLvkJzdRmXrzhR63Bd\nVAVz\r\n=ZaBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRgL+In0Z6cxOG1/LvC3TWSrXqy1g5Kx8DoudGeQrE+QIgCMAdULerASdbeHGmXoJ1cK/bX7w2ie7Yi2AaGaGFZ+s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_0.98.0-canary.277.f6105371370bb9588ab669a6481dceb5d8f531ca.0_1617363207883_0.5696366151455612"},"_hasShrinkwrap":false},"0.98.0-canary.277.cebc2c90710b0eb2eab05339c8755e43051b8c73.0":{"name":"@sberdevices/plasma-ui","version":"0.98.0-canary.277.cebc2c90710b0eb2eab05339c8755e43051b8c73.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"0.8.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"0.2.0","@sberdevices/plasma-tokens":"0.4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cebc2c90710b0eb2eab05339c8755e43051b8c73","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/ui@rc @sberdevices/plasma-tokens@rc @sberdevices/plasma-icons@rc\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/rc/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/ui/components/Grid';\nimport { Button } from '@sberdevices/ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/ui/utils';\nimport { addFocus } from '@sberdevices/ui/mixins';\nimport { withAutoFocus } from '@sberdevices/ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://rc--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@0.98.0-canary.277.cebc2c90710b0eb2eab05339c8755e43051b8c73.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-vnRhLWtREBZa2aPyHN6uw4sb6Pih5RuTHw/+B3wI9BozwMs1l34dd01xnlB+KQdY6ik56mIMexe0ZNQxoy1ISw==","shasum":"8ad42373d9641c5958f21b92109b73ec21d03037","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-0.98.0-canary.277.cebc2c90710b0eb2eab05339c8755e43051b8c73.0.tgz","fileCount":480,"unpackedSize":930771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZwjnCRA9TVsSAnZWagAAgmoP/0o43v0rfJr53JJeZx6R\nLQirwLp8BuycuBFrrh749wiVK+hMr162QFvQ80345Jk0/YHehziq5k0QltMj\np6fklcrTpqWCTakuYxqc+ye42ZGRGEbB7Vyrk+LiZcjJt24kvTPSvs5Kr/Vm\n5/9TSnp9Kc9FBpKadDt70jXj7xuaR1rgALktBeV3bPAarzEh3q3yx7Hf9f1i\nY0W3SCR8w4Shd7QzPv4UZoKyHjS+UsrRoruaVcb2QeWeazeYm2j5NleIC6MA\nPyMtUEoaEUrNAQQrtqUh4nnTizAg5sHQsrPHK5Kmy1banRKlqkRetVr81nAm\nS2+u4AHVOiqODeCZ5oKvRu9Q22tIByIRvkRTAXl2PLTxdsGjtLcPozC8tn/+\n855CcU9F/Gq8v0QGFpLd9ILpWCf2YUBcI/0EDN8lbbnwIwCHmoFSJmOk5h37\n+5OTdk2BhpYlE0UmxCikpGDY9Ubvo8QhzlDft1bY9Zicmjq2QKnWU6Sz6Kpx\no54dRvjRdNqFfh24m+diV8xHyt1GYFek46GJhI60bc9n3hffzFdi9dGMkKz7\nh754/VNUdcNRUj5ATlhffQrJ3/vMxPMECbtUK2e/A0ovmzTVfk7fO1ywIwlw\nVwF5PD+xlfMRQPEHj9FSKXKa6hYoGYMaK6kyKXiw2lLqRzCmFmYEs+fDlnVv\n+DCC\r\n=FnkT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2ZahbVHnx3bm/tsTJFJnouZDWRpgFJRHbad0+DaQ1kAiALdrXpYLeQsJ+6+twn0zsJbpsR7TX1zx5cVEEFKYQXxg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_0.98.0-canary.277.cebc2c90710b0eb2eab05339c8755e43051b8c73.0_1617365222679_0.6586153170419486"},"_hasShrinkwrap":false},"0.97.4-rc.0":{"name":"@sberdevices/plasma-ui","version":"0.97.4-rc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"0.8.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"0.2.0","@sberdevices/plasma-tokens":"0.4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"377d97504af44d3863c6356fb759fea0b42f0c03","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/ui@rc @sberdevices/plasma-tokens@rc @sberdevices/plasma-icons@rc\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/rc/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/ui/components/Grid';\nimport { Button } from '@sberdevices/ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/ui/utils';\nimport { addFocus } from '@sberdevices/ui/mixins';\nimport { withAutoFocus } from '@sberdevices/ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://rc--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@0.97.4-rc.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-z20HBOmFTo01VR7kTWtEH2dXGb7fzyYq924RjAXJuQlDvzYjxHknSfRRAy28o+aYp+3lI/0KzYFE4MrLZ0oGeg==","shasum":"a1fece41bfa44a5cae0952c4f6e31607647f8266","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-0.97.4-rc.0.tgz","fileCount":480,"unpackedSize":930374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZw1zCRA9TVsSAnZWagAA0NMP/iGyk3zpF15TyUllUUDk\niH4Gsi4EvgJ3ilCubdF08TwJiyaqmG1+URLPAZCMbptbi+OfdMZ5vCF/ql3Z\n/gLBm99/Cbo8VehlyqiZ4xV4FaNcEd79IapA5PK0Prm4mKrfdqvliTqikVII\nWlVQ0xgsjSN3z0NZwZdJxY7Zu5vFAN5jvSNZ6afNy4l743kPNrPnRf5f5yv4\nFHO+e0ccwXkKXVHKo5yf1FyH25AhZmRczVRLopjM2jk45o44WwZhDyu1lssu\n3SbjjOUqO5b1eIrU9oCL2fhaRF/ez6R6xW0F7OfT9kV1zE8b9IUTzGpERw49\nFyp5S9FqH7/zxIEs40TD6MY9ZCBIJHI7yt6ZTfOCmrKrdgnNVunXp6DTbLZW\nQpAfxxenGazHQJ/wmhyn6VGeDv2qPdERQeDdzEeeJF/IhbRXdgEtACuUkurc\nVU6ui+sz6saS2XbJFoF1+qzJyeQKHeCHdOML2almu6phbeZ8YyJT3WF/xdvb\nFpNPYC9HrcSaIBs6yAoP1WNIeTlhv0E9uCjYTjbHPZl7Mx5jcZ/Rwz7a3mWD\nBY7kRJqSwaw7WwVwGDTyCILx84p7pPoGKWBMKXjAXKV0ikRq2snOEw3TSZ0g\nTktrdtrTTsCkkGPFqnMyZjsVG1Zg0MdiybNuAQjDuoRcst+dfIP3mheNiojM\nQEPF\r\n=xEZT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiVvraOjUscVpw1qcm2jLCF1SfBuMqsOG10WsnQSQUHAiEA2PAJ3RO3liJvylnrrMmeJrtNqrANjW+pksT45uqnO38="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_0.97.4-rc.0_1617366386946_0.7684164477378932"},"_hasShrinkwrap":false},"0.97.4-canary.278.aa6ff106a1953734e9665b02439f33cfba6e7353.0":{"name":"@sberdevices/plasma-ui","version":"0.97.4-canary.278.aa6ff106a1953734e9665b02439f33cfba6e7353.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"0.8.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"0.2.0","@sberdevices/plasma-tokens":"0.4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"aa6ff106a1953734e9665b02439f33cfba6e7353","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@0.97.4-canary.278.aa6ff106a1953734e9665b02439f33cfba6e7353.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-MK6eFqDwRxusNGCl7XyR4VOuxVtB6z/HD6EMDwEjCKxtmhwv60PLBcvQG3Y3qZOgOCCx0qJbUQG1PnIfP6NCZg==","shasum":"ab7d9ecc1520685c46e1886e3f508dce2be6d7c0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-0.97.4-canary.278.aa6ff106a1953734e9665b02439f33cfba6e7353.0.tgz","fileCount":480,"unpackedSize":930819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZxcJCRA9TVsSAnZWagAA9lwQAJ/9k9P595eIHXM2RaWB\n/XdvWSVnPjVeCyshA69DukB82/81LZ6XNDYmE5YFVqvphS+CEcOqsKc9ABnX\nACQi+FhX3DXYR0pEJr4u3LBqkT+qff7M9yhleo9aPApWULl0lFn7srM4uhAH\njlvC8xYEcn1Ep51kJCTu7HlgB6qCPkJjHC9jmeAi/a4R7VnNiYQNtylxuG3k\nN9xbGF8/JILTBaNoxl+Mflfnt8HnR3fEUEfZFmnG/wqInZ9NC5kI+0k7dnMp\nhfvFFOFOulit7VkbPlAoGDtxT6jZ5NvXeSBc4in60fFLl7R/KRuD7clPRn+B\n1JcDV2ahitCegK4g5IgwMQq0dfp2GeKy4VPtAl8orNX1nMRsGis0ZTbGPUDr\nIjeWHZXIwD0fbPO+2+FrP1bLihJWoV6c9UBmTqKIC350NLRTy2DXAVIyAGRF\nuequMXfe0r7wZo9SJ0dEAN+xV0JnBxZqcRt1v6NjpOS8a2BX0RHJMgg0lM+R\nEM4LKgvJdeDXxmnPRSaMPdyGTwe90ZPiLDLFFLbwklevvfB25CPsKhvs8orm\n38LdyRgIN6/1XdqaEuQhrW+PwGmoQ9mqS0QAzDGl2pigczN/FyV4NFk5Zmdc\nyVIrjxEwCJaL2jAl1g1AX+WFt71FrNWdCWAgUckCvi3hcjkhNMoRZwg2+EKK\nY7MO\r\n=bOOA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFTgC8JT7KoUjx0gvxsnDlQvISR05eLS2vCMN1Mzv2sAIgX6Hf/L4BDo9InHPHMaJI49YsYe464ojionTRKaP2Z9g="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_0.97.4-canary.278.aa6ff106a1953734e9665b02439f33cfba6e7353.0_1617368841107_0.8405140321108897"},"_hasShrinkwrap":false},"0.98.0-rc.0":{"name":"@sberdevices/plasma-ui","version":"0.98.0-rc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"0.8.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"0.2.0","@sberdevices/plasma-tokens":"0.4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6e8fc3905be69abeb0fd5dbb6eccd503e0112c24","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@0.98.0-rc.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-druiAxrdNUq6Ldl9qZE6i0GhMbFSBjZSMQs2pOjQvP4m+dkg/XW09DJyR7tj4K1AI7LQdg9FKspjn255t22Shg==","shasum":"f31bea01a153a27145e6b5beae6e8cf339b8cc50","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-0.98.0-rc.0.tgz","fileCount":480,"unpackedSize":930422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZxlQCRA9TVsSAnZWagAAqTUP/RgahKd6nOp5/n/yqkc6\n0afVreuZOJsZlCpfIa/tfO2avQ0cCocsIF5up5vTLujNU3mK+NTo5YWMGf+r\nho4DFGbg+o5nJ+SpdJKVjV9/o4tOwp/OtlFGqg1OOkcGxy24sY3viVfjA11g\nIpZwIOxsdGAWlvlDVzxmeNcYLW2XG++jdqK68wCO+XbSgyyGYIUTf5abHFTp\nJdgxLCBjYZV/po6smsxAPKP/v7UJKU+2Ur5fqI9MXT0yu3/aIG84Izhbqd/Y\nQsO/CQz5q5ft45RUkqDcAnFtt+uklDDKRqAFbSQX7VlRmrJqsyx6VJk/RJgt\nGQmcjOe0rySXBd1psoPLdVDimRp1TB+w4zHm11lPhFKpvjNGWBydf0OsgY5H\nReZseaGX024h0pVJRup/0erZGsjum/UMGE+zXToGFxRBY0RWS2YJ6jZMfDle\nyiJxQpHaiziOGurjZYs5+KvN8EdCbhdLrxi9zQJvbGh0XItlkUZC/WOWiQAT\nMQdHysuhweLAHB6HOtpf5Xk+nEQMLuvlbcDcbrBYPYkPWUvzex6r9115k39l\nXdLhjkfbyJjirGfUPYpqkJRzDoJ5JBZyrkp03xJ0f535XiA0kDEwcLZvn2px\n5PGgNLzgm/N1A620Eh+KiDRiffr5ri83avlUtkQcrOYM0O8AihsvRjqVMPrm\nvrpb\r\n=0QE3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRZuMEWqYX/H09KK5MoOyq8i35KhJRTlAYJgVGRm8OewIgJHsrp5OWj7MCSJ6j+IYmTjn2DeJ9rWooa2lC4JviqCI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_0.98.0-rc.0_1617369423892_0.2881663698269168"},"_hasShrinkwrap":false},"1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0":{"name":"@sberdevices/plasma-ui","version":"1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0","@sberdevices/plasma-tokens":"1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f18a0c9ed1fe330682eab63cd041bf6da6b4517","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-8q2m7BCaIl5d3MMmzrNhVDMmq/ARSWSAOLJZzOLTjZF26zwpLHTw71N1mkYjguGv/Qg4SEhHlMZIIInjfhH9Vw==","shasum":"5e9f6011290aa969bb8353b599b8c9ea4b386667","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0.tgz","fileCount":480,"unpackedSize":930980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ0IyCRA9TVsSAnZWagAAtkYQAJEifn8CuYL7GsGRyMk0\nQsMtLiQ3girYw1UwQvpl+qlUNpzdBhFhs4rDH4PNUrjnkX3Bd+wB0xLxPqq7\n4WvK0FpmMJrcSZkUiGDeTL3Euv4zkkG/y6nmanErwGCtRz2uSlHbG5u7eUJb\n1ywm9mRfkFta+8gBeZQqN4KK366DnND10HrQvq7/ruDqjj7LkPeln2PyuRYf\n0hLL6/w+Xyc/OCRXt7Zv7zpK96scj30SHasIj7BCwwnuf3xUzN1pRuYgTbdr\nBM1/oYZ+nzeGk9Ryws+JEEdN3vVvnI8T1UKGyebShHdbNmszHv3giKBoCxN0\n2f0sgHcC/ziCqtL/CnLMWk1Zn1nqehuSt4xsj2IT0zqCK7DkpsAzgxErFNr1\npgDrm0NJ78Sx4gpE3Z7S3klfp+bbT8bgCjx7/j5NPZRtMFYu9t3fZ0GBJp9+\ngKbKBKEAysWSVpySYNi4SwdySp7uwr2DNdgMQZMvJMG45wkIkHTXT2hEvVj+\nEiRAGnxgYzPHLMcPhIk5dJ/Z0Yinz8Qb/IuSC17Q+CAkHX9q37RTcbWcDpGs\n41kP0zhLHmuPGZmieUEgu3E/AhZMEHOEzXqiUfHEUqWNK8yNwZqwGi0eA1St\nC7AQILCqAz525PsiInstrbKwBSl7s5q5NzvojeVSAFab7HULgCy5+bxu0EA7\ny6b4\r\n=nb5A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH50pXsIYKs2fukfy8hJjnBSa6K4FxLfQhjWjyjnaeQpAiApTvQK2f/K4OCirzKTZ6igIzZY5x7PdFYhTBaKwLsNqA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0_1617379890128_0.17464838906910174"},"_hasShrinkwrap":false},"1.0.0":{"name":"@sberdevices/plasma-ui","version":"1.0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.0.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.0.0","@sberdevices/plasma-tokens":"1.0.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f2c9e4b05e1136d9bf0e9570a57f69b78712a6ab","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.0.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-QMxHg2IEaiG63MgwPO+p+RK8SQkLwwUHOUc1/+6q5ocj6kEQKwWX4UJkQVK/ZseAURtR5lW9JxM/L6J0GV5tHA==","shasum":"7439a7978b7ab6c2a98a3ef804e2cf898ad7b72f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.0.0.tgz","fileCount":480,"unpackedSize":931140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ0SoCRA9TVsSAnZWagAA5HwP/1h4BcojuSbG99MLa17w\n5ZMLi4ArG+tb6Sb4eHLA1YCPJhdAnXDxTsiYgS8YkWkAqvhpLlRerEKn7Xf8\nIGGFZPCN2FNJhN0AxM650j6MmZA6sFrmaEN6YBsqCl8gI5puC1nOe4AYzu+b\nNvCiPFW+WLZ+lUHawrxaqL1iDQ1Oe9Kd5rguh34nVdmNRsAHHrHnVz2Hx9Uk\nTcNf70+v0fHonhTeLq8tKgcyJdtEneJZRqlYHYcSqoGDOxCvK1d0vundOMNa\ncM9y24iR1/oK/44NfiAJZTjGvS6+XVC9HQ3VSGSTRVFYRCI663UCffRrIait\nXDyYKwy4/IuQRZ+7cXWXzVWr0oP+V46JoMNvfJDQoHJhg+soSAOkI2gs8+Wp\nNbXhDEBtliXdjIVaJjhYCCaBo6f5C5f5FI4DeQPkanI8T2C3Dnrwb6+U7954\nxSOKxJHwON4/4f/PGhP+Iu3+lOE2OFhvfZ288oHC/rZXHiPBTGZIvUDPF4x1\n/Di97hu7lVySeRNxccxIV5LD4gR9AGYVqSL2dKOxt38qo8O5F4u9NmqrGFWY\nkE3k7pjm6z6kzm63KS4ZiTmP33LAanGS+O2VJPZEPywV3RTNdnJle2DrReal\ns8thyqMcrCt58XVURWgVshOyaveXafbIBwzpS0aFyxy8xzCqIy4qErw2LEZZ\ndR30\r\n=RwGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg19uLTsm+ocxOSWKz9Po6BARZIJuQXd9so78lBKRfFQIgcPfwdgKNdZISEIoCV7w6ntHvOsCsvTw6RnLdRpWQBsY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.0.0_1617380519811_0.05954280953807167"},"_hasShrinkwrap":false},"1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0","@sberdevices/plasma-tokens":"1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a4359d086b8ffb16c904875d2e69f1df6029714e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Bwf+8tcQ1dX/Tooy3HRxybt+jLkBIuRZJTxDhZYw5fQEd6AxJCj/4jh5Abq9LyE5EdiavdIb+DynpgjeMkFUUw==","shasum":"cdf9638b1637fe81b27d8b81acbc8a60808b5d56","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0.tgz","fileCount":480,"unpackedSize":916941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaus3CRA9TVsSAnZWagAAJw0P/05T8FyU1z3UuP1IBOoH\n8VmMXl2Tsh0Ie7chaP1C43gLN0O9/Yl8lFfOOHPLMvBGPVnpf2rZdZAhkHj6\nKMC1B3iwDnhLbyX/aInGRn822Daa9j/Mf6+xta4yN80879HCFErE+SZBDymo\n3Sjb7Kli1gUUd9S0ewlVVAnfB3L9+iTFUrK/6Yqlxxf5lU8j9OqHQxjhNY+6\nRTRJn/odv9lE0buQ4s7karTWAWbZ0HTIsb6C7bBeO00NyNBf+10CV7+ruVgB\nHxQVZ8OyjT2GQN0ESWxurA8I+oGE5pc0djh5LOmJaAKtsV03FXvaZOl+oE8H\nTa5+w0ijmNOBtYaWEZbZBzAqyQ15T8aI2iCxeji8P4HvIqOr67jWl6ljS6GG\nZdz62JsmRnFljBJY+XUL550NWEyB1ZOikh236h/cIQ09RZO9G0mI/e+Y7En8\n/4xMWb4GP8GlZJfhcL2kO6VHzMcx3kicXu+mwlDuzZJcBx/zBm2SHg01Z+N1\naLcKNoI0mBfqiNQmY69ywLT2gvMMf656lHSABL34/+5n2F+psbXsXBA98Onp\nqeT4JFdDZdBdg4sTZhfLFQW1h7bJL87LsO7jmA9jeDWKu/HPzMHAhObDqYrr\nEQGUtztEik5jTn5SAu4xJZ6sTnKqF7dbKtYHI4xarDG2iwMo/FZv8D9KEV7W\nSA9r\r\n=SepG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJhpCrnOBV7NP48DJEqtGXApUBtZFdqVfaNHd+4BUKegIgJsRWVVr3SviumC9UTlajCaOPOLlAYHJAgmSuXjd0WZk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0_1617619767384_0.10490018610106944"},"_hasShrinkwrap":false},"1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0","@sberdevices/plasma-tokens":"1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a4770ed68a283f8f19dd765acedf60bf80c4aeeb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-SpNjY4WVwsdekuvmn260PXyiAF28VujdjK0wobuy3IPnQswPcVWQtI9yz09HficTjoYsWBNNbR1APlR+Giss3A==","shasum":"97a8dec69a652e60fa6938607af184c4cc154759","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0.tgz","fileCount":480,"unpackedSize":916941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaxbFCRA9TVsSAnZWagAAczwQAI1atTEssh7CD8jDBjID\nykmkdfMEklqdKr86wCV5jh1NKNLos15lE7i6LWg/HBUVNLNdmImuWNoFw/Su\nHfhQ7eVSyBoTGktfHpoLzgeejWyeVaGArzcSRSXB5vWpcGYdL3odzSQPFR9R\nkSCvJSVKKbNi4jibFEZWpyy8pod5iuNHWDJTE52eAN1UxkZ1Br8hzzII+/TK\n/+n/PGDUwGgIDuaeQidhKA0i/c7tRhlhVYNYgRycpz3ohdVgTD6T3QYk3jlN\nKH9YQrpqOEM+OykTYdxhXl5sykz9GXEvA8GIboQ507ydznCT3GDjySE8mVGx\nDOpDsSvtwRGI+f4bnyM/qltBJAAHSy5MkLhCE+5nBbFdKzYvSJm9sRUsTjSQ\npyaXvSVjcgps8HcKE5sF+t2D0MEeu8+YCdB2m3Yl6AiCV8N6I8tvDov6MrNh\ncfOBE6aSMWw1ObFmR+S2bM5Hi/hbL2C4lWvyhOMw+iPGweAltMXrxA5uBnR9\n05mxWUEcb3zMGHK4h3XnL+HcGL6vVjiuvyU5UeAh4EVeld96GPZ58QoFZBtD\n2VXsFgUAz44ZFoIahNPrE5mQYUdz9PwwnZiDGVHvwkIDgnlFbMabQO+0sR/X\nW5sIWF39Ic3rKfxwvJ8jZSBAxqbunVbKitXST2OtuNzxM1pFL9L5rDWgj1wq\n3r8M\r\n=sxUD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE81BUCKThthy+tm+dZGgTA5IZ+758ztiSt5b1U1XPFxAiBeyO93usFtFpgK2xxjkKCWCtNhsTxx0e9+guiixgBtXA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0_1617630916602_0.7656525274149513"},"_hasShrinkwrap":false},"1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0","@sberdevices/plasma-tokens":"1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"419cf937e3949f37df904357f6829fe95d8a9764","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-7pg1jAk+rzH2Db89eydu/RzQjYFQZ6AeTg1Y6J5v63qNKazfOqpi3+ZihyQgy6OcKe9hIJOv40XiHXcJzSjmfg==","shasum":"8fb190a86486b635e92489c95f948c0917edd201","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0.tgz","fileCount":480,"unpackedSize":916941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayLbCRA9TVsSAnZWagAAaUUP/Azrr5qWPwBpSDNpRtci\nBm21CnfVcAFK7I4Ub0J0bAbx6XHlwcbCBNc6YEbWC19IzlOJzk0ApLEejhaD\nEbnVNNERoAlsG3MWYbRgXbrK6ayo6etiQkVJ0G8wVOY+Uy6/XObC/n+9gbFN\nvPZfrBr3lRQnTAd6U5EAvYJMX3GzyEIA2oKcL9dG0GUNa4guR21FgPVOUlLZ\n19nZxsAHHHAi+QbKtgiVEvT8vqquuZ6Uas93rb4r7X2DU8+934B+fM62ffwA\nYbrY7Jif7FmSnDbL4ijZJLQOfreQj/9NbUJW8nmph1Db7MQkdC0WS0EOPCyG\n0O6mZ5BUFUQSt4LVQppxlcjUTenFodsGutr52oKrX9CmOZYDqSVbzwwnW9d+\nrz5jJ5BFl76JvOJh+KdjzrCxLdTwOS57FjLdsX/hHjrauKAOLJfZZ4RlwGzu\nh0xSkJlB/IjrGak+7thWmEEHctmJs0Hfo3m9pzW3DhZPsx745eMjiBkzkBGi\nRkwR8ygZfjCttKyvJXioh9lLT6ngXJtECyQd1GLz/5qonjlDHuTDrCl/a0pu\n13eFMeEBXnpxJb9Sz2WZxLCh/sCWwYqAJWDa+ceMaqEVLrS3juBssXEOzEMe\n/Gq65W7yioTtUTYclslXLtM7EDAgGonpE3bTJ1WP6SVGp8oj5/h9Ksw+MPmZ\n1I34\r\n=Qdhc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtqdFqQK3Ky0V8xC93U0t7NpzCzTLuv/CIQBc3SjibfAiEAvZ0Fbc6kN+0XqWhhqr7UMXc/FBl5FjeojbD98wbXKLA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0_1617634011438_0.5709927815885354"},"_hasShrinkwrap":false},"1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0","@sberdevices/plasma-tokens":"1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a75632abb1e369a58ed5037f8d50d8831e2986d7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-uETq5dqO9v56kpt7/z8B7KMGbk7wY2pwW/1Q35bEFtf5fRBGQjzaaUfINmu4obnfI33ogX+jQrxciE2CaZ+6UA==","shasum":"ad908fa4f2c5203f103800eebe7110650a4ba19f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0.tgz","fileCount":480,"unpackedSize":941326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbGtuCRA9TVsSAnZWagAAHA4P/3/aFFm1DXhXEOIXYLhC\n9Br77mpC6a2ZFVGTxw0ErnnLAvS+Nqb6tihLc9d8hiqu+qOu3svxWk4ax6d4\n3vmaCEFvdC577HLbL0Ar5p4icjCArJZe0sp+mmBH8EWU2Rx5zbCMp09g9zkk\nm/ctfKpXWfAKbNwhEW6Rmf8sCCMzMuF1rvstcYq1dIJuxutHQgw15Wwzb+q6\nM8rsTaRAc8qR1l4X8y/iK1xVxGP1uUZFrIxt23JovwncfxzSD9SolcHDy1/Y\ntawJp+/+8a7TyUN/MgnKAx5h9JZvk6gPtq0TytWMRTv/VqgTVyR916V+CuRY\nYBlSZsCxhQQrLm43Ls2nhWOz7vW+xfqHaa0n5gCpFRqd1tgxAys0GwmW3F5k\ntnIgnn9VAjSBBrg71evhxxrTR0NV2EU14+prlpvgbF6c2GAjB8IVUgHHTbV6\nnfIIEQjIpGHHduVcwoRwq86SRzle0SeBOLraa5Oocvf3t0XZlzB6vCTB0Z7t\nF1dysuwgS5XhIg0xVp9RaU8iw+kucUckRuW8tWCHbciEEOE93HALpVcUDdLz\npqPb6dyJ+0TlloJyiDCVgIfE3P/HfWLfkf/H4uyJ7yMVqF2Gew3ErJXA8k56\naPi5vF6qRX1wYIdScu8nRe4LtBJNUZQo+Az3EIZRTGUpyvMvx5QKT7rzSCnE\nqebi\r\n=lkAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD71qszGiAu3K2ZYRBCYXZeziDEbBee6j0lcS3FLyFQvgIhAPhydmlvfoH4Q9UI+a9xHJMD6HGfCvvnU2E//5VIiUnQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0_1617718126023_0.4080926144298722"},"_hasShrinkwrap":false},"1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0","@sberdevices/plasma-tokens":"1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"731aa8ef905415e2650d05e3b7a6932241a2280c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Y4LeVD3QFVLjPYAhczbmUeFBE9N3GPu5ErmmZ27owgl+aSvLke+uVhWfUdWEWFc+/HXZrsnJZlLuRIcNRDTy9w==","shasum":"0e85903258fe5affe5fe88d44ecafc52a4f42581","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0.tgz","fileCount":480,"unpackedSize":925834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbH6CCRA9TVsSAnZWagAA6JEP/266/JTkPxiqjOeWlz/a\nxoCGi7rGh+yhbKWiLlteGsbKFufRK2nNoIanJaRhad8OYJxwJ46WSBfub/XQ\nWPIXArvBur0XdYjXAVETEbzihKF8FTgbbHvV7bxwyy/TfLKYX8OXXZc/8lkd\n7z8fOU0N8t4p0kFjt66ilzssY/ewWV9gAe/xseN25CjHLZXZLxM0FLaTnlqw\n5EY3JXRVgPMFznYD6GTUBSltfEbnxkSQQTaFURNxX/EqaNcK0bzy43xB50rH\n65rctxEKd0LVhHVeFmbr9N0Q88RMsA0ZBtZ8VObQYVf15GrQ6A8pee0+kRua\n8G3eqFK+MeKokZZ6R6bXtgpzhFtntNAH96tc7BMQJq9IjB0ekeYAZEUOEXP2\nATmdBBarNOs7NSnfP/dWtsejXAQj++fx099nT7Gjn1rMmnQXjE+0Zduu+NPI\nz+Kown8v+IPz3807hp/uAuF1EGrcfUlc9m9TZAW2MQjoyD4RYAwwB07CZz27\nSjjEV/vMzdouNUimc6sXDIMHTPsXOzG8i8XBBZz7SgFrG0gm4UPcq1PoVpFm\nq0HdViyM2sCg5HdcP/T7A6Fmc/houErN2ArhqhfWn5J82SjvqvYkz+fkbt4l\n5EECjpbOF9/WcN9lNBUrJColoABk9kob07QlSDyCUbyEuEn7/SRa8MkV7d5+\nftFO\r\n=nNhf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzihDkcG/NTuxJyDZK8w+uJVbSbDhA5B6v3gryMEGuvAIgZgIYYgXJGngZlEAcrO4XKgRUqI2rwlrxeQUHicExFmM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0_1617723010093_0.5476831736090191"},"_hasShrinkwrap":false},"1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0","@sberdevices/plasma-tokens":"1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b2ebfb269227d181230b2464edccf731550e7427","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-ypBxWZIdyuHL37Fanf9PJbQUI0IHHEmr3U5lVQqUT2qoCBzdjCs/UTa/UJbkhYHteBhQtm+lC+zPXaHI1lHqLw==","shasum":"b553e109ddc3bf60751eb3256953d82d9804eafd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0.tgz","fileCount":480,"unpackedSize":916941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbXN7CRA9TVsSAnZWagAAkjIP/j3AETXARDTUpv1/2/d+\neVsuT3lRUtPis7YgBxqipEIfYSuCSdbKR4h1axeH5qIAaBWT2WVXuJjld6Qt\n5ZY9gfa8NQheeT5dikFTr7U2j0z/pq1ZfmXBmDuie6KlPmZSaV0+nBpsVqep\nPLcmG55Ov46XfA335d//3LxPdQu+IJX67tZ7HCa5XZDZ3QE1Rp2CVhl+t2nB\nmo6oNyjw2YRc6yYJJoGg3lstr7tKm6XAIEci8Ubgsh5KDaYw0SkPjtrHmGa3\nhyUUMfGLumu7S1m2Z2ntSMivpjjagvgNPAIepQv18ogF3hODpk84XcOFUJAe\nffuD1Umke9p59L6B48sir6xhdbpcHigIU3mrF/hDmKqvKx1YQAQFxilk+dZ8\n1L6wvudQnhcZiGb+y5J8haG+whZg7PTuGymNUashsHwOO6tcZd2KundKjf4k\nGeS6gkfVpOdUcyEHKMAlX5CTqwzMXdm28iMfaiDYFFKm84++y6nzguO8IfpM\nlejwZiDDey6FrlhwyrLIAhl0ZtELY9ESbtAqRTZQM4HTiDqRauf3oLiwBMb1\nEYYCeJDmTFa8j0+LP7vdXTc005ZVMfr+7kk0JghPFR97nh/lIa5N+N6TmvNC\nLDFkOYZFtTX8ur57srnWcT/RLnJwTlcUW2K2LdTEPOs49bWf4IoEGEKLQQxy\ndFD4\r\n=t1uY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5ID83DvtNeIY0UuSGsHDp0pDXChCPn1SYDnq6JsWr3AiBSGuAAW64LfuY7jA5xSmacQgqiwYU9bP+g0+DVhvmiqw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0_1617785723282_0.8533511283254309"},"_hasShrinkwrap":false},"1.1.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"85402bd64384ab8e1526fb832c748c7dd0cd2a35","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-byokUFP03SP2u53gfuIZqsSrgqAiC/s/hGELrR3fTjaLaEfFWx06Qj957GCkZVP9lMBwIlfZw2S0btrWk3Zelg==","shasum":"039f10c9d3024d96612f5d3e08f2ff623e9e6821","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0.tgz","fileCount":480,"unpackedSize":941780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbXU2CRA9TVsSAnZWagAAyggP/1zhoqLD2zSEkZtMyeKL\nrpc/H0j80ffjYLxM0yZ6XZ4os/f4lXGV72YUzWNPUfah7650l0BENCajQxjf\nssc/FzRX3CayJtd4D39seRl3pFCRHgO1WamTnZQOfJorc2QoJOe2HxRSn+l4\n8lgZ/C5XlQNtVSEhY1iP7ekif3wjwwna7hLUH64NkODqYUV00gQ/ysHo613O\nP+zJJd61adHmgr2LrTM8oZz1EQalOTXYczHZgvGx6Baa8KeQgXntRWvKsMTs\nKQejxu9IQL54u2FrOWqCmH8dH7hZcHjy7qOO1pTm3VTJVqZBMKfr3wyXbywQ\nUC1jIcx7YUIGE24VuQRp6kwRS9L4PGgTE4OKF18gHeDh/0qwPn/xzKGtVm1N\nBN0IBTT7oIBVfcDJj9XoiPfM33/uef4AGdBsFDBrwwA+Tbnlt4DagJWYAEiT\njc4Z4gE9V2SDuQByIBXmhrr+aGWsm2CQafenuG28j6HC706KC7KLhA6tnob0\np9oAQG+AePKJhBV1wX5pa4350K56xgaFEAtAhQwphThu3ZqjtJYyNtGV8t+U\njzvGdTrr8Qo/dxGsTDKarjvI+TcLujU+k/3UIqr7oDQWGUDOmGMftuDt9DQC\nC1r2gIdnXxgmYUuzjIJrwg8k5IJf8CL3ZPZzIpiDovp0KyKiUZrsUQN3vIC6\nBCn6\r\n=BZSs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVYSzy13fuw0QElTXPUpbqhGixk7ZNlV+fuEEPFdBmhAiEAiZ739VAePv58jLOQ6VYKhJOlPAgjmxx/8s3TBxrmiXo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0_1617786165510_0.9509126580889398"},"_hasShrinkwrap":false},"1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0":{"name":"@sberdevices/plasma-ui","version":"1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0","@sberdevices/plasma-tokens":"1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0bde571ebc983edaa9381587b81297f5c86a6595","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-7BchwX2UnIFFeocaoEHpilJC4mhIXqPb9Len0cVeTBVLV93Sjz5BFw7YCEOsqYaN7oUTkczCi1RoT9xUyGqbRQ==","shasum":"5f0490e9986aeb3d28ccff84bb95942e19df7e9a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0.tgz","fileCount":480,"unpackedSize":941839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbb04CRA9TVsSAnZWagAARUcP/1KaiTBm5IHufTvngWT6\nx6WX4FgNEK60SxB9u9TqYrlAseHivyZ7kcBhrmEJOzHU7n5GrtagdnipR/Yn\nTr9JApfmL2kA+yDKlykM6pzBHV2D6koIIWLdtsIiBFITqSuA8l9iXyS3sN6b\n0sU4ykVfHW6nK4cjBmVM/WaqHakk9IaDoQjFL7+HR6acXm8TGV5/+bj4UJ0j\nuIJN0OJHKuK1+3V0KW8eRG8iOBWaW5U5uTvpiYdVEPh63D5fjRHz8ZkpvM38\njOSnFCo3GrahsFxGL4LV/qH8EdSiVVx/nes13+c3CMQUox9bpipa04MCjBxO\nqHJeedlr1JkCpvB9rgs2gmkZ2tlhuA0XS3MbjbUAoVhdPJxdUKbcZyx9MHOX\nKyEV50K8779hpVmTyTSQXd1KN+0ECrC/XtaRVXzY5sQcJQCZs7abSdCQ5prK\n8D2MEZLOO0u3ahiSP1H7/wi7PG0Fn5eb201ArrZc6Gm4oziSIZ1SP8FUgT1v\nK+3YXMwmm68X3w8+q5U7ZI90hzaA2SQYymrPjzBmVLKdtsjF2EBVYkDUpq19\npehNzAHPeBMBfamq7rnsi065Sb87vGHBzbd7en7wlwCvFWCfD66idJLwB9Ib\n4iHEtsbcXI8PSNYWLbiLOKXbYr2p2YAJFiiX7kxM6KF7D9NO+OTDFO36C8EH\nb+6H\r\n=AQYi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMozfVCZ9g7+vkaFpc7xJd2hA02rxSe96LE9TsnwNB+AIge+p1kp8V4hObh7mfa4wOJ4YWVQFl8sSTClz0C2aRe9U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0_1617804600173_0.012617506756305463"},"_hasShrinkwrap":false},"1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0":{"name":"@sberdevices/plasma-ui","version":"1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0","@sberdevices/plasma-tokens":"1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-ZnGuBpuTZvIJTJHoDnAyb43ecI2GCF7nQuIbQajQpwoydoVOvz+8G9P+/EUxHD9EmBkqHbwB5vgXVHw3jtjcAA==","shasum":"f7025dba19aad859bfb7f80057f8e259212543ad","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0.tgz","fileCount":480,"unpackedSize":941839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbb+/CRA9TVsSAnZWagAAs1QP/AiV7aJgxxRnXSZdIue0\nrkH9eKKObfV+IkxzLLWMr60STRJsulBlAxmjlVNUYnZn4bZXF95jPCMx5U1u\n4zTI5uEzLGW+UayfYlhb63hdpIWlmvXDuft0QWWH7+FRipwMb4ToIrarP8Zz\nOAKTCvivnhT636/LCnHMIC0S494d6CCo0MV1xQbAOJc+ZzCzcAFOLUHXPEbO\nVdTFf3pbLMddA+FTJnsuMA7MPalg/KzDpgN+eT8zMQ2hq0vzV6JEkJsWFgkf\n8ZVZylPFTibFG5QtEzx6SPWrP+7IPuw/rmypwX9FSFfvb8uUlNzv8v2oKH8M\nEYAovy4bA7NwpBrVqO17gsBrs7nM0s68+u/98dqA3adv3fQsHO9HJf9x5RSF\nHJxSspAoh0uI/36v+BWS8myY6GOCFWbwxc373AoIkufPOc2l4vxE7QHOptOR\nGu0eM/rh9s3p4KML0tY1JEccFstWFrqntci0vpalv0qOZ1poKAymmXfrgUqp\nykl74w2y8zjZLju4H8QQoIyx732klx+QaFcov2x22oQTcOYBU0PJGDMgjmVR\nqszNmr8ODkxuXsR9fTEQhnd1Y6A3FRvkJ4mm7gmuTR6y/1gs6udnpQLImH1n\nAFfwaVVQNdZTuZk0MFqWmsYv+zDdrPvHub7ncXEZ76B20kxH4fzIJmhUgih2\nK+bQ\r\n=/FTJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQmfTUzT1Za6vonhF3QUvBgzBB/wX8UfgNp7TEVi8xGAIhANiWQkDoTveiG4AyilWtXUe54oVrQnYkaQBwBUrqaEED"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0_1617805247066_0.4353835310340666"},"_hasShrinkwrap":false},"1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0":{"name":"@sberdevices/plasma-ui","version":"1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0","@sberdevices/plasma-tokens":"1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a163cacf340440188d48cd6a970c21815424a13a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Xj+HdVCDenSBx7Xha3TP2C8Xtz6cJQHeZ1IJhyJ2lDLdmPrajlOhX3oK7j9PABkHtaewUkOG+uFxeysyKYqnEw==","shasum":"e029662d5c4c41e9a582b8e5da07cb1de4eb97d3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0.tgz","fileCount":480,"unpackedSize":941839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbhHnCRA9TVsSAnZWagAA8M0P+QGwg+xFzLHDypM+F3/i\nvohdNqCLM1uGmAEVJZh2ZNCZWmiyFaSvtFX01l5eYT3T44uFBxMNVCNlN+sS\nPu7obAcLMAA2eYL3yzSzsHx8zPp1ya0FdhgWPB5T4jEdZY1e9+v0Vtb/VBQY\n3UsfvKO7EV+QzGDfZb4XCbALFV80qxLUyTBz6bqcjq7HysjXLi3utrxtlDnN\neKLlG63U4cwOoU+g6eT+esihxNX18CowUxJNQJzD4MWkbuOGXxAN0+IoVARx\nHxGHLC1scmDv+kYadAvvUKEOKNbAlFOwHcLGdC7GralBdwN2mQPHOWeRPf9c\nrp9wphxSbyS3MhmwbrfW/49Obes2+S7dBCbZ/DkcDAw5dCOq0U7nAqLk1qmm\nlaqVGGbE1yKAw+VIk9vBOn45CWp7CnALSH8UJuVXCM7Zfl65xdCBxpAlV5RA\nZiIvCpxx25Ld98h2hQKS17vxgLDGJpzxxYmDir2d5BXRh1YyvNNhK2MrBx7Q\nLTz7S+HnBBYKH9r4lQ0mtgB2V2Y5X9JC/ZQfY1LzwzMv/yl60SQjw/iYlxX+\n62niFEZruBqY4dKL8a1hzZCsj4Erf2ttQbo7Gb+rGpVPTxLYBY+Czirri/KQ\nG5zr9B6iqo0s/zo8OoW3uKKRXqaU3iR4+pMHGWMZq4gbbAFkuzS29b+fCaDg\nr52y\r\n=UvFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpHEd1sWJJQ1BjxAzq0Nr970H/fd8GRs8ydMzo9iqS5AiADsMIRS4lCQk5eRpyeknfJv/Qex4VGBznKEtp7X5NsCg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0_1617826278846_0.3908152673427081"},"_hasShrinkwrap":false},"1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0":{"name":"@sberdevices/plasma-ui","version":"1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0","@sberdevices/plasma-tokens":"1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6fee0eff6573053d5401b7832d09982d37446977","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-ozwChpJIEAhlqrZcFtMIOhuAeRbOXKZXZyGzfnDlO15V9LAkpZTnOmyjYZyZ6HJpNISDdK8KnOvZ5qKO2WADvg==","shasum":"7648c60310a2734004220a43b02857c274b78bff","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0.tgz","fileCount":480,"unpackedSize":941839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbh1nCRA9TVsSAnZWagAAAmoP/3AOsmj0mIb/6RmMNG7L\nXflgv9411VGee0nhC6+rLR1ciaMEdT7JtvHUZ3RnmV27K2ZRBMf//Zynt0iq\nnHdSDbrifUoh4dXF/uRPrETwGrzzHrZud81t0xqRXDVr1TWj6s63oHRrbCub\nh1rPV09Fl6QeDI5N6teEJcN+HGFX6UNPQ+tgXyLlhjfX+lTeK7jFLJEgj+P+\nk8Vo6Jvz84/aQxvW0OS+Q1PVaDonXykbsb6UaVn+rdEzRUXra5oHvqtSB0Zz\nhTJ7YbWMFS3JXG1LCSPBPGl0eJOAFSlIC/ylMimKCFbcko0NIDt5E5QigVDP\nsjfHvGxLXs/t0q8FLefY9ZRK4xaScHRxzWJnLqvEqPJqqI+lGpE6SWx0Z1xG\nrMP2fy1dqvMO8wlxeswGq7x5g45OF0x9VHPcQWGKov4A8X8ALs7ImMpoXY5b\no8MZhAbhsHBJh6grZExpBecUeBFSczUqmt5/2LjRZlRe2egcnQk5eCuzsTU6\ntg9ueIDMgU48ccim2suOEpSQreusG129xAyZD2B5/lssnKDdWhgjzPlGJI6E\ne4FxoNZ59yHKsxI6OFof4zomq6x4F0wca9jXLfIxmnlWc/lRePpj+R34xjRD\nIv83MwWSoVhVlUxEekDhxA39Y7sY0tksFHvUIEGxW7DGl/aoDqy+uO4uAIkT\nQnrW\r\n=XGwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEj5GpZyxowGXHaEg3rg2LzWL4LCARVZooZmvYTb7RewIgIIJyLWN84ykfe9PTWjNMIVoNnAvQgxLg+9LpIO0qoXg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0_1617829223105_0.5782291040949921"},"_hasShrinkwrap":false},"1.2.0":{"name":"@sberdevices/plasma-ui","version":"1.2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"28de101149d8b1217f5e13434b54f5e79b50083b","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-BBRoHQafcln3z/P7MUTVEjd2YKaCw24IItXI0XTRsk7mpWlLHqXw6cfArvTp6Ok6xaM/IG6H6JXwRPRiu/Rrfg==","shasum":"4f74b98910ce6631b0ec72ddf6245dd14b373d38","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.0.tgz","fileCount":480,"unpackedSize":943346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbieLCRA9TVsSAnZWagAAwtUP/iJ+82rELZagwO+cfCed\nXpOS8pWtbrfvQ3kjobjG8dJ7rsbWIG6G1qKiUv7XB+5tdwxs7DZWDRZ7ptp0\nkQ+Y8nGMOWYKqRnDBfFpBUQ24KQAmBbatwAWUtwKAWp/wsNQ2UmPWmifhcji\n0n3oE/4ql927vXVzMHoBFqjWpy2j42XgKE0Ty9jxhCoT6sLN7TVjtBMEIXrb\nPEP+qMJr8nyZVo4ECRUZGaJVYsmMMEzJso+TLR1Vuofy0jOXLxOlQGv90XsB\nJjDQJs2C3eWnBkXfHzTnnCbUJz1RiF/EYjzOGnqme+LSDkAwlg+ltlSt9ZCH\nh4yCzFwpAX1rzy4IkpYOV5WXm6WBgs7AD+O7GsyDYqirTxmG8m/Zq61Oxh2j\njcM4XBIpU49UXcpiNMJ9iC07MwA76++o1q4HsTg4s0GK526TfpLTQInhrShI\nkSbkyjQfW+Q2Q0LRH96mft04de0JNEWxY1Djdp9SYYKZvzbLcZy6ji3T770n\nWrF6oPuf+wkpJamGjJGDkflaM4XvDREf3d3oLttnxfKUkmuOZnu/qR+Kf66Y\nRN6dytEkx5IsUAz9g/DTZw76XuZYdYi0d6o259nC3tC9RRDJ2r92tlnVzXJU\nl6D1WZ5C6YPVGY0aKCcWBgsEMlnEjWaA7R9wQtt4THLbxlC9xlQP4zpHOYcR\nJaS9\r\n=IfIS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/JjXSaF2BCt8y+MfQgRgFe84Jk6tDKaP0c37QNhHpXAiEA5zbKepWZ/9eN3Cgnw5hlrQnqruX19f7LYjWO/WgSY20="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.0_1617831819146_0.6166634685221299"},"_hasShrinkwrap":false},"1.3.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fe773ec077ae6d9b652651b8722a8f4e6eecc8a2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-8OWiX/7TiArHGw6PHj3dmdI7H7v9woYlotIhk4f6mQO2tA0C53wyQ77qOYQR1Z8VR0A13ssV1nHE71013js9YA==","shasum":"efabb3018a1b4191099c8cd6b463e76fef5fe275","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0.tgz","fileCount":480,"unpackedSize":929459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcCG+CRA9TVsSAnZWagAAbZoQAJ7ZBzUGLDVX97S8pxdi\nypkIY4vmaCI0JSpz5NNWV0ykYP24Hm8kI/AxHYd/WrOp94DBuSz/EKnhWVu5\nHWqPxdfrR0ywrWcD3wppCYHrDxKFgiqr3CKhkQZDtPoidSdswyMtydDzK0RU\nMSWFeoNMO7zZE+sDCY1INdwbazPgOwGKayTotRvPolsXT9rx8PswSOlXgwSe\nDYL72aP+wPrx1iL576BX4ldFyg5jOI3BCltgRfoNyO3TeOEaUiTrqKxSMjQV\n9yjUQgtFRg7g86fY6U7RUkXIL3W8NsBcPBSH/Jsa5Y5vJuaAtxgSEHhLtyRI\ntyE4Rmf7T03FkANGpQbTV3+q8QfWWJLxohm6ZlxEEfkJKv/gE5pU6vv34PPb\nKrauORDkLMMPCVu9jW0goftNlUX5iELaPUGNRFWyqghq6VPwoY5Q+xHtWJId\niuvryvoZVTudHKj7q0a0cnR9PbxLs09/DGXNm0bJqKS3abfieAwY//nxbkB8\n8sFnNSO0jrA+0mN9x5RzLPlTOEmTQNiRw2cTuL8vUVE6/QFyxoP6/1PqeDAa\n/QdLR+t4/c+1YZw+5ELzqtpqgKcEofP/J3sBcBTskP5Aq03/6NbasB65zKVv\nLt5+xmRWFt2TEhfYHfeC3jQpay4zxwRLoHpmQjuTKvflWrWNArj8Jnc8E/Hd\nIaLQ\r\n=JQPw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1VgFIInr8tytziyeUt8LBuf4Vjrg4f3JbA2H+GbGebwIgWSOg4L07Y7Tc4pJMLfAhkuJmK06D4Wc/9wLNzZUyUEY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0_1617961405921_0.38476632890378815"},"_hasShrinkwrap":false},"1.2.1-canary.292.ef6a6a05f8b66c22bd27361878d9f92cdabfa64a.0":{"name":"@sberdevices/plasma-ui","version":"1.2.1-canary.292.ef6a6a05f8b66c22bd27361878d9f92cdabfa64a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ef6a6a05f8b66c22bd27361878d9f92cdabfa64a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.1-canary.292.ef6a6a05f8b66c22bd27361878d9f92cdabfa64a.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-rS5k6KfVp/Xm3k2gErjEVXrt9gLU2YjotbQ4GBdOzdIzOxgb6C01Akc0zCZN0WsHDRdtt5Uo/qFU3ibKnENmhw==","shasum":"9aa7e96fc3578b545208663237cfb2f52f9c9cca","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.1-canary.292.ef6a6a05f8b66c22bd27361878d9f92cdabfa64a.0.tgz","fileCount":480,"unpackedSize":949743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdABHCRA9TVsSAnZWagAA4e8P/iA3s/2RytFCmLkV5P3W\nOf9sVzsKmEtT8o5kE27taOA6AGR6qOE0y7Y2Moh0n+7CO3LWh9LQgRgGyk0X\neDjhEW/SY7cM8v9hOGniN8/EsSOdYYgskekxwmqUJxj4HKHFlBEzbLWz2KLg\nCyigjV/iZyIYaExvbKvcSZU9YPC8BqlUnvp0CrUNGI6L7moumzrAb2azqS1v\nRdtRUsTxgT3Tkj1X0cvd8ZEh3eVFmEHtxHsv6DmfkjbvSF1JjSKQ+1TYIUew\n7aH9+6ixJFVMUY00byZmZcTiB0InBAjr3eNISvSGPkwWft0PjRORP6lAbhgA\nEhkiM09YyxdgsMT+Fmt+MYzaNYru3dVKg9Vp/r6lY2CDF2BGWbfUq403JKbI\nj6DtGY4SXbxTg3iXAbeC4hRsyl7PcA285gPHHdrFSN/+xx4hAUUGF1C24vT8\nDJ24HV974e7c48BBMX0x+HxDEqHoScx7y0PwYREu+ITzhh0POrjomEvx2g+b\nKe08iO0/ZMPuoRHADPmrqWoyzewph5KrZ1CRRRnHqI73RFThVdHAA/vGNkLd\noCqEfIbjxXH6et59Wr8AzW77mDqcxoh8f9AZfYzMEpFD6DUUyqxHxrIR/lRI\nhLP4pD3sWqdy5h4tZbOicwwVo7Q55xFhMNJQ8cXx8c768TQ72MupbjuybEuw\nfi8R\r\n=pq77\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMyTowrINxCYJFRJpCyPWXLM6ySq5AMp1o2jGc6GPzuAIgYAkzLTJdS2ARqYjM3JUvvb2Rm9rEJ2N8siQMLFXiMdA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.1-canary.292.ef6a6a05f8b66c22bd27361878d9f92cdabfa64a.0_1618214983369_0.24666477150989108"},"_hasShrinkwrap":false},"1.2.1-canary.292.0ba4fd979f193a583b6b108a550db6a21be5cadf.0":{"name":"@sberdevices/plasma-ui","version":"1.2.1-canary.292.0ba4fd979f193a583b6b108a550db6a21be5cadf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0ba4fd979f193a583b6b108a550db6a21be5cadf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.1-canary.292.0ba4fd979f193a583b6b108a550db6a21be5cadf.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-y4yjAqt9cLyyE+FNoCo+n4f4cBFvEyWSchDeK2uhqtwA/xZhIYwi8DQDMs/VnQVag7Ypll8h/6QDWLN+kF55dw==","shasum":"8167c82aea18145166b7d861d15dc84c4857f00f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.1-canary.292.0ba4fd979f193a583b6b108a550db6a21be5cadf.0.tgz","fileCount":480,"unpackedSize":946247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdAquCRA9TVsSAnZWagAA3WgQAIqlCexKDDy8qF1UqRA8\nP9Vrc7al5LjmyIL3epxw/IhtGCoNZJpOrEsina4zqEWdg3yjULgMaq0ElnZK\nelX35w4xs9LJ6SvMsg1LnjPIFxAurcUYsFZH7iqRma1X5M4sZK4GOXGRZ57s\nHT9L2rude845fAy8h5wpjvmFKAqKJLg41VGGcHAXEf4dyJNhflrC7eVnNjbn\nf8f4xC1MT0aCXlcWh6PI3CR/ASI/yf4FoX2PSyPlmQBUxvmcCfa13/+Vu+Jy\nYK4L8oC8Z4PwEK9wYbmijQPIm3h952UD9Icg9xd1QigCw5TxjSSKVkVDHqPz\ndzRkE6h4LVy1zI8wGo9cgcjez9quEQGLLXvRyE/W0OT3FVdkhJdbk+eM+oui\nuHHpX86znXcWdghRAyC8tgNYzCsqebNEft4FZxWxknGmdZI2JDQ1QWZTy49R\nrWC2jDDmT5k4JZtysrXwV5qqmP7KEkpFlM1AyPCdZQNaNRLmsGMy/aGQaD+c\nQHkmZghJvC0eX1f1hv+4uiI1bWAsAGiyA8PboJmUDWn4BdrDTRqwqs/MP+Dc\nr0Yn/8jrZLYevNa54iGrEozH5ZDR5u/EQ2SGoj9DzWbbtpoMVqMCQ/B03Y6k\n6z1j1DqcA6ZP3IuDZjKK8VZK1NEl1apzyZTCDfUL7boLhBpiYYSpeILd2lSc\nVGYX\r\n=LFQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPjZUmY6Hnm+/bflnqy3k11zdzQhZGvsm84Kz1W1mv1QIhAOtZxsYgYvEtLjwJOyP8E5NbGcp5L74KyGBnujBcRKBm"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.1-canary.292.0ba4fd979f193a583b6b108a550db6a21be5cadf.0_1618217645586_0.5197641385275218"},"_hasShrinkwrap":false},"1.2.1-canary.292.e8bed3deea7afa40bc405be03c85d6af59f45799.0":{"name":"@sberdevices/plasma-ui","version":"1.2.1-canary.292.e8bed3deea7afa40bc405be03c85d6af59f45799.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e8bed3deea7afa40bc405be03c85d6af59f45799","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.1-canary.292.e8bed3deea7afa40bc405be03c85d6af59f45799.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-adMURAM8U8tJj2VoCdYy6tGNxMXwnFMn7l/VwpbA6zvAm4Q1WScRj011zFtewqlwyy9hmyFFf6H9ZQv9xKRoZQ==","shasum":"38f5685886127371781cb2def94d4ee2121e213c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.1-canary.292.e8bed3deea7afa40bc405be03c85d6af59f45799.0.tgz","fileCount":480,"unpackedSize":946247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdAtKCRA9TVsSAnZWagAAzoAP/jCSzk2pJCMjiVb/NBlh\nUr7UxJQj0qrLiqKYB2k0S1Gy+R2O8VQWkwcB4cqmMpOkbdCdCIAjZChIIi7X\njxykSHii/AAo61GpF634s6N6RqzeInuNLwOvt8k1bGkkeG7fAwXCY6b/G/tK\nR7GVp02qwCciB74FUl7BNQ0i6FwSvreGMM29KD2ve7IOlM+1I8psjuT4HTMl\nci+ah2Zed5AftmzdaUhzv4CU45yGV1fhP11el1n358ezwwcIWRzXsPfe4KzO\nPfyw6LrxTf/x74O3mXhsz/sjnygOQuZz5aOCvbaoBVjxdjARPmFRFRHcIf9S\nRyVAf1Pp9Sq2ipVr1I5FE9r5ZwHFWV5yIdmyADfGf/csmUcpplab2gpFooyF\nPfU7bOC1BnWr3/bMyfUgEle/DAYX8uN5YcyUr7fty0wNVbH6m9EDXVf80+jq\nAxCKppmZsLu/6HXUlnm/mM/mOMMRWDV+lvcTR9JPMVjP/qRqn2plwcO8M+df\nahu+mJwsAZEePl/1kK0/GIb83cUF4Tam7DPGicuRcsLv3bvnPkIzZQw2fUvu\nRsKtq/Eyvz2sFCNbIvU1yhoFmXsSDf79S4UsbD4BwHR0euNga36B/8gk+t7R\nbdcLoKA16h0sl0OhePPzI6y5CZnAv6yCIHBXuEYv2CcCZohX4AS2pW+yrGvg\nKwHA\r\n=gFxC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvoUN6SfyxvmJepUqRuleNj3nHV5sO/ierttntwOQ4OAiBi6IfOw0C29BGLaRMBawYMqFjbsoD59g25YLJbyabgaQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.1-canary.292.e8bed3deea7afa40bc405be03c85d6af59f45799.0_1618217802440_0.856202391986203"},"_hasShrinkwrap":false},"1.2.1-canary.292.ad41d0a3d32b7319a05a3a3744b743fd1562953f.0":{"name":"@sberdevices/plasma-ui","version":"1.2.1-canary.292.ad41d0a3d32b7319a05a3a3744b743fd1562953f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ad41d0a3d32b7319a05a3a3744b743fd1562953f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.1-canary.292.ad41d0a3d32b7319a05a3a3744b743fd1562953f.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-RbEeD4hyTBpjTeYLj9aHb4wSqe+11pYIR56UPZ6ploRhhKPEOyh3iLjQ2IqnfSY7rCTLHuhdvxv4i9I83/PC8g==","shasum":"80f79a85acb14a5c1d0d24d39403e6017cbf2563","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.1-canary.292.ad41d0a3d32b7319a05a3a3744b743fd1562953f.0.tgz","fileCount":480,"unpackedSize":946247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdAzeCRA9TVsSAnZWagAAupwP+wYilSnQpFwoFiC9Sqp4\noi1AO4aIrbZ0QR3+0kkyrwUTlMUdaAcDBuNnrbofvJouek4U2pBzmauLKAMe\nXguXgOH0nNK2qs9HUavesdqGV/DG7Lxb0NdutQnLW/IqHDpR0NJ+FndWfBux\nUbbMW7qvpcjhju/6VpOsBzYlUUZxtez9Y7GaZQ/g0mb8K8P6DM2Kl8kqaqpW\nZbWhj0U9GBjK3WgiKtz8B2uATYWGnRT3vEoI8711w3kXDzHKwSWCKWeExHWQ\nEDszyAzentIW6iFjVVEzzwkZzV9t10wG7lZc5PCptVUuIfk2PjCuX76jM57C\nnzySKjkKQ3UhLAXFhoYhbR2ja0/esY3yvC4ABh8PMrDEptaWiSBmZXm0T48q\nQK6zdDbNsOVFqpmUfW/M/g/FXfzjum9vqcQYKsoQOqcnWngiYVj/oOfxRV80\nMmFGnZ6B3upMEh4w299ZANTPVR4u9pFQXPtx6ZbHDFt1EjgdG+wzrUKXY7eq\nOy/1hZdq4WwErESO0OVJP0e3xIFEvFUKcKJksxGImZjn+00+QaMqV8ikh6QW\n2Ph9WMTvGZb+oOmkv7icSJdYwbdFUY2bG2sB+2D7BaxUTj3/YbnVn60wb3Br\nLOdGv3xqVp98lRV7UU5Oss8u1cb6lOQx/s9T9zPgs0d/eWB1kwichjERl0Bj\neieH\r\n=rTZ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDD2QVnaGXyyUzyF/EwlRlP9GdcwSJMK4MHNGjLvMek5AiEA6fYslNjCYzz95HSLMO72Ls+VMIjPRw1zfykAze/FW0M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.1-canary.292.ad41d0a3d32b7319a05a3a3744b743fd1562953f.0_1618218205985_0.5772763172851179"},"_hasShrinkwrap":false},"1.2.1-canary.292.bc3bf9ea5c1130fd8ff36baebc1d8cc2452a7000.0":{"name":"@sberdevices/plasma-ui","version":"1.2.1-canary.292.bc3bf9ea5c1130fd8ff36baebc1d8cc2452a7000.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bc3bf9ea5c1130fd8ff36baebc1d8cc2452a7000","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.1-canary.292.bc3bf9ea5c1130fd8ff36baebc1d8cc2452a7000.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-YtU+KuRmKq227bOa9TOIHWNyvNio8ZnmDGZ1yPbvKU05sCpeZh59HumNAECZAF1mI8GihEDbRuDNmQsNk1ISsw==","shasum":"85305f7088f33302f1f80c0c6371e774f7ed97c1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.1-canary.292.bc3bf9ea5c1130fd8ff36baebc1d8cc2452a7000.0.tgz","fileCount":480,"unpackedSize":946247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdBa0CRA9TVsSAnZWagAAlCYQAJulz6mpxTZuay1fSlrJ\nznbs4CnHth7NNN16NJHnggqqLmsnHAaRYXEtG8RgdVUHK7RJ5ZMmvMx457xB\n4hvZswyGXZW+IkZoddEWswArN294c3m/wkISbh2dQWdt/1ELntKfVLJuFW5a\nTjv7Vp9j7q/0yw9WKyikP6C3g3Z0D749VdBQ5SyxCHneaS7NmlGLJ0Yc/+mJ\nUpVHme4VE1AEJlb27KGD7nnLiZdE9emw62mSBQX6owiFmCRQhVa93bQymJqa\nDARFqCWgBdHrx+CMidRpVCCfn5LXCXjwGL8qm2OZngwQGvIG6JEnsU3D5J3N\nJePNsgBvlmdTjA0+i5F7pDTZfye971R+yZuRn1j0nLB1aeiAv448fWiw+eWL\n2e0zn+RlaHnBGEXsfQhUiDIIinlK0Bco1IqTp8+UEgrkaOIavTSyjVRSyebm\nN7T6FewWHXA8kMhD5zrXNYbIvLBcahKQNPrxF4W1pQiNDgocWEScwzx2EaPs\nqNeHDcZOe4J6XMTf3GqgTekixWebzz84UypEqiwdWLbkCBVwUWgev0M40Bi7\n/ox+LoXpFDLIBBZhJd04I69gFLdW7b19qzgE0FNsVLBL9nJSyQQNG8fJ96Ic\n37r2ciyEsVVB99jqT9cGj4TgroNqeWebtXcxRDrgHf/ZsnndcpxZwBPBnjjD\nvO7C\r\n=tLY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpMlj0cNM6mku6BML5PAV1dvgQN8EHnIcINDh77TuoQAiEAxGc2Abj1RkkTYQfCwcYQo0GTwSQSdhZh4pssM7AW8ls="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.1-canary.292.bc3bf9ea5c1130fd8ff36baebc1d8cc2452a7000.0_1618220724239_0.0013517745487299226"},"_hasShrinkwrap":false},"1.2.1":{"name":"@sberdevices/plasma-ui","version":"1.2.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"482e62c11dc50ff8ff0ab47144f608153ac5020b","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.1","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-1ke0pJXLQuB/4asHO+QnMOq867GReaE3y0VMQBO2U9aQJde4VTekNzqJbE6z8Stz/FS0BVnLNgr84YneUGzpnQ==","shasum":"caa6a12a2a5186d72239127e259c3e77997322e9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.1.tgz","fileCount":480,"unpackedSize":946483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdBi6CRA9TVsSAnZWagAA45cP/2UJj/xBiS8BiNoqSF3p\nHcIPNYjQeQGdv8X5gcO+qNGu2FKX+wfDOGJs18zyXTF5geMPUwd16WMzN3jw\n/eSPn+2ZAiuc5MX9t3r1CZcnuBA+9MwcX48cxIyh7DguSjYR4GkpogRjJlLD\nGKP2Mp4vOCC9j+IpSkWliIvuqFocXezGqT3XV5qeOIKsnmypVryN+0bWYn8N\nX5eL8gbTVd8vF/BYKUxdbDFJn1tAdX5TcrGtDpHWba/5wXTqAHD8spATx08a\nJ4k+WpIF5XSrB6vr5g0eO5Q2Cfgw9gRXQuR1Q0p+RMdKkeEvy9YRg5s7wAGk\nCI2HE6rKqle0nRatmjq/b+iTtnZDxdM5DUWei7WZGl6lZjk62bQMc+qtIiNr\nleP0Y32m6BMHUztC/vG5MfXjYh18h8pw1dzaJYC7nJmWoWHgQQvJxM5vWnNV\nMZOlANEdBANOVEr6b/0y43W1YA/ft5CwflptfL+OZ4dZU9IQrnAlzevtXpaV\nhWLsuP3dC7D/LFzvCnKz9xx03VallSKxyTLnz54y1CAfCAwDzsJGrYr5ZNLR\n5t9Ywi/TONjHaVyrEDZ0xPNZAgBC8T31fEWVyO557sg1TyWp7wsNrPOCF9OC\nSqu4AME6Aygt6vNnTPM+FLraOOOBxacRCk36ZFqD9GuYiZpUEDphrCGO7e/t\npw78\r\n=K+WC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcV4/N7H5nmCR+e33kK4F05swRL9idq7iBGlI4TctZBAiEAkqLaaoydqUze7e51XuN2dp2TrIINckQOveysdPMvapw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.1_1618221242370_0.7220595989846406"},"_hasShrinkwrap":false},"1.3.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a7c01d565de3a724886a38327dcb87c2d35b6f27","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-y9RKhWxemPhE1nD/oUERL/Tc+09Tn5T9t1XOYtPAg9pMDOV0k94J8qmce9n/9JbsD+PlsMS72cuBsE4gyi3hPw==","shasum":"93087e7c9576895a1819afa1cb0e157b6ad95608","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0.tgz","fileCount":480,"unpackedSize":1114059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdCdhCRA9TVsSAnZWagAANskP/14oLO26GhQWB+7pJcP0\njdlNXQMvoewRyTXxM6PvPrjCFY3nrq+a7imQIYlR/6MougVCyHCQ0P8YnD3E\nQNUykS7+tRvh0OJTg0R24AI6kmNyN9L2PxwKtq4Auvr6W5RwhcgrZVhNOoGr\nuR+GRtZCAIPXw951gfrCKJkD4G8ZiCODCRSxhaGL16cmudnY9jodmZHsZcgY\nmUyE/NlhPIsP7M2EN0z+E7qjShDICUJr1h+ysmclmXzoSfRWhVMrf1hu3rKM\n5RfW47f3NpQrfxYPO/33nTfwiy17XDEBRLXBp0l6UojSNiYU/xqFJuf1KM6W\nRJsf0dC91c5SblJYFl42hYdqsX2t5aRtlCvaCwz/Lue95pqZEgXwbHm5lTsu\nlp8LG0stzaIiWley7NWBnNH0IHtHzN+Bww1sURuswRSTrJnR5z7lafxZgdah\n/Y9NP0ZyK2p1A5y2I2luy+Tx0IhzLRG5rj882F1I5cLZsnz92RDTur3Zs3SQ\nF1dt5U5h74mbU/JEmrjIC978aOl2Wa+UdFEZYjI5xoOoaijcZpu4CluhM2O/\n0hO5ZY8PBcoWIJb0nwyCZDalu2M5LEN1rAICB9TIulo5Qp7eYyLL8IEzRDdi\na+KKq850EEuPnQyr1nDtPn4Xf9Wth3B1Bo1HsJOCQRaG11foOnliMBjtJ7wj\n8UjG\r\n=ZAjM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTCz97floEubbqY8DMyEa4AqtQk7/juYVLGHiNPLTfiQIgQOQBowuf7XGwNM44mj2CAPfTN5no5DcQGY/cSI0WH0k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0_1618224992556_0.7282340791729904"},"_hasShrinkwrap":false},"1.3.0-canary.298.bc28eea14d4d479b9998c0767522f65c49164214.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.298.bc28eea14d4d479b9998c0767522f65c49164214.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bc28eea14d4d479b9998c0767522f65c49164214","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.298.bc28eea14d4d479b9998c0767522f65c49164214.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-EH0wi7b1zUrw3bCy2fTAW3J7TYxrROF+EE9zCRr7sVnXyv7oX/5nAu0ZgfQd9xeMflcmVw+vpASyIUDDNUP+Kw==","shasum":"5b4f403f6b9ca63aede8536002e7fbf29e5fe671","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.298.bc28eea14d4d479b9998c0767522f65c49164214.0.tgz","fileCount":480,"unpackedSize":948572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdU0eCRA9TVsSAnZWagAAmogP/jZhrI0n2DljMVo1oVp0\nPhC4z8zAbaKwRrvBwdXrlbAqdpcdEdEYY7TqpT82KPWfpaGaz9JMEcB+K0dA\nmt12d/R99kCLk1XjSO7Vpr3QENDmxg/2lBZE1ntwPLRlPmhjjhPv/kB7rMLc\ndT50Czw6N3cjlIqhfAUvw8PJDuQe0roJeb/x38LKvoz9eG/Obha/8hIsrXVZ\nhnFntGtHI/uSuoxt34R7gTPFTdloOkP0cNq7QLyfxQCq7XN5LGgs77V3K20o\nIGBnOm3qGXQ0zjqibaDBYqelvVXJ0gIkEQFdDyOwsP4QUsy55bS9ZZnoUEmK\n9mdy68tWOrxXGu/UIgE0BB3k1xM6NVGNzwSz5JSH02PpyjkfguJeU45l8TSt\n0vB7rC6uRArzTgRv1c13BXOQS8FfFENFaoZzL1Dl9CE2a+fot+kx513iw4RK\nVC4y4HZ5/wH1WHnM3ji3mT27GfFXA/58CVlOfgTZKfY641GgIKx/JNmxUsLz\n3oAHAPlGdXyDwfwvKJz3gLhoj2FLHhw8Zi7HzDFt/clfUvAxQqiieUqim/Rx\ndMsGyvLlRppxh8lPDdr6EZK3KCxM+SfhUQfQNi3Kv8BcpvKvzNyseKGE/oRI\nUm6IV8B/W7X+pmCTkOyzMys+iF1IvHMnRAKKduZ3bQamne5JxSReRqBluOyw\nYF1l\r\n=gwnQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDR1WI4GlR4ht/HAz9eI9hCIj00DRZe6MPX4Vxi+4wojAiBIKHOEEwX3x0R2MB4AFXBhm8XGdfLxpFMaEyBE9BEW0Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.298.bc28eea14d4d479b9998c0767522f65c49164214.0_1618300189851_0.11759280134815908"},"_hasShrinkwrap":false},"1.3.0-canary.298.cf23b5520f5ef13c4a9653c0022552e1ecbfc237.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.298.cf23b5520f5ef13c4a9653c0022552e1ecbfc237.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf23b5520f5ef13c4a9653c0022552e1ecbfc237","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.298.cf23b5520f5ef13c4a9653c0022552e1ecbfc237.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-CCTtTONHzyelh5DYuqVdMwIOO/F8CL42QyCLldyq+3DCETuFHswZXTrP7sGLTsGsFkXFttefFex86L0dxw0FUg==","shasum":"7bd62b85e08b85d1edc9880a85cfe8a2b92982ee","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.298.cf23b5520f5ef13c4a9653c0022552e1ecbfc237.0.tgz","fileCount":480,"unpackedSize":948572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdX0hCRA9TVsSAnZWagAAqb0P/jSEg9t0+mQ0skam067Y\ndLCUqTLAuuAQD5GIx2Fm0JnPVm5GHYT+mYfkoElKFONYcLIMjXPnPW5795uc\nr45YJBdsef2I5t4wFHiKCMU8zqvLSXqhmT1T9Ln56lIOPd05QRZ5bRIG7GiX\nrYFPGgA7Vt13lPWDTNDkLxsxZzOWxGEUlFnoIVbPT7AL6l3qFdzVsF7uA17u\nztvpagKVuPCnheGgL/CyOtvciJf9FFz6+6mYULLGvk1XWtAIBHJUKznu/JHO\nR2vsrY8tTikBqa0ta+4A8y00TQkb9Jr4QitoB3sU/S/mSTIA5Ky6o9AG6Jbb\nQIGyYZBCoR91Nif4/6LhmoxCUPOubU7JvkYP5kFFF5s6KxyU4HPUhS169FzN\n+WTWD+/CxzG3Ubz9rpD7X6+oWBpWRIy6EIxySMS2GsLrRh3dp7zrMPe5oFWB\nzYLCeP5hwsvBW1kYt4l5447wrDnZ1ZRN1keF+PRMjDvg2xPMDLp2cKvj1pz9\niBjkULWy8nze76s6xE9qM/LFUb3SZOF6Hf3K+Bk0E4E+rr8gum0NUhgx5FQl\nsXR4MzUuGpzDq1+QuXuOMweMfIOY2fLT0v4mMI9LDYFmmRrjTkGjq53WMNs/\npMMFEN9Ato6tEW/WHh2Uaw410WkdSLHH09ijOgrbRdQ/ZgNOXzp1ql4MgUC8\nsjNo\r\n=b/70\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZ/e7nBjrD2dVsQGXB5CCaqv4GlU+hI/vwP1xv95M93AiEAqdDhQwLFz/e6dO97CaeTFBxpGg3GQEj76JJ2PXfK8Ko="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.298.cf23b5520f5ef13c4a9653c0022552e1ecbfc237.0_1618312481235_0.6420181678480672"},"_hasShrinkwrap":false},"1.3.0-canary.298.5b19f23aaa7adfbe55bcc636fc4a86b296c2224b.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.298.5b19f23aaa7adfbe55bcc636fc4a86b296c2224b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5b19f23aaa7adfbe55bcc636fc4a86b296c2224b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.298.5b19f23aaa7adfbe55bcc636fc4a86b296c2224b.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-WkFgAD2haDaccNFXy6xpXzvTDyvEXhBWCQojCGq8NplRQqybltC8kLls7m/cK5023zLHxYzcClr1Jc+NjBj9OQ==","shasum":"c4295fb5f11612de3700f284e8ffe529c2f5e835","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.298.5b19f23aaa7adfbe55bcc636fc4a86b296c2224b.0.tgz","fileCount":480,"unpackedSize":948572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdY64CRA9TVsSAnZWagAAy9wP+QDFZ9zVuoal+nMLNu6I\nyD2dOWpLSW4RQrLlaf85Nvq4NNp+5bqk606IGNlYJ5+K+9nm6uVBleVYXLgB\nzh+o2+TssAIDBnn+lTRMhjYZa8483XNLy5FyGt9y1EwEZ5hI/W4+LI4t9fol\nWTZ6INScATpIXZbxP1gZLUaD9d8a+Mv0TsmpBdGcWVerZvgQMMsv6bvJrX5D\n3lZKggyhXJQBspl8tpM4RNUR8opu20oZvs/5toxrchBDZZfSoNWTz6Rkbfb8\nKCegYk56jBDczNwZWdZxninLl3EjElTZCvtYf7u7qbkF03CLTKmCYJKfPg0e\nrPp8Os8zZdXPpJY2H+SgoT55nbj2JIlWKl+xVq9XdOJPVurRFAkSkeBugA0a\nbzHy4JwizPXGB0W7M/AelrT/iyq6kEAi+BmhWzRIgWm3N8MA9xJb8il87W1D\nxDvDC1II/yhFjhve+UBMnscWH869l6e0kZ6E6bzCJUCSF70KW7/JPGmUhckM\nO6xCHSLwitD/YLnodsFOb0uKbmTRHKiQQ1kajsb+1N+sGDqeN3m5KLZnM0r0\nPbbrzLnMNozuzIdlXg7OCGy11TDPEhdFszC0kpBFonva0P4GHo8f3cvbk+Fh\ntOaA9Z7znxxb6NSFRjbkAZwiCubXaOIufOK4mSCmhuSbpXJ8DCNd3H4UWMrC\nOpUn\r\n=oNES\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmBcXShI5l5eBD0HiYRblZrg7FtytLEgND+R1ED6wccAiBBYHDZrAjgNFnIQOwBf4ZPWICYII54m0hWDeiokTquIQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.298.5b19f23aaa7adfbe55bcc636fc4a86b296c2224b.0_1618316984255_0.5381289830841105"},"_hasShrinkwrap":false},"1.3.0-canary.298.6eb0b81840c052b27b6d36904b4d8f55aabab09c.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.298.6eb0b81840c052b27b6d36904b4d8f55aabab09c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6eb0b81840c052b27b6d36904b4d8f55aabab09c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.298.6eb0b81840c052b27b6d36904b4d8f55aabab09c.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-ov81di8ekO8jumj0wuAGftG5JHLgraXK2vXfD/mN131Q2MVYb31/MjN2p73pI0azp5VNYJIp82nbjksuFpiLmQ==","shasum":"21c1c14012145cb0fad9651f344a77500814540f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.298.6eb0b81840c052b27b6d36904b4d8f55aabab09c.0.tgz","fileCount":480,"unpackedSize":948572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdY9rCRA9TVsSAnZWagAAp5UP/3PF0XFa+NQgnS3csVCY\nBvZhh8/v1wvpreL1K0HDY+ut+6HRhQqXp4gkmYBJ/e8SfR9EFozlpJwd0aLD\nAzO9RuCvBvaVyLAE5z74e7Nv/tVGWd7izA1oAOXOqwulyRhM1rZaNGULGnU6\nxkVHOjCB4Ifm7ZC9/vZN8c9tSdHviQQeWL6/qheCPgY7zYdaTblq4GaojJI6\nnwcWAnkBIwxT0O92awRjxQ+DYOvN8NmE4olKxDokJKduolaAqZpmz4JxepUU\n7IRjhoqs174WOJJ9P5LU/HczB5uI36K9KuhBHGDpX3SxxJ388mInE4OMprrx\nSQfk7KvzHOmXuo7mfKgN4qO7o47eP2mE7S4liKfikMztjn4/LQjgyT5ZdKoJ\nHo291K03AQY4UPQBbFogjSgHUX+6Nj7vQrbNC8Jcbb7W48XRmeskvybhqCTR\nvlgUwA/6gTU5h0S415stPFkBf5/pefRYOsMKkgH079DvMLKWu1eAZtcLtUqe\nYw6jtfEtaIKe54U9Mbm8hLyg95AWl4QqV/Rzfr0nVkZNoORrio0kg8roHEC2\ns0zID5AdR1FD1xuVjvJkepxSS3rCHAqu4S9/QUJ4F/ccBW0FQPs63RFeJEYc\n9Us8t9k3MKt0m97AbBUCvHzujLsCmWlpr9bn4e3RsQolViYPUa51HXQ++Gvl\n3Q7y\r\n=5c74\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQwSzn9hUIITIu9qdq4cUnLgLWo+AjFdoqUJedvBU2kwIhAIA44vr8WaglW8mn1ZUxBUe/VmyW3lzGyyyd+kPsBv43"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.298.6eb0b81840c052b27b6d36904b4d8f55aabab09c.0_1618317162654_0.9459816438578734"},"_hasShrinkwrap":false},"1.2.2-canary.299.505060a9c9e71cde132d3e54e7d0bb13ec2cea11.0":{"name":"@sberdevices/plasma-ui","version":"1.2.2-canary.299.505060a9c9e71cde132d3e54e7d0bb13ec2cea11.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"505060a9c9e71cde132d3e54e7d0bb13ec2cea11","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.2.2-canary.299.505060a9c9e71cde132d3e54e7d0bb13ec2cea11.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-+f7lLH/PDQn/JMYd6s/5GE7Z6/D55sP/DInbMCDkpK1Pt8P0AlealC3qwdgD2DTVVPi9qm1QtVVQoLs8NRXjSQ==","shasum":"79965292b48c4436d5fd45ffa03a1fbd8cc96679","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.2.2-canary.299.505060a9c9e71cde132d3e54e7d0bb13ec2cea11.0.tgz","fileCount":480,"unpackedSize":947482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdZSSCRA9TVsSAnZWagAAS40P/3XZ0k7E6Z0kP2oVdLME\nAA3AqyJSuzKmr1GlHmHOmQmGpOS/UheSACF2CoZaolUQvwdFJx6nKek04RWr\nc8hVI/IwHiLqeud/mK/cfiTTayotNxcbCCh6nx1B/yvZJmz8I5bWlEOfbUZJ\nbEqQ9mK8DzRiEvnGSEvZVEBE2xNODrYMk2AAkF7Qdvyae4DUbl5rwJgyCsS+\n4F214QHhL8rZSsJ2H7WRxArKXvR/rSPZh91WXH5wjCuWssPqkC6kEmH94hXY\nFJYdPKX7L6LfSsRjGv4MNFELkTo8uXGnhRQ+VLqvV5sVcjccYoosn9xp8ouZ\n3rCgl49CSWho4jtTOW2sS3u9naqfy6hE+0JqYv+7BRGboQX6sXf6X5Usoj5+\nqlkZjOH9VdIbkrzIBHPCgfkNM9FOakJFLerWz8o4CoIugugVOAIXtE6fahi+\n38WwyMoeCv0WNtEbiXqm9Ax1cxgKgKN6pVf7pEFNWApV4zxmyFtn+cW4Iy+d\na5hElNhkB37NB7PWfoEpaYeN57nnaAjBSzh7T8GE7WTL+DntGNIzZpaUEPEw\nE4UWNwG5hFtyNWyNX2ovjOIhNjE/DTZ9DmRaht/zZLnQyyswceQl4UTpxUxA\nPsyd6gYHDjzOnq7755+Exe9iQ32GxTGac7ml2lVj6fuqEKS2cO9h+fZ/Vlcn\n5dyF\r\n=J8QC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIET+N10NEdOdY10g+IRz11O2E0JM5sL+Nls7Itt3eJofAiBdkI16efY940aTXLJ6BFWrvT/XhKnOTD4ZBFXlmGBByw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.2.2-canary.299.505060a9c9e71cde132d3e54e7d0bb13ec2cea11.0_1618318482121_0.1548712588667398"},"_hasShrinkwrap":false},"1.3.0-canary.298.c31cc2d4d8224620dd2ed08802afe95e46b62756.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.298.c31cc2d4d8224620dd2ed08802afe95e46b62756.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c31cc2d4d8224620dd2ed08802afe95e46b62756","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.298.c31cc2d4d8224620dd2ed08802afe95e46b62756.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-QBC0iFKwrxc+PJTTnvDMg2ukTS+Qu3laneptz3q4Zz7tVNZjQ440OgfPkOR+vUCug38w71GX5hGtNJNoSK8b8w==","shasum":"8e8628bb14b4695f4ccd04d51cdae8b32d2b616c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.298.c31cc2d4d8224620dd2ed08802afe95e46b62756.0.tgz","fileCount":480,"unpackedSize":948572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdZS2CRA9TVsSAnZWagAAT3gQAJxmNxMt8a8WJCLixEMb\nImad3/w4QcwcU8njGApZOQRN8A8/giW9ky/oELhtVx3/ykv6sXZAtQD0X69J\nW6aHl45CIXWRjbJ7oFu8J5gAv9yF0kYG65s9bbpoL/41WOnfvuT1wwurSwPD\njYdP+Rf8zUC43QruJpjS0SlGlD4BjIfIBVz9qj+f1SXLctmND1dV2ZW/16yP\nawrpDy9Bslj9h+3JcPbcmj2lc4lFWURAZwS/cxb8tizhi0i/KstzfBKCV7bl\nL3sET9Q7DgxeXXTArlq1VM3RjFBnonak+s6iY71sMMmi9YxIYQGUkm4EZM5N\nCAMolPbzkgOo30p39djc5KX7m0+vKlbKF1J8f8+ahRmR4Fx8cEg+tEijYtq9\nwwpegwNUJv8q85DqUiT5pb+TE1PTq2AHMdEoZ6ziCR6liKiKwS0QTE76i4BM\nR8bT6tWjuVJsmCkWFGdfoFR9s1sCh1bGuSE/xHZFdaZM5wSkU0xPwi+VY5+l\nCiP7PqklLNyHd/i1ISIyQhDjQC2YwisoS+kYB9jiwaiZpOOYVo2nXmcOsnRw\n4PuciMN6lsD2P14FHvLKo6JqHhFyWrF79Agf4EfJykcw+s+oIdKanvLVju8o\n0l4cb0d5Xj2TbBZnzXt/Dh6optCMEOFqmgIycqqXFmET564X4fGDGaL6hrM4\nXpE4\r\n=pcMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaGiF823zf0VrCMgLxfCB914SqF5eQ2K/aoryZW6Yp4QIhALsGjNLD/HuDVtr4EHSUuaEYumLMh5/bnwicWEu7YsMh"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.298.c31cc2d4d8224620dd2ed08802afe95e46b62756.0_1618318517462_0.8002806258549688"},"_hasShrinkwrap":false},"1.3.0-canary.298.a873cb00e80d3d10910fe42b8b2517d12d9c232c.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.298.a873cb00e80d3d10910fe42b8b2517d12d9c232c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a873cb00e80d3d10910fe42b8b2517d12d9c232c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.298.a873cb00e80d3d10910fe42b8b2517d12d9c232c.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-+oUftJrWhwdmFw9HPS/z4zGSkCWN/aY3yYe6ZFc3heczGfr6CxHSjY71JK9G8wS1rXom8sJVdTI1m3kKYMZQMg==","shasum":"c73f9daea1577cd41f49e1881286f6aba21f4ab8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.298.a873cb00e80d3d10910fe42b8b2517d12d9c232c.0.tgz","fileCount":480,"unpackedSize":948672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdZr/CRA9TVsSAnZWagAASXwQAIbIp0PLUeAITXpo4xFT\nzZ33t90hZHbywJKy7ZHGzVQBnyCuVb/ZM57IRPUeJ5Gn9dCl17e0+fO6Fi/U\nrHN4npOOJLHfIn2Knt2Ygp4hpJFnDBkvGHo9lS18HxapiF5sHlxcZnzSSQbX\n7snOtk2tw+dJx0s0eLtvx5mObH29IyWMBlx8DmJDIxHWY1VrpBzq0Kl0gPme\nxmG4hSrdKGs7udPrHssjaLUGgQgMKjS1EWCe8+JKU6S37OtLfTmswgq5hC10\nqVrJ3OfzFxXCcFsVdF+xzVprbRGORPCojMGZvcyY/70iQbGy2iwkr353SnI2\n6X7X96yZ5FuEHSlE9f2tD7F8hjqlZXefhGcDT6V2DmUBn5upDVPZ8CTQhH+/\no7NRG7FA7qg+AeK9uwrEIWmAOx6YwgrdikA32DWBpfslqb1KpxBH4R4ZOVga\nkapCs6LIdB6/bsjtxFeU7+ZIZrRZRvE0WcSiNbCWPE/aZ3xjGtCp6EFaDJZ+\nRpbhu5+T8zdLbnzi+jFLZM5FeqphpCvA3XqOYvymTA4oFw0PLz9bQM1RtUVX\nEUr/AWNBg0IcZHJdlQD+PtlwzqU2PhLAvWWrPfTyxTwGKzfKVh5RXid5C8Td\nahSSx31AInVRwBT1j9naB9NqDLWXHLhp2sZFyfDFqt4h+HDjhhRIN4rkWs1G\n3VS5\r\n=1Z6z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCawmaGzHSlkMzrcC52MG8gN2O3TIqv2Gve35iJTjbOEAIgYHFubngsfQ0DOS9ZeG1KvAyRb7qO/Y7CfdYyHiiazqM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.298.a873cb00e80d3d10910fe42b8b2517d12d9c232c.0_1618320126863_0.6820422280769556"},"_hasShrinkwrap":false},"1.3.0-canary.300.2fbc215e5a0cc59b036c59e629291be9e93384bf.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0-canary.300.2fbc215e5a0cc59b036c59e629291be9e93384bf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2fbc215e5a0cc59b036c59e629291be9e93384bf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0-canary.300.2fbc215e5a0cc59b036c59e629291be9e93384bf.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-hdz6h64wJnyI+5gQbbz34Zfosqv0FS2REioRQXieZmGIXIB3WmK0IYUZwMWZcNXgTH95yliT/6TVMApdU9asWA==","shasum":"da12be4551a4f408664f9b991295d9b824e7ce95","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0-canary.300.2fbc215e5a0cc59b036c59e629291be9e93384bf.0.tgz","fileCount":480,"unpackedSize":950847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdZthCRA9TVsSAnZWagAA91QP/1Fs7LmsTYV0tKmGcRQ0\n711KvACE++wzuQPwcGRGsMoBO9fSoRs7kfWBOq0CSZC5ecAeiz7OT8+Wqmoh\nu6FIheM+6ZHl6Uga0P/5krZT0hc102pvx8K33Yi+npNCge9ywpM0IZzewBTb\nPTvX9n0lGvD13Mt9Zn+YSrgekfffh1RvrSFsGsK2smmOqfrptoep7lSTLht8\nwTF7TBrNxfAp/U1cnRsIjTQORgC5tLPu2ab2wRGBfCPcjgXqe2L1WQXWbDTO\nr5mtAb44fr3e4onUrNR3JfNinyUBnS1SxCsQ5SZrzll1fmymWI3XKrrnxirJ\nhj96kP878q350xhKnfX3g4uiMnd5SgrB4EBp5k3/NHXW9L2cb5klE5VwboPH\nNabMYKjL/Np29ionO5HMIn5TiipXb0f2bC46nUiVaJ8ljjHjf1wbZyEFqqz4\ntqWsC700H5vN7FrK4dQCDKhgUrfMnDbNbBw1Edwp6ep0HtPTrgaQkNMFyRCx\nfumQiAWR7xR3FN0n4pYnJ7d3oh48d4gBIualgUr/AjuBIVB/mCNkEGGT7QtF\npHPBPcSw/3enFwUzjHypqzg3zBDaUldpxEEZpsFMomk5QRVsz5Xkec9cXdH9\nbPwmWG88ewHIarWmfwQeb9cx7/maKTkk9DoyTDfUtUSdIO37ejQzZrZbUA5q\nqbBb\r\n=T1ho\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDghR5HIMr6D5KkusXp5amT5eNb8OiQuLPK611JxobyAQIgEnZyq1DDdCn9hAZnImMLyFttAv75y2rMjJqzbv7O4c4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0-canary.300.2fbc215e5a0cc59b036c59e629291be9e93384bf.0_1618320225302_0.8774634448001022"},"_hasShrinkwrap":false},"1.3.0":{"name":"@sberdevices/plasma-ui","version":"1.3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4b842cda03626d55b4adab772be0cf849d9e3c2d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-D+hFdB0RYDTSUbi4iiU9FYAGOIkNzpIkXGjVEmENOGsTB2yLzAnuUtG5UbCI0KVG0SBZfepmc62zbIms5Qb2PQ==","shasum":"dce7afdf015d1eb619317459088c685b8d690021","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.0.tgz","fileCount":480,"unpackedSize":948883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdZ0tCRA9TVsSAnZWagAACVAP/3aOrWS3ABOxj5wjRSVg\nm1V1owAqhHOeGL3xWKfSB9mjxz7Y7gYfPWZ1XCiHwiwBcchMWkpSpdlQl3Oe\nW+5Zm6BeIUew/kKD0pmN+FLHK61xSYCk2tHtoR9Zk1IGc0bE9VtIPZz0/8Z2\nOySYWc94heefIrAShjUaqa+DO2E7W+Rmrd4JAefsntYyHbg32X61WpYZFFrQ\nS23T7r5izJFXHOVZXlLQiifVDdZitclBOYR4yv5ODEr0+1Eig0P2JMuh2w57\n/sTcB5QIBrKsVYn7+0SYltb5e8irqCYB8EbJRr3bN9CBJBsinD0DLEYzN0Mg\n7L4VKimuFqOrmVbquxym3gnAVINs2NV6X3Ig+eEfKGDdKxjXT5sllXsAOHNn\nl2DMzRWQqEApLbukn+8XVS9xNGbZLEf+yqL2bqP5eM7m7TGWg3GP7yRZmLfG\ntuWy67attWrMIrr2HBEqzqGE0Cj1HL9vT2qwP2qrC6g6vAbJ2QctjwVNwgJT\nyVdf4oW2IJD1XToOfYRp6kXz5Ta19nrcIZU/4QP/C4IjdEKRrEYOOvKPz0TX\nYu/rGtxzLToWTLmdSVCq0ptXAzcv1+NvA6H0a+0ZCkOjFtwAeZXezSKl3Xzy\nYq/lwsCuUHC8L83q1CUw9FCqUf+/VTTcVWhf0y4IujDh0MP7Zmq+Xw8d/j0C\nR7Qg\r\n=QnJN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGHD86tGwxubuDMQPKKoWsrDQ4L+KyI4PFNmabif3g+FAiEAtpvvs0eoU8hNegdtFX9q4lbVMIZcJqC80X5gX9njAkU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.0_1618320685267_0.9627643863745439"},"_hasShrinkwrap":false},"1.4.0-canary.300.4e550b884a9020c26afc579fc742fbae4ebd20de.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.300.4e550b884a9020c26afc579fc742fbae4ebd20de.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4e550b884a9020c26afc579fc742fbae4ebd20de","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.300.4e550b884a9020c26afc579fc742fbae4ebd20de.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-c0dSyCH4SCshKaKpG3UXPERrGL+3Ij7EQsotgkH80G36zIheEJY9XWXMK62/bwZRiKfnOTOphx6vn/JmYhjbFQ==","shasum":"132801b2ea108dd0a4f298d7de776bea6aa8f587","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.300.4e550b884a9020c26afc579fc742fbae4ebd20de.0.tgz","fileCount":480,"unpackedSize":953250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdqDsCRA9TVsSAnZWagAA8foP/28mL8iGy+T4I3K4U8ny\nsO4PXbPfFDsEwobQX75SybsGvkOwqhA3Lw67aewqsiT9cWVHDZ5jBB+qM5XG\nkcrYR4OduySSTXv09A98n7epB+GvHHmEekgSsfiLQKpSSSDOrMHwilPbuFKo\nIrpUH89Fs3+WwCMM4HV7hDfBmkVKxto+IVu7Vgc1l+kLxJhT4Ef8e0eNbo8Q\nreus+6vqxvooXo3ClOALoA2jxdf1ZHnlTk+eD2jYl9KCUp1oSNGvXvHQRH10\nJ9ZWFQqSqmH6NPJGENd+72lzSWs44TdVNjWWlWAInA62Kz1STtZP5IsTAHgW\nzuSQppfLgZFWyGy4K0FbiF/doug4QpSnuDigp3lwbqNqk8VLG53COnCEVIo9\nIJ2DfGs4G4SMQLgeou4ccCfqAsaJ8gNA2mUM9rUfd1cWsJdrFdaAAjYBYBNS\njTcxxIDwjzRp3Ec6ZsqiRCuDEmgUcS2wIK3xRmmnS1TEU9TEs8TYlXkuQHlD\nIa/JVVUdjdutX8wMWXokuYfNrJwNEwwUhQ2bwSaG4FnaSzuj0HvZ2coKI7Wy\nkrRK3KLegmQT29VQ7qaeTJvwn8uaOc3bV2MQwAVf2II7K5Y/rJ9bMLMBA4j0\nvLXeGghMPX6T7ARTd4H96XxNijXBzKiCCcDLKxDA1v16Dy1M0U6SsSIGJroY\n/mks\r\n=1Byj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGzCLBDtz2TD2STjqPSk8HguHOfTAhJTfi4FZkHEfqzQIgLuOibJzuyazotqBtWT7wyn01hZBfzFVO0pVCokNewFs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.300.4e550b884a9020c26afc579fc742fbae4ebd20de.0_1618387179883_0.10607879018268362"},"_hasShrinkwrap":false},"1.4.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0da5d7b323c4e7c8b041d445d0348a4454648912","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-t2luFkodeWj4H0PlAQzeaDHrVD3qIVaRD+whyJKR6pWof4cCs0pgZCn2HN/y5ce3hlV1U/QH49D4+5xPN5+Upg==","shasum":"a587930e841f39aaf0875a7d67485093b61e6676","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0.tgz","fileCount":480,"unpackedSize":1116723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdrLSCRA9TVsSAnZWagAAZSQP/0S2ck0wrhi2vPUkPanG\np5QWCyzUoEiXF0kOsvj+AvmnBpQ0jfD6fS3quIDYfDsfq+vUbP50VyMl537S\nSq3KQDXwAvJz8NSv10qd38N1cwNjtU5PnG8FTRmkEcvuGn0yAX0YUPLkvHlr\nC3A3gRSaUXqpYUQMpOl2pHLsBNP9Y3Fwxqt13OgPAQk/IEucBhRl7x+DNMHz\noVhzBUpVP/FIX9IrfU383EEwuIIE8OFWzBHxjKMzdXsWqvHfCZks05EJoX0T\nInRTnlUW8PhjoXiU9QsQ2zCzHSKpzudlZA6gnKi/fBDfXzqX3dfkGR2tI+GL\nxD5yUgWVU5kTyw1JgQtlq8eE+jfdWPcCZAmNFGkFhfXoudVSMxqGSkutjRIP\nEEVeiRFJj3xmgD1DtblDkqE0cet0mv3x8yjqu5k/8JoRHTqkPN0WKSfiVvPF\n508agOioiAXbVnVlKt3u4l419Tol2W9ytjVKhtniPRqSPriBGd6/5DQc/c3y\n15+5Zn+ADMz5X+E6yWkCuZ5B9PkYpoSOc9INOwq95S7cV7JWAp2bhspJN5mZ\nEgjg82dGeNqgSGXRDBV4qTYJcEUQilZVUQd03JBBIlmKx2f/HsWU5nInwwlD\nqqlNjAY2aXxoGpBqnkWSa+vcX6SUAq7xZYWS0RCBIJCYiSDTQ6rxA8eL62mr\nkUJk\r\n=Fc8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvrfZjfHmwpYCfZMmrL61zh6RfC1pgPfIka93U4UML3AIgYwmEwqdVMxF6kmwUzD4OlQmdQtIY9qIIIlkpdKrx9vk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0_1618391762402_0.9603503934122777"},"_hasShrinkwrap":false},"1.3.1-canary.299.6617cfc9b46efcfd656f5362ab62e2d3d0f2c808.0":{"name":"@sberdevices/plasma-ui","version":"1.3.1-canary.299.6617cfc9b46efcfd656f5362ab62e2d3d0f2c808.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.1-canary.299.6617cfc9b46efcfd656f5362ab62e2d3d0f2c808.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6617cfc9b46efcfd656f5362ab62e2d3d0f2c808","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.1-canary.299.6617cfc9b46efcfd656f5362ab62e2d3d0f2c808.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-H27nALYwYAHR3ZmQ5TSL5kpy4v+i7+LH1DrQenbTInUwcAKNY4zQyt3Sx/lp97+xBa7erq3yAXXAZnBPlhkZXw==","shasum":"36ab7c79d9424e83987378320cf6f6006ac05126","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.1-canary.299.6617cfc9b46efcfd656f5362ab62e2d3d0f2c808.0.tgz","fileCount":480,"unpackedSize":949937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdrP2CRA9TVsSAnZWagAAKcsP/30aWmKEeO7WGczbF/1o\nP/fNih0Lx0gdOoC7WRiI3W1u2EbvKnhZGD7OQY4a146KF4LkZZfO3Ze32seW\nLSoJPSyAR2LsPoVwdpgRYFmHwuVt6RpouZYnKOj2gxe4e0BO8YoFCmzyvNUJ\noPDQBBMiCJzHbzS9bGmvF2Zz4ZHgCuTao2eMaXnKyq7UwdzSRhgTCnxMtXKT\nfDZs8mZriy03QQceMbYaJhZWHGS9TYxRwiq68RPXsTWdvzR6nlvxm9FCxRmb\nncm0pBroogBIecGiBQDZj/r3tpwI6XVToeNWJgOwvhB6BdKT0qrlyKQ9RMbS\nA58rEkLGeQN1OTcQzXg2sZkrC8ExgmVXwBJUDUmoIRFW70TpDkOYuLXdEc/J\nyWL+k0VrcKbQcGOt0Lxg4UOVtlynUk5UPLNVm2MPv5mkx82G3RPSt2euCf4Z\nAU9pZ52iKwbS4Q6r3QZsZHh2fidOs9c4e1Aiv1GvhZxWn7SEXlGpSf+6BKXs\nZhp+sRllG3VRcYMmIA3nnRPJmTBap3JY56/5irq76KabOvTnnRN4gSs8DF1f\nP+HFgOffqpqhcJoh2AjJLPghyQ/JJWgh2H20Rsv/rp4sKwPeG7MZOnSLap2p\nSyrGzkURJ2cRfMA7VoaZEapdtSmJWnzNVKNkTNdr2lg0EjrrZzuV6qaEFXLW\nvZXq\r\n=Ab7g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7UKUtfT/Dtm5mx3brkopoo3Usv39FCOt0zTjiP0kMVAiEA9r2rAlH4Hq97XfqPzxY/6lhVfbLufv2NsNMSPptMikg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.1-canary.299.6617cfc9b46efcfd656f5362ab62e2d3d0f2c808.0_1618392054325_0.8531010012968834"},"_hasShrinkwrap":false},"1.4.0-canary.300.952606fc8b31e5c512e24e21bdcf82279eb87ffe.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.300.952606fc8b31e5c512e24e21bdcf82279eb87ffe.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"952606fc8b31e5c512e24e21bdcf82279eb87ffe","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.300.952606fc8b31e5c512e24e21bdcf82279eb87ffe.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-iJBDl4cyKNsLSiJbqnrxUGyJE+amRoq5UemeXXVkxD+tdOsV0/nVPTG9dXN+lU+Ybk4ALXrtsfK3FZV5YvBAKw==","shasum":"2685aa3fde257c91d615f5992052d1ac52e6574e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.300.952606fc8b31e5c512e24e21bdcf82279eb87ffe.0.tgz","fileCount":480,"unpackedSize":952522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdsj3CRA9TVsSAnZWagAAKgoP/1XzZvZVTmM0fXMsjaWD\nL/Se3wIkSuzY8HQab067FF6oXf/HHdq1ef9wcEl5krM+bGNZmk/Ub5Pyd0yp\nfshsxnXXQh2ZawNThiSv1wb5GFzZ1G8f8c21rZDmGkWLeh+iig0kwfgi9O1y\nB0WTZSmdoEZ8ATbfex7yDNqL1if6f8Itg0+DG5yue+V6uWPKU0wwXrQ9ZCO9\n2pp9f+ydLuHz0UTZ/uuqk5hFUO3AwuZPkqQ5xHvcdPf3im4FPyhu6uI+7f+Z\nhbhBqphEcdv0k8xUhAvdweITleWIyL8vxe5NSpM1DFTFdz1nXCNwN2aPE/mx\nZpPciIkGnHFE6Tf/wL+TNyUwezcIZS99YWBYF0HQKICxK/7sE7yx6jlqQHcD\nHy4m4Dxxj2ezQQ+517/PloNEfl3YU1vE/2MCU7k+QSNGXkJdthmRMj5XPJRs\nTzuMetv1kxC8LW4sMr+9hihhNxoLZnPtuabKVSVxTPUg5JU+ogIqUSLN1VxB\ni4HoDeqf4IO6WTnm62uVYaHW9YPWD4ttivh4aK0qFJ45WA5dBhWqtJYLcJ/0\nMgFLq79u7YxzbPnM3HrdL9iFE8aio6DFWDog/zLYEMlpdsBY/qJwhI53+UqV\nxZ7q1nSij/rdyVyj09BZT0HFbWLNCiQ1J/MuE8h/CWu1vgIJQTVPfbB5h+g+\nhez1\r\n=l7/E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBu9TLT43pjcfxs/c8Z98xn2bQrpIY3kMH4MehN2X5G0AiEA+ShqusUCTCKkDbzM00Dm9Pgd8bWgoTAIgvOGQT++A9Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.300.952606fc8b31e5c512e24e21bdcf82279eb87ffe.0_1618397431438_0.22606522111358096"},"_hasShrinkwrap":false},"1.4.0-canary.300.23eacac1238a4874024b87b283a261f4a9d26023.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.300.23eacac1238a4874024b87b283a261f4a9d26023.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"23eacac1238a4874024b87b283a261f4a9d26023","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.300.23eacac1238a4874024b87b283a261f4a9d26023.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-Zmh5zp0cWO9tonZ6w5LJWnLe9Eii2Oe97BYceppi9vk/PexNM8gttY7TD29lAITFi/Pw0mIPUCwdOJtt1G6LYg==","shasum":"f0aa5773f0bfcbed27f810d4be89203d03290ad6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.300.23eacac1238a4874024b87b283a261f4a9d26023.0.tgz","fileCount":480,"unpackedSize":952522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdsr+CRA9TVsSAnZWagAAaMQP/0t9DTdxdSPiE/hZSXcd\nKkPPJH4M3G/tB0ooqPGf/+ggW7aIUmpDHA7/+Z/wlXGKsxBq5YNYPN1xdyAF\nYhFWT80W2lyaL0SeMTc5eDe3tXqtAYir33M8u7gWQ3kMGBhbmsbBporVanAm\nxkW4uyamOkthT5MwLqvzLIHPEJNX8BkFrrYeS3jfrgkCK2bhRZBitNsdbwMm\nNSJLr1n29WIvzPQ0WKcQAqlnVa2T64jTn4YjUBbZFurI1sWsx9NEBBgKcEdV\n644wP/qNncqSL5/yRyrYn7Oz9r3NGDyVi8DeA4D5Pro09gINBP0Gl6eHZvVp\nDc7c2mHut2xQnYWTASFxDUevCJBJJmhHfqS5oxnuKRCN6FPpuh7j2RQE/9B+\nXgoG07Vj/tCm0a9dcZninH3c28Rr6TRGWrS9h43Y4elw6j1rGtucWkEm+YGP\njoNO3c3VeQGJ1lHFvXZSIIcsqBvI7rwHuMkQ3ZCW5MmuieAH5BMtwUKhTC1u\nhrrgoHa/a+7Ido7s3NnaO50EA2O7+303kSNvO1+0XgV2hyJjKBj9v1cjR96P\ndgbRqs6xV9nAqFaqqk7SkCHKbdx45UYWAxHkLGR3f47oyhSSlkW57ZoNYdHl\ncOjENyqX4rSZZ9Am2tHYbMH7rVhV+5pxsTKdIbbgnfIC2gO0fNG2LLmlnDDC\nx7bg\r\n=UEd8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1gU4sIz0oR+fSo1x5+VM3p/Hu6uxkyv2v04pJQGBxYgIgUsONmCR/rzYp01KUG2gdWxowkp0jStvAuOz9hra/ncM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.300.23eacac1238a4874024b87b283a261f4a9d26023.0_1618397949792_0.689734770337447"},"_hasShrinkwrap":false},"1.3.1-canary.299.b160f2daade8feb18886a64b157025d4542f79b7.0":{"name":"@sberdevices/plasma-ui","version":"1.3.1-canary.299.b160f2daade8feb18886a64b157025d4542f79b7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.1-canary.299.b160f2daade8feb18886a64b157025d4542f79b7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b160f2daade8feb18886a64b157025d4542f79b7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.1-canary.299.b160f2daade8feb18886a64b157025d4542f79b7.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-cVbTYnyOKX4QZymfTM/eursCpTQ1iif3B8W8d807ef2Yf/UOuItP7wtXnuTJfqfOcvyckyOvB42jgIufGC4Cmw==","shasum":"ed9ab6ce8fe59e166aaa9adf20c60835f2ab7e15","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.1-canary.299.b160f2daade8feb18886a64b157025d4542f79b7.0.tgz","fileCount":480,"unpackedSize":949808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgduB6CRA9TVsSAnZWagAAjgMQAKUNNl/Y6nibKifm06u3\nyMi75UYShsl8tXk+LPTcmqDS0PUxQhVUHfJiRQ8E5Yhud4gj0ocFjdvgDIHM\nNA49PAOO97FDpkuAcCtZiGerVrZ/IwNN9Ll9jafuCwvOvV+FojY4VfVigzjp\ncjjv4FScbBZ9sDISqaYQWcGhcXMVw2WcGJjYuk0pHnzm5fGyFpWOutanPU7i\n+MyjKaUDnR8hEC58PWVEmmnTEXvAMkFtjgOm1gAGpxHp8/DfIDziQr1Sgfzh\n6jpg/mMESNVum9oiYUMSSEVAMRdhyUDxLnufW7Z1QO+2X8KQCdDxQQUAnIs+\nXoY++WZmhAXuUy/eykEtxIBCsYW0pgt9Ffq0Wsx20OH07fnXdK0SNRkg/dk3\nbv6uHOLS6dahQz7Me4MQZ7HA0tnsRfF4hO3ZQ+gh2QfADN42uEsGyk+ULfO1\nAZNvOCkTmgMoJqZYyIbfKmQXTC57mAY6pjyy5+9c0G+Cxrm++1okWYJmt2XJ\nuY5fqBWK27S9/oY6ghxIO3tfFYN82gtutBJ6vOG6S+bMG7suM9CPKqx95+dA\nFBStzwSVdgEHSQ/+V8uXYsUDLJkCLQeSDGCrpJEEcDd0JO7K3YxrLkmSbv2y\nOHWci1WZf8w9mgDo7f5EeeTxvKhYf+gUb4ILJEc/cPJTndorEP9zmxucJDHe\nhRZ4\r\n=ZxMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZFHsL/RbwCwGj+JeZHrG0Bm3J/geOGtIeaIMsPFdK1AiEAz/EPKiL4ayrdzXfwQXAvkaDRTcYM5D3Vo17NAmLzT3Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.1-canary.299.b160f2daade8feb18886a64b157025d4542f79b7.0_1618403449583_0.766828830592649"},"_hasShrinkwrap":false},"1.4.0-canary.300.79006ed94873f05b5f51def60baf5aed17f3ade5.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.300.79006ed94873f05b5f51def60baf5aed17f3ade5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"79006ed94873f05b5f51def60baf5aed17f3ade5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.300.79006ed94873f05b5f51def60baf5aed17f3ade5.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-v/PhWeK1/07MT8hE5cfHwcE3tcpoTYpj5a/ydvxtu9mkgNzlzFOlpTuOv7zxp6m4Jzcno1t8tS6g28hsejFYVw==","shasum":"3a4b5a40f4934ea114d8470023054a105db91867","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.300.79006ed94873f05b5f51def60baf5aed17f3ade5.0.tgz","fileCount":480,"unpackedSize":953759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgduH4CRA9TVsSAnZWagAAB0AP/jxU6ZZbNVq5nMbK2yvP\nKB3KHAuILOE2PRwM6PdyMBQg6NTxmEXnY0e2f3kxjcRrE6/y0HjwRRmktobm\nHnwT5FgLSXSFeXuIBA7VCAH+MezNas2Gv/0FzPl17naQY6hXgpUS1OYyEbYO\nd9YUJjbbvgWpb/QS7m5gaLXSE2ZyMm16q0z7dlEzesBW8q5QEpI8s6TDCHgn\nNW8Nopr91px04po55pBgaxZU7ZMSljI/KNBp4l6ciASmBhW7RSPEoblR07iW\nyClasDEqNyva9XRtIgTVCjBWk5/ayuUs+NGiqLZhKUWyaRF1je5CHeY8CRsP\nR1BV19i0UHmddXu6RvRXFjSxYwJS9uhwXHNoXti6909yuabiTRCunko8JK12\nZFivwNiN+x3+qhZuw6ushMQ7pVIRi96JfWzbx9bEWvMWYo9/iZp651XCgS2X\nSuVuACgm7lvQ8eLE57vLMky/3oLdNUfmPW4PB05ajlDGa7gXOHn+N1DhGK6o\n1lG4bAUhAgtMAhEHinwarxYg1sa36n2IPwyRvSt2dWQQkQCcQFeGz7CrscbH\ndn/MVqcrz54rh3VRjXA/zHR8fBWtXwT5wAjfJLRbRr25FB1ISeOzDlMtPvVv\n1sjCtR7w3CcYeI6BbzrV5GfTL6uH8Dg38XFpC1qQOV7MV4FukzK6nwZJ1Rl3\nY4OG\r\n=kYvz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlrG6wXcVTT5WpiGlwpFo4zAOxHLuxMugXlfjGjw+GjQIhAMGkLfKBj01LfI9Y0O4y0S70NWY+BRcMlrQdxVZQylSU"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.300.79006ed94873f05b5f51def60baf5aed17f3ade5.0_1618403832122_0.5462656056596511"},"_hasShrinkwrap":false},"1.3.1-canary.299.64efd433d7c82399a9c4e2cb8d29d9c646b857a1.0":{"name":"@sberdevices/plasma-ui","version":"1.3.1-canary.299.64efd433d7c82399a9c4e2cb8d29d9c646b857a1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.1-canary.299.64efd433d7c82399a9c4e2cb8d29d9c646b857a1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"64efd433d7c82399a9c4e2cb8d29d9c646b857a1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.1-canary.299.64efd433d7c82399a9c4e2cb8d29d9c646b857a1.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-ZvVVQyz3IlxsjHI/sD1ieE/j+6Jj1HEMDdJVgMrE3Dsp9DVE3htcKhbfElaDVut9rEURRyYCwSSuM4/FQLs43A==","shasum":"5a29ea7b4c4eeb124c577fa73740adb04fcd9057","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.1-canary.299.64efd433d7c82399a9c4e2cb8d29d9c646b857a1.0.tgz","fileCount":480,"unpackedSize":949808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdugYCRA9TVsSAnZWagAAfysP/0Dl9u0Gnxq6PPzQ6eYc\n6KuVGXtSQDYf0LBxppKyq9RvTYczZNzjHlgnlQxLfpaEDmiMYzy3MWHiLkJ+\nUos1nSMEIyxuAo3NmrpdxutrJhvlP3sfN+t+1eY0g+RfO6EC04Wqe7Azg8Js\np4zXZv56O/7yq+7so8NnXzr4Ss4jJPZ6ITuZ0jNwfOGO79+A96/mB+BanGt0\nnqP+BVDAE39JWcf6RN5FUL9MvnI7y5zEOW4qc/vjr+CHDxHjj0X3Ckj9Yg8c\nal+HXSly6rBZeWXqgBgYLLuCZIRcpZ7Nya4IgS0aZ6OCEnzNl7rL6AqdHSLO\nNtoKSxQ43A8p24QNT6r1Dx/mv5ve5fIUjJyAKW+6bnB27Ys4aMd8u5+NE7J5\neBbHufeYhA55UlOOazBQDNCJZVoACex0cNRdDJJGnz0e7hRr8Hk6BCG+0CMF\nqwJM36b8vjGdbNvN5w0ykwy46dsOhSTWDSnExKMOOoY1pMKVDsgmV50hYN6N\nR0Wpcc2y2kU+t0rVufxhDZADw/PHC6DcFNUdcSpXZEuDwJXlYdA5RXpk/RVR\naLbFn94qXgHWAfqh/A1+wK7TQgkNVgT/DdYholZtPMFVd4SIKUTeYASyUVmJ\nSaRFYpUWS8eQMnuBdh8mcwyfhkdo7tUSe/+P6ULLXUKBOxWMzT+33AqWWZMM\nRhQN\r\n=Znzw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0BpNKqqbPHNl1L9xRIGaEFCj+HwXNQnOnK+LfAevvvwIhALZa3ZEHtgPBpAhiMheS6DG67fGGwoErMbcsTBeDcloH"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.1-canary.299.64efd433d7c82399a9c4e2cb8d29d9c646b857a1.0_1618405399537_0.699837073362048"},"_hasShrinkwrap":false},"1.3.1-canary.299.12ec942743dbf0bc801fd0e060184cde7752940a.0":{"name":"@sberdevices/plasma-ui","version":"1.3.1-canary.299.12ec942743dbf0bc801fd0e060184cde7752940a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.1-canary.299.12ec942743dbf0bc801fd0e060184cde7752940a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"12ec942743dbf0bc801fd0e060184cde7752940a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.1-canary.299.12ec942743dbf0bc801fd0e060184cde7752940a.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-Mzp4UrdtaqNsqTpPblMDXA5swozRnzhvtcGN8FxqKHL/2fJBo6KgEll9/qN2pF63TrSGiqmlSKzt+SZfB459Sg==","shasum":"d62035c9ad557445c3347e11e364da59706d1ab4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.1-canary.299.12ec942743dbf0bc801fd0e060184cde7752940a.0.tgz","fileCount":480,"unpackedSize":949808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdvOaCRA9TVsSAnZWagAAA28P/iPnEhZgFzlvqt8pHUh2\nH8FXRQAcD8c762EBeVta529GLhV5jkHsxrmapVMPtcCw9IUrvnsd56KW1/GX\nP8qMvGGK0d0rz8WFrClBQ3ehPXugAOBRQITitNrZwqaow938ohrlBYx8guCB\nFI/2PZbOWm6gYWarosGTsFLkkxvBRWaNZ4mDvNDe6jdx7B81Y/qntDTg3o7m\nUEL8zd/gR3DNprfJJ0ao3ZE0F/a5LiTd613lXknFRfGz2TwUgxOFVyi2tim6\nkfnWbpnTr9qVniTnLcWoo5CB89o6h5mQ6qEWECrVnS3PzuUA6qKdjRE4iexC\nkmTGS2x39xbc6FvvT3/bORlTEFWAVRYDL2N1GQvKTtoAJLeOcjxpLaZ14VQh\n+jKW6+wts2kEArmrJBDYxsQJpt5kCclhE9EdQCQ46ODK6/fdjMf6idd54rif\nKTRADLlna5+XsRQtZIYf4bijctX6+phplteg6diRxgv5rowVdVLOURnDD5Qw\nPgG6afdSZsRCmMJm66diaxxDA3SwCcbN7If8vjMzblJIbL9rNWeWxdIETaq5\nAdGVl3z9uAo/BLg4uC6cVXh1ACyETRfINYaiV02uOspOXndIacz+V0HPJuPo\n2iuOxS43hj55tw7XGB4Mmtg2Iy7eGOFwgQm1JwhXtG+KYteZNmY/wAdDax8S\nbT22\r\n=fDdj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdsCNhXAnDie22SXKw7bwXNGB6LqfUIlwRExw7zDwSdAIgAeHLLnFeHK5uA3LBRo2o9SApEbE6mKO/RCD+SeBXF2Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.1-canary.299.12ec942743dbf0bc801fd0e060184cde7752940a.0_1618408345571_0.17939857460852138"},"_hasShrinkwrap":false},"1.4.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"898001957bef7b055ea37dff0072ade3c09bd84b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-lXIE/n5E2di6qXfT6loDTzihMGsv5VlSDvSOWWZwgtfpGqF4DMqN3cz18kLolesDSAYBrSVGn3hBFOOpmZXl1w==","shasum":"a21aafcea9abc6c954448097325d6758ad4f1144","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0.tgz","fileCount":480,"unpackedSize":1116723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd/j0CRA9TVsSAnZWagAAKr4P/R6q5AGTBY+UJi9a6E84\n+BZRjvyWjECw107ETzZLqIwQMVrV/y3x7yxZ3WDLbSGyjX/Ba4sF4sxXkHWh\ng4bU3yisduRva67ejvhrvjZRPHi+VPzF91GuMwkiIKwXXIqeFyFqPMwt91fp\n7zO43E4zYjstXu2o2CPfC72j86kyGzmyvA0Q6wNS1wqOdaEPUKDZ51bUFPsu\n78B1xXqb84mCvf4RV+IbBqjgyexSQ1ZNO7E2GGMZPrpCa3RIB9AUBd4/bXTq\nW1f8CgC3l9omhcjsE10qwl/qm93InrzVdZ9gFHBidajwrifFoAgQgMleqMEj\n2JWwGJykPi6HGp3XjVUbM/kIpCrrZJJN83HuCoPqIej6amBrHbYam7zcXUsv\nlipzeyyoe8YrUeeZM0bK/q5psD6MYwfGVOYmBd40Q81Y8sAcgjwk9iUCAYxU\nadbn4UFJd1kJffrmlHoPH8M/9OjohRGjiwUpzI4Ko7b1r6/w9HIsvC58p1ar\nAAbGmIb3dvUZysoHvFcpwDJOXqpqYrVINswWPtAH/GdK+HYBQSRjdtRI+5RA\n6RCe5Nt0eloWSLAg2S8MSZgQi2QNdGX5fz1X4tQAtbTAC51zllieVdgwF4GG\nT7pvKQelS00bdbvTvfrMTbfyVIYmQCm1papi3G8En8otKYMS5SqscQsjqV8N\nlr52\r\n=0NM7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHFylBgsAMw2XLQZ3N79rwyOHBlzc9nfVjkW1NHFeJnAIgEM4irpI/aFWOULu1FQBeyoNpbKc4CcXbmH+E8dV3+OE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0_1618475251920_0.8831081517602601"},"_hasShrinkwrap":false},"1.3.1-canary.307.5e4b223d77a7da02ddd65c25b88c9dbb4edada15.0":{"name":"@sberdevices/plasma-ui","version":"1.3.1-canary.307.5e4b223d77a7da02ddd65c25b88c9dbb4edada15.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.1-canary.307.5e4b223d77a7da02ddd65c25b88c9dbb4edada15.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5e4b223d77a7da02ddd65c25b88c9dbb4edada15","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.1-canary.307.5e4b223d77a7da02ddd65c25b88c9dbb4edada15.0","_nodeVersion":"12.22.0","_npmVersion":"lerna/3.22.1/node@v12.22.0+x64 (linux)","dist":{"integrity":"sha512-krTGjOGTYG7kOhpcRzDmyXHdFD+KKMIxg/XgrCFi8L0LsCAPoWfZBErlzPPort6wn+0IppiKPqpG9zKf6Gln+g==","shasum":"5aef1b08eb2ce6682f008767098886a978d1987d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.1-canary.307.5e4b223d77a7da02ddd65c25b88c9dbb4edada15.0.tgz","fileCount":480,"unpackedSize":948991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeAyyCRA9TVsSAnZWagAA7H0P/ApD9QvjpbVJWZB4abnG\nDQZKMscqMTQu8UhUXMLYvhcbel/8Jpk8gRiJztGCT0UmhCtVVVWrDCWwlrwQ\nNn1gSIo3LxfyM+5rqPBkWhmPbzGP3p71INuahULk8u+8c+8+sZYSEJnrSazj\n8P+ErOZJYBMO84VWCe3DpYCXbBMrqE8h/7prds31mRcsWJx+VuXpnqpdFXwJ\nb4GHDUEY6snnQTGWYlfi3FLjvg0iz9vU+FGKBPvugpBjB0ue2OsxTmffJtfF\nEhOO9a4+qhVVxqh0aEn48cWfcz3WSbxNyWYOEsq1OcDOUE6MCVeTDYf1aLxr\nYDXPhoDmX7c6Ha1pUQf/YEi2z1UWjLiQ8XBnMgIaHytS/9j8bFG+K/cMlTQA\nD7cqdYaOxcCejvPX9WQyRKHMVQ3K3wcn5qWpaVVVHsqs8TnyS1Cs3lQJ3NtM\nS5Trxame24qvKZBZ+mXVPptagc9QB940QqHIIFTUz+apJJJJOK+RHoXjQNSF\nhk7zvIBxfipZw3QbJjze62x+hmkYMcTpxCWSWwRBph8ZRStOcO7kH6aEa8bH\n6W92Bg+ruQzMFEiD8tGUu6xzod1letvd01r6/8/4nm9CGpWkV2JgXcnGEUJO\ndqAhpyZy0oWyjJedHC0obh4WUtFCjmOVGsEFKvkXqW/qMuR1HVOoUN/kuPyv\nArz+\r\n=R0ZC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvgBv05aulBWHAM0ixOkiu+5L0geiV7xL1KqCE6hbTCAiAnKOFTyOKZEknZ9QDvnmcpIY2vcFgA6tWigyixERi3nQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.1-canary.307.5e4b223d77a7da02ddd65c25b88c9dbb4edada15.0_1618480305574_0.1119736350080136"},"_hasShrinkwrap":false},"1.3.1-canary.307.cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277.0":{"name":"@sberdevices/plasma-ui","version":"1.3.1-canary.307.cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.1-canary.307.cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.1-canary.307.cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-aCnvUQPeNI0AqsL5FpFe3oURgaia7ETDLWpDS19W1AzahG0lvoMhFXj5Oo2k2uQbIjyKUWujKnGoOKKAUIiZ2A==","shasum":"090b642809d3ccb4a9250d192add59d1eb25e417","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.1-canary.307.cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277.0.tgz","fileCount":480,"unpackedSize":948991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeAzRCRA9TVsSAnZWagAA6RoP/3E1hhbbB3oNGVVmGF0Z\neBJCIuocIH9j7EiA+Gs6cTVQ2xlAc0KedR4/2B3lR8M1TdsdrqMOJon0j14C\n17jYJtmp2ygKyp/dJiqwXeLa/YTuVSyftrL7m0+ic8mJHnneJuQRfGFqzo3w\ngxmz2kCGa8VxKGh3SvdaPo03JX0kLkkslfrENvCKVOJLKpPNWfgeIYczCjdn\nM9itgE90OcZBbX/rRYwjU/21y4gGnxBzkSLeLgTV69Wcf/l3DU87pBjwzull\nZHHj1KOqxtqqXFu0dU2rITNNFSbr/C0gxjBpuv8LNYe/zj7aOepNRk94w58r\nGyhN5CEebWGDonkzJ+sJtdwcX3DJOdmfMIaRLjzqmV/4AI6nxhqSr1LtsZZp\nHjTqzD7UaZW04m6B9I/LR+zdC98vSv8WiEJpEHyy162FTuI65TyY6MC9ZvCj\n7KdtKY7gxyG1FENk3/NFinIjxsBvDLNM6qgunZGTPCgJh6DP8QiI9RxDtAcV\nBoTVwxdbrc9fxqf97nCiYo+hr+CBwf/4YmArOVQcU4UJIjgmUdEP3L/SyAXe\ndx3mXsX9is9FE31TkdWaYez8zZI41/+BwXr1aIw9s3IJqFPHRdf+SaTh7BrV\n8rscluDjq45U1gIS5dhVaES1GcdB8hrpE/hyWC4nzl9E3cgh80OYp1o0/2fI\ncF5S\r\n=o7J3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJParVfQpZSAZjPof4XCczHV7Psh4xmpgiw7vJomLZdAiBJFsTVuhK0FtlqHFcoD4NrJKeq60bxUlSdO9YXv3JVtw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.1-canary.307.cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277.0_1618480336484_0.07342885019035394"},"_hasShrinkwrap":false},"1.4.0-canary.308.03dca73b74389f5d052a2e0216799cc04e55507a.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.308.03dca73b74389f5d052a2e0216799cc04e55507a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.308.03dca73b74389f5d052a2e0216799cc04e55507a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^0.2.0","@sberdevices/plasma-tokens":"^0.2.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"03dca73b74389f5d052a2e0216799cc04e55507a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.308.03dca73b74389f5d052a2e0216799cc04e55507a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-BOYfvzsyrczOP5aNzDDPpYH+lNetUkFE2EWhA+bnXi3eOEm6Yoxq0HjLPVYw1kkLaNUo0J35gH2KPpJzfBo6GQ==","shasum":"372c3fe8ab6c63bd4aee5b466903178801c830fc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.308.03dca73b74389f5d052a2e0216799cc04e55507a.0.tgz","fileCount":480,"unpackedSize":948991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeA5DCRA9TVsSAnZWagAAuHQP+wXX4qppWlnKIGFlaIt9\nDTeE1UyIdkouDC2CQDIl36zB3fcJXhB1r1SJbb+Ia3ZRZOaYqV4VAxjz27Qq\nz/ufOUeNCbsJJ1hwORcJchHZzrofHQ7E9f66Fs+/I95eQFu1481XOLThCprk\n3lx6spyBCAspaIUfsamov/Vhf+ExTcEoaB+PLz8CqvOMxNcpTlAM5LK0+Jgz\nbhTJp/43hxBKdkuZh2VQyeNGTrR5ivfhY+bsvE9uE5wg/8VsnrT3RE8ESaaS\n2dqqMXut6ob5+oIzBDKYsJV9DyNTKSyl4Bdq3aAPpmbcwN86a/N5sJ2slHa/\nk5N4X6gzhnH/OnV+EGx1QxJ2ROlptl9Om/YbW2t9lU+vgPdk9m6BU+iN+6mI\nJrKhH9Oo8jKQhZT/Gg311LKONC93E6Sm7vq9ArXViw4w7+OLy6ee+yPoB27V\nNwPQ5rhn2FWLLuvxNs1Zl91l8GbpPTkWWLvZvAMGrOeqpcXsNQx+xE8YivFS\npKHelJDfjdUXvkQeMdBSoXA1I6hpGQT1OwbSAXAvoTu2Yb7EDQrtdj7aSoTv\nQiNljY3X3FFTs7osLMRI+0fQB+PHI8+NDhX8eR5sE3C59l3UR1g43tUj5cni\nGzd2Hz7wZ2M2U9UvPfhUO0GbJevRcUxB/6CnsPdSrpzqhgfBDcsfBvJFTZMo\nUzFm\r\n=ANqK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7985zNiiI+94IoD2TEIdPtGzuwW8JI4ff8jHWIUCPOgIgAoVEJmVbvjhrUtY4N+ICc4SkYv4Ds7OsEtR+BQvcLK0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.308.03dca73b74389f5d052a2e0216799cc04e55507a.0_1618480706984_0.6280826233218915"},"_hasShrinkwrap":false},"1.3.1":{"name":"@sberdevices/plasma-ui","version":"1.3.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.1","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"38ddd2b836ac49e73941106d762d8e3f0010b94e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-WTsE1/irMzkvLouh/E8M+yx1dQzJJx7xacB7yDorUfhgThV7hYNwBfYgBBdrHbaPZFeiYNxRvkMYuf8/q+ZNxw==","shasum":"bf5c38c6f5b6c173b39c5370b4b6aae921364175","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.1.tgz","fileCount":480,"unpackedSize":949122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeBJNCRA9TVsSAnZWagAAiusP/ROVg9mUKfkObgfqiD/l\nWo6ZLhHdlMZPeQtbhcNJJb0nV9xFfHl3Su17fCm4G7cX2DmUYeeI2BLK1KvY\nEg8Fe3CapJv9JfG6dLGmeXu4pQJNytupcbXiKCEIJ3xo6B/SH6LZzkb96bPX\ncKwYdHRDP3o7PeVT2ionQ0XgOn1RD+zeGGT/sEtx+h7tC5yhq/i8zl+xPUME\n5OfRMS0o4fxqKPaHtf58j3UEhPkRJfhobT2dz+GUllGk0urBaSUYfFBifITA\nEqFDkT+vZsQEyrQTqiEWnBs2xvbSm067jq4i/Gs5lD0mzHXdmwXkTTUcpYXu\nROF+pWOAYLadyUU0Qiq/YnkF8LUFopupw2dWuL1XYnvW4IQbjpCxx+yzFIlh\nFbNidQzZsjJPppub88tmvvAWIY21vlMsEo74yG8iHme3mREF66lynByA6pdx\npOmgKAYkVb9u1xdm2YVKARm3jZaGZA897ZNtl9mPfO8e7kR9AYY5VkIF3pXn\nYZeZUw/5GCWvc0ra8spuo0Jxxn0avSPrzE+2Aa54ltWMj/Fml4oXyqyyLQ5Q\n9+KjJgIjFeAJmTQ2phoBmbNeLHfJdN4lOF6ro4PyCQP2AUckhG7prpmGa3an\niyk8hD1wGQSBRcRQTDEwTauGrhMwBIbekCdrlbn/MoZwDW20EzyMFBPs9+Ce\nIGhJ\r\n=I7xj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID62gBvNq4Z3wMKBWx28/w7H//K+mNel7v65tqvjQ0zWAiBwTA932a37CI3lbPXyYUDIumTyKQYJcizF7FaUar5Syw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.1_1618481740798_0.3283888197894178"},"_hasShrinkwrap":false},"1.4.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2e872d3e044e84bd0c16b72526847317763d3f17","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ypCqbpj0KBEBHYAVV2rsWK24XjKFkTFd7d8OEKOhT3Gp+9iR/i5oS0cAmgI+LT7p87YzvikgVxcupfRYTWCi8g==","shasum":"a7d844713bf23c2c589bc679a8acdd83d95529a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0.tgz","fileCount":480,"unpackedSize":1116569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeB4ACRA9TVsSAnZWagAA7ScQAI0PxshtCTRiYn1e+vp2\navQKsMa7og5JF/Eymxw0rx5GoP3bKbP0RVEFCLOh9MCQaaTVsER9MnrWIINi\nUYGRedk7DirsUpGZOpLJRCdn+jMpeAH0vg1aiTx8BX9uvyMlX3McvyrxuQKe\nLaJ54j9QHoUoVZ7rkTpWyAPjJXZ4bQEUHbUgZrT8EAX+29YsqHe6DlCblViy\nq0GiH7pDzyvYrYlNuUqjbRvEaEA3k6yZM3gkUC0hb92pOS8Di6pkO6lma6nd\nqokxVb59k8X8Yc7AOOoxI9DunuopYUXUtJlCqVgEbClOU2G3g5Bc7iUdThX5\nVH/L3bbvYU1PdD3VAGG6KzuqK8hR8hNNn0/MUF0x9B7h63nzxcTqHT8upyX8\n+W1RWoqFWQhgJWK1QB0pJ0Av5RkFCyddXiIuW46JfoymjFfG8J15537JMs1A\nXMSIrwRPp/+UozipuDvaeWHLQ7g3TbgyBuzC05gWKSLuKBRGzN6KaTJMvkUj\nxSrFpx/5OfJksC5h7to5icTd6eQVJufV51e0acKAg3PUoJk9ZxNmNSlnQXWQ\nKmsIO+DLjwAOnEyHHZER6DOKG0BTKQgnmatHts1Am4XS5ywmX8rzQV++dgCW\neHhjOrwbSec7M8qlrEhJdhKWfbA/mKlV0EbreHEt6TVnvyyNoybJCJBEC8g+\nAziN\r\n=VKRs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEh8WLpV6rILFFCxZ+6zTWF+0NrfQTN3ub9ZGQLrbXG2AiA1CPsh03aQh1hZWovBzeTBUDamBFkYd+nTL1XkkPhjCg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0_1618484736212_0.9907042402641197"},"_hasShrinkwrap":false},"1.4.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"68d292d314a33512071186dfa72bc144a9834ee5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-YF2s8Je8tFnDFaY+rFOHH71q1mz7NiBKuAZmcFp+eBCzA3oPSV6ObI+lUr3CWXaWGHZiN46SickJDJxXXzQPxg==","shasum":"1ec5c8ffe9e606451a0f98b86a64e4d991d4433c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0.tgz","fileCount":480,"unpackedSize":1116549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeCpGCRA9TVsSAnZWagAAvNwP/1yBUwJS+EAdNJXS4M+j\n37XBf+SfB1vj+gvY41MmGyeMvgW9AcBUcgVFNB3UkgLMtDbwUcSr4EiSxkeZ\nLRo4dP+6GTjibtkcsZqnDOWx++ZngLADP0N3VYFCSZVHj03MhbLyVpyqGj1X\noKk6fpPJ30yc7e+qa1a3oD6uLtMnsDZfqBDwZN5em2RtwEA5jQq1ZnPCfQQ/\n3tn4JYqE+khj5unTXueOffOZfFcd14cnOLlhmxhsRAXPq09SDwzByCqJypnR\n4aTvK98kLTinNavySKoKQVsARhu8F15X/SRjO+hWeDqfYXhMa9OEjYXid3+S\nS0gYkEXSB//BfWOiEbTCRYQt0WMm3UtMns3l3T2nlXR2JVUVk3WijoLO1Qyk\ny8ZzfAUCDeKdlMmu/4MbIFfkZTk617l//JJ8Fi4C9yKsJqgsWqqsFQplWlVd\n0nGNNjRTAn0NkvFhf9tlgNXUAfZC5lvl2xHtERSbfVjfTOfgpArgvOgyFxyQ\nwD6yp5hzFmdVrf8+opVII1CHvj4VCSwuWoKfOq5253hJ1hXy6H/w+KbW/Rpy\n0mS9AHsJ5zwncXd+54x0XdHVvTjBxxRXO6Po26DZ1y/xrjfvifM9XfH2sDXo\nqLmAilVP9WcE4mG0ebVR082NKoIj0IA0lT1+r94lfIzSHu9oZ4Mr/oMOJn+9\n8zwu\r\n=hxup\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRfI6D75MsWq3QvXCTiDqcrHPtN+ETXDy4qSysZJdquAiEA+D8gL7Xue6Y9MM2xSRtPuMaJcDtgAHfD//E3hpPVE9U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0_1618487877912_0.450614011783971"},"_hasShrinkwrap":false},"1.4.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d437fd7be94c42066d4001755c22b691b6859a92","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-XNlWLixS/gP6RsiepnqDAuwkf/MlKZH09BFUPdeR6cjG2IGUVTC3e0RjvRfKrKwM51AGUUMLR1v2LSrjWIDd+g==","shasum":"f205e1a19566e8648caedd5d31d93ccd281b3681","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0.tgz","fileCount":476,"unpackedSize":1095565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeDbLCRA9TVsSAnZWagAA89UP/2NGElZmBHzk1AMb4hFI\nSFyXUTR4a2aFmvdvB6r8lxlVDNx/CT23p8xIx3Iz1K/Iv81gTipiZ5/Do7II\nh8rM2Vr3CihpIyn8nLLM85YvRkObM5lS7ywYvZ3dRiW0+aMCbZ+toU9bq679\nC2TYWhpZvfFntAA4FpopKMe30A2wX9DV60HGt/FjSfo/f3HuQZOtnUo162eE\nUe/RjNBB+U4guckabS8smIjqlogljVtB762kPQHE8gEU5aL9YmfmA4aWYa85\ndYvQwW25uUA5F1O/87B56e9ugiIOSRDoZht9EWUYMtYv/tB3BrP4Pbqwfag9\nVaVJ5fVUtGjfrw9iPUsGEFIcFdYgviC+1P7HWIDZnLUxqN6WSFLpNGnzOiZH\nhH7amc+KKvltXEO+qXo0QDR6nsOMXNx26fvrRHj8NmBPQF2thGcKYkDdY/+P\n2NDPpi9emuK5+cEdBBm/Xk/Z0D/9S1X2JcIDomRvHUk9TZvyTm8kwHZuX+4Q\njKTqBFFKWw2aU9fh+PNyGOyXlSWaKyMyN7umTTPFejOG5KYghuGvMdmfMTmx\n94rEZeFy/c8pRPht/RQ1b09gsbGbAJwn67UCfeK9p1U8YBOsOd5J4gxFNO23\n3xHluzoTAhqlInLaCf1iM5q6Q/X1hyOs2ZjaVOtwPEb9AW+96PSvvR/QU2P3\ni3MH\r\n=eZqN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFTiYVKfqR+6A+DVfT6TBnu688UlUk/tRpaPaiT1f2tgIhAJPNUFzWBQe9zvMFvCEZoOem7fft9NhLZlSI9vDn0D0C"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0_1618491083419_0.20896940716341872"},"_hasShrinkwrap":false},"1.4.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"42f3497e6b2d717a30f4ab58259fe5bf558dae80","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-U13dP+uOoDxmFIMDHTA1GJ6ip+nL+vlxGDeeljn0Xh2lPRGK2m8I6fKV4bhXlTz8djkGh+5B7N85+yPLfhupww==","shasum":"451e5d56625fdac72f893212e8a51d44dc5c590b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0.tgz","fileCount":480,"unpackedSize":1123983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeDgDCRA9TVsSAnZWagAA0xsP/iMT6sN3L7t4hpEPhlZY\nN+Lb/rjBPoMYHNfM/zwfWNn2KqiJEAL/s4DXSWNjKmSr6Dr3+kWPm7noA1XO\n4sN7zKpJDDmGW6ThC61a1+05i2Ff0bI/MKcqYokNrzEKM8bYooDYiGrOXM/U\nSgmEEMow6vu8K4iBnVg7JdrFsYtpP5VrdQnld/5uEWpH0L+sFDopF+zE4y8h\ni6EALH8XiV+9Z8ZJ4IH/9EgLbBhsukX63HmKAbtP/5XJnPmkwgTKiN5He8dw\nZ0sHQj+J4Rq9z/fay2cIJrPyHLVfeV+tKrI0TGlUlm0WiapWGhiJbkbF0/1i\nc7PhSLThB9QJYUnhIJXbjjnc4qnvHgNVSSuTXP3ECgj4LRy/ewlb3bfDBX4H\nGi+ZJ+tfrJ5hSQL0Jo99vaeE/kpK3V5zY/8vlzNc1vVPNwl4Ny42TUl/8xsM\nZDXhdH+8XxYluG2+zZgSSaXoYkq/vZKF+2QjUw8O1bjA/rkxygANxw+BMZGv\n5XiVb5yOUyuBC84WN7a1U0EpqZBZb76wk0gFeQxxtmtxku9LrhTcq9dOzkgt\nkjTwZTCz5Ey1fkaD4fsRR09MU5wun3xWzyznb342B3GqLF85Uk/cXpWRvsKl\nsnWmo19K9KdKiNWE6JvW9BtNxb0AZW7XBk1EwbNGqmgbw/Mr9abePJqnNVED\npQhV\r\n=/+rp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQxUbAuppcVwE22Rm91USab9iUP/+IWecVqfNlQvnQ8QIhANkLA9RkgkNNCY6KgVh9eenxkN3troZtCsVbywhCuf7h"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0_1618491395380_0.12283283374447818"},"_hasShrinkwrap":false},"1.3.2-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0":{"name":"@sberdevices/plasma-ui","version":"1.3.2-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.1.1-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.1.2-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"54678e3ddbd5698a9f3bc413de2e5c3743026136","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.3.2-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-aIKhTqdUXsjaGPwjbWPe40k8DCm0IpXMnMOjIIgUNRVaUq0/aOpQGD7xEjNzhRZpgB4vAwZaWK5eqcIsLoswCw==","shasum":"c4c7957f048bca77a1d9e086952a8d030afe78bb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.3.2-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0.tgz","fileCount":480,"unpackedSize":1117887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeDm9CRA9TVsSAnZWagAApGMP/2QS4YswAclW+fndZ+mO\ni8DEfjzR7EG8CxlZ1o3s+QDYsJ7BbhiQcidlz8Qdar8Mfh32WNgIC74EcYiN\nlSgEIc0R4f5cLRh5RYVmy15kMEtlL/D+0Msb5edX8ZmPbwdYLfuyZJEX6kK2\nDZPOV5tgQk65ODiUnIz8BNc7MH7dpHaPNwHXp7vhU5p9Qm8Ti6EzyGEGRo9E\nNR8o+PUkeD5wJEHelDX+07ZRkUkk+5sscE96zVsk/jJn20s2RvqhkMYWWZgO\nUjrLQeA+pu7wgy4FjftYYiljfzECWNJi7sBnkAaGUZQvUu26ciQ+3fmkIYFg\n7ScYDhsQ41oKXPFmD2q9jU0gj76L7SKbyZipGpHZ9BtfquZgh02eNqNBsymi\nl149+izMZYNHNfGeZlotak93nekcklYvvSTMek1HqDZGh0OqV8YbY2PrskYo\nwW7Wvl5r97Hz0l09b4VEMvyZBOk8/Xc3FufE3ML8e6HdHjJEI/cdIhuLAK6l\n0WS7yg80cxXGe1bepf874K2EPM+NmJvvH6XiXG0ldHZlTJ9yNiEmXtnGcsoa\nHh8mOHULNVa+S5wnuiy8UBTuYgK2pWPXL9mwcvM5o3EqOKIR+CvTI8onAG2z\nCfOr/UjmJmxzmmoD73IxqMPgA0VIw8OY7Ac22l/SebxUu3xWo558fQFlXhcm\n2Ztq\r\n=4d0s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGM40Tpw7yi5FLFm6W3330uVHIMi3jgTrGVEPOm/JlTZAiEAxmhN81QmuY8+wLzxL6+lworNX0v20pZ6GjWcjsQ0oeQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.3.2-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0_1618491837010_0.6204247040299742"},"_hasShrinkwrap":false},"1.4.0":{"name":"@sberdevices/plasma-ui","version":"1.4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"78f6137e47cd057d5aaa94a7b6a339405b53b615","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-twUlhYaHrRAOYBtMdElDHtbcA3azVsTMMVnYfMSz+FXMzTMY0aUUgVs0cQVWZokmHraRN5fHjClDpEN2QRZCrQ==","shasum":"6acc295ce9014f46268f804a44a94f5a36c660be","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.0.tgz","fileCount":480,"unpackedSize":1118435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeDwsCRA9TVsSAnZWagAAIJIP/1zfhpUpRyE/LTZOHOjb\nI9QTuiBHWRDqcQSanQrUUWPqblcqOQK7NJ0ov8B+7rD94qGC31OsOCYFBB9G\nLhHPqLfaGOs1xChp03FhiuJTRW2l0WNZB1vqo+ntaPiZPDk3u2u85lrLgnLl\n0UtcNy6yB7j4Qa3yMaoYTlEcAYpLwvwIGs7AndMS5KgshpSZnM4BxYPsdr5d\nAzhjqziRonNoS87AxCLOetc22c+u6dptCTkST45ndVsGmL8+J2QRVLWSEM2w\nwlOB3ee7wH9G1/p232EhEAMbB2kpTgFuUmjOyzxsxE8bOsEuBdMYIRE2IS/N\n7lKnL+xNhbEd3FM3rlb/M8Pc0SuZHJBtT+iAiBxO8gAaVbtwhC7D54bNSflU\nAztYAutCJHhXVZlGQddyHXJB17bVI8SxegT/OdoYaOIPkFgYq1wEbbp9gysC\nUQPYxg+5v7rCrYkS33MzpeK8OQJimR6ByBglTwbnYLKPgEcyC5xmDe89+lS2\nWT+PQtu3axp/cSganOB1CaaaBSlcOdfmNWV2ipvcn31VditOxF0bhKF0I18Z\nHZJw9Hq2m20zzvmWthzwLKJJ+s/LxKHktkw+C3HNDZulqkgSaGN/1DaXjOU9\nkJUjit1gjmORWCqWY90n6/9FESWOsNXnC7VPhcS72Yz6krWa1DrVK1pLpfgY\n7ZFw\r\n=3ozv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3N6n5vi701ta5iOclvdGOAd4kA4FGGKK+PPU9NK1foAIgPF0K6VcGFtPRtAF5+PJrM2rtG63NrN0dE91c1idImFQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.0_1618492459891_0.32634947573267437"},"_hasShrinkwrap":false},"1.5.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0":{"name":"@sberdevices/plasma-ui","version":"1.5.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7d3f6ca9d496197f0f8139005b22bbfa50b1fa72","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-eCvJ5apVj3qfmfpoGKM2cX/5AW+rr4rmIIlzjMayGpbfnd3I80SoUnZgSCrqeUtZ7z7PyOJrfTYZuqjSgIKAWQ==","shasum":"0b9f054f416bffd6285e743499e25070e8dc5f7c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0.tgz","fileCount":476,"unpackedSize":1097612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeF9pCRA9TVsSAnZWagAAJMEP/i0pZbj0d6cfKxlmjckF\niyLPsJ7q36f4ZoczwxD6BDEMWQ0c77mYW4f5ukYmYdoHJC730G+tux02Vu80\nOlCog63m3NqTbQl7ICKX4Q1qZ203kZtDb2UcDCTS2IeygOWdLcmWEddCZE8/\nNhSUqELK3sHgH3AcXUB+LfYT3mMzTRA6HmiZcefNMf7bbWseqP4VYIRicx4A\njaFd0uDMt9w43OHIzemp0fV4RdzEeYApXWcfWTvKuzPE1gupPlgrvfNCoWog\n38g9zwQ7hHQhhTZJHitmp4Igr2KBkJRbYxa8A8L9N4iOr5/z7UFuO8Jbq1FC\nYXkpsJ8VflRtDJn+Hom09qgNk/epdAVcy8d8Ez0uNHaRiGOY15gfOvRe/9NN\n5W6jGpbHtkXo7iYGwJrBzaiWOv4cRo1gqAZW2dlY9jV1d7t3GKclejl5ZHM8\nNvzUVyDAG6iIZi5pjOWMKNNousfnLjWMRjsNhDEWzOuDhVII4uomPLo8ep8E\nFwQuSc3jDY3ecvZ2r28+4rrEwHUU7hB2ypytDa619dfnIzefTPpxBFucq+Va\nVv5gtnzY8wSFbm4cYgHw24Fa4E8Vf+vpZOVP4jAzE8uYfDHV56MIwJpgN/bK\n67dnnOjPfsmLPdGccHnRSJGJucTTTvyZNMMrkE1PBf2drLGcmYK75s0pmJJO\nFCgV\r\n=5N/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI/fDr4kDO3tlDlEvSZ+XaXcO9SpE7C5HMdDGksXKl0wIhAJ+Il/41fUM1KQQhDUNzV5qJ+ZN+9lKJper1cLKK/9Lr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0_1618501481186_0.7017726067503147"},"_hasShrinkwrap":false},"1.5.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0":{"name":"@sberdevices/plasma-ui","version":"1.5.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ji82LF3w4mCKCkojHbhQAO8iwskbp1PUXQ4zKhTPyG3GfMpsm0j83ZjDEEGSQ+qu1u2vN8sUAQJwsDmpULpUUg==","shasum":"b389d658d5ff324338ab6f5300de2ab671e3f786","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0.tgz","fileCount":476,"unpackedSize":1097612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeU1oCRA9TVsSAnZWagAAUlAP/3xc97Rldq1EiAVJIp8Y\nL09/sJJ12brA5Pny0PUP/whQqhsvARO4GJPN2eTpNQP/u7wlYKfpbRuqp842\ncqMDph/GSI7MLddIPFREqED+ROgEnSoVaOXBzsMqOnqjx5duyiboF4WHZSpo\n5JgryfRZNeJdf3rTvnv2ZOWjz4Hka0zI6BpKIbHIKhH5z8EA/b6XG5uLo6ER\ndmxvCkQB8RJdQIAW9WcNj6d2rVmrIuoUUFNLuSA6fjplpy2TDqdHIJM2CTpI\nXXwVIHrZ9CV6Y0MWb5zEiHoIVzG0McR8WoYBHtIesxvWFpYUrnuXiS3ACOSG\nIjqsRqBdyodjBwiCrADIUVt7X1veBLkskkqjL3TKv75KONPlFHbnc1kcIVxX\nIrdBYTkLrZqJ5YO9fGq5QgC9MVg8hXtylJBczMRqNMRk/uiQBSRKStCj4AqT\nHYo0exbee8L6s6nWQiNhrd3qbZXB76wkIF8d+6pQZ8XLx9R5I9c/za51QMSI\nH75O+XMSyFxTLEIMtBU57IszWVAMIvpg3DMs9FPvatljxB7nBKSvHzGlQLdN\n4bUQ9FxQFMZvRZEVmck9cMAOjHcvTj8hDvnhfC/FI8EKPSdTG/kHDW+rHwiq\nzdNfsmE19fGtwQyRpO1vD2jzZ7DEdLoyEtJrWG3PoLyPZpMROLnKz+Sipg/B\nCiAN\r\n=y7+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7eCGqGiCWASqAFa/uB/PerBcsyI0Tw8LnyxHlJrnt+wIgVqM+gSeql96fw1+nIappx3gAZq92R/CCQwRlyJyH7+w="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0_1618562407631_0.7537595014885383"},"_hasShrinkwrap":false},"1.5.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0":{"name":"@sberdevices/plasma-ui","version":"1.5.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6cdc722c242c7cef1052b8c7b59231d847abe077","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-hgf3aYXh6QD2pOpjO+6SJlEUqv+2T35D5zSrvsvU9b0N43t2oE6Rf34DBJyw+KT1+5BurSKyFRF/YNIu6kxiMA==","shasum":"285caa580ee762a3c113eeaa5bdae1cb2c449d21","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0.tgz","fileCount":476,"unpackedSize":1097612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeU5kCRA9TVsSAnZWagAAitcQAI856r57yJ9gzFW1LlIm\nYR2GMwFWQ+XXEnuEiuX7xaohBMVYqzxyIBkivTDJuNpgr0+G62s/pveJpN0j\n7i6TBFnXF7DTg3FjF+4/X/Bo2aPGDEE3J3sjsC/SgyFN7S2Fu7S4yjQ28/IB\n5IGhzE3cQ8dxvU8gBeSZKKDjwvO+Gk7Oa2iy8PGKFAAwKPWd+rmKVtHRnyRE\ni/FJ3NqVncMqkP47uv/eSN5leXril191YpQqVjJ/agWxoxcfjkictGi737jL\nrFDG8uC4LW3VlfF3z7Cxg/kLRw9VhISLw4fVSSP8Oai58kGAP/PNQyShuaL0\nEy9g7aRMvOMNchHPBbCe3c0K5TgA5I9dSvU2z1LwNNBiNRsWhmytjoFSvRlZ\n5aM0G5m8MEV1bWQMAunvHUDPz90tTWE3omvaqeAqyCGJbirwYHsYRPVePPJp\nsSgkLstDA8RD0Ap+IWaVGkXoegOxM79rT7mkUILVvdn9xzGQNgTbBs10Vekx\nENX9REK8tJ0EDINyGEIskHXb61OYAQnD3wcxcF3esyIFvh0xIWfFgbYgVmKB\nPZjCfFx9iugPskhwO9q1X0vYJBHs2SAzS17Bp5J0ecmoz3Xkn6sSPSnFOK45\nTrrozXidoBCbwq87P002oSeprwX0VWI0eq5tseisQDnku9/9mAqgg6ra+Wlo\nAtcX\r\n=8+86\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUSqS4/7Ti81pv1DX5xLZGMDSwWWDSb5GPcnbjnQpB+QIgKPCMQt/G2VSRXedm2kRWnitPehXZepd+EIIMmol0doI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0_1618562659896_0.840401182757373"},"_hasShrinkwrap":false},"1.4.1-canary.312.e287348bdd9a8c12b5308ed26c4526bc65bb4aef.0":{"name":"@sberdevices/plasma-ui","version":"1.4.1-canary.312.e287348bdd9a8c12b5308ed26c4526bc65bb4aef.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e287348bdd9a8c12b5308ed26c4526bc65bb4aef","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.1-canary.312.e287348bdd9a8c12b5308ed26c4526bc65bb4aef.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-TDQpQoj4S683G9wj+TQExZoHKfsEXFc97QuJ1MgBvc5cxXP90cUBTroTXyonDHAAWkO6G0VbfFm+KYH6wBbMtg==","shasum":"3aca4f2eff5c054ab256f23bfe212e91322d3e3f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.1-canary.312.e287348bdd9a8c12b5308ed26c4526bc65bb4aef.0.tgz","fileCount":480,"unpackedSize":1119042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeU/nCRA9TVsSAnZWagAA9AUP/jIxdaby2LBCjbdT7eAg\nQ3eENrNC+p37OiQa4BWzdSierQg0dJgBmGXWid8IVLoijXw5jZ0rBkinet5q\nA878p1EtwAEX/zGRYaWgJRbMUPb7httSKkSxeJfV89OfukR46yvr/LKZCLGs\nJc3Dvfa6q8H0sKxuXDuLsy5aoM7XbK6adMEivnSvAgvV4pj8pyho+mwzN83+\nnIrtedhZPsCSMS2G/1DxgtyHByQYhk6ItelgsJhOS0KUeVDIIP75YXM4uWbw\nIPbynbJ1NCRjNjjuZGReZPm3mSsVq6bYJa/bygOqR7D5yjfrPyNIcdQuGpSx\np1vXP/X7yh0TzGMNxMdHRBnUq2kYRNrVex6HrY+YE3KDljbfjFrDD5E0psOU\nPF5yvEwls7PwgtbQXaioeM/Qj7rmTy1Vvog+bN4+xFoB5p/J4tAVPWOgVjd7\nkVPLhPl8xBfBYJxjYUqmHNjje3wj9QY8bKntWoBNNfFqHXV2EEWEcNojW5nw\nlbccYy5GNTbkp1Z1GDz+A+uOK1Hoi9gAj4eDopFdKfFWvKajPvqAmK9ecCcj\nmVQUnAr7+nQdESSBjQi3Sma2vWcRGgdaUpEw+0PGuxzYuXqLIdv+bq6bHgHn\niZI+7rpDDA2nZaEZ94MTkFW9IaBARvGQeUrI7f5zphY8nDRMcaklJ5vkr/Cj\n3MUe\r\n=dF7c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUJkigEhU/r52tln6uyonoy+tm0/CWTt0b3cXQoy4qVAiEAkr8xjt9UDvaHSSyvs4wFvkahlLXAF24eHw4QdE9Ncgw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.1-canary.312.e287348bdd9a8c12b5308ed26c4526bc65bb4aef.0_1618563046605_0.29388006510603515"},"_hasShrinkwrap":false},"1.5.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0":{"name":"@sberdevices/plasma-ui","version":"1.5.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e6d516ed6beaefee294d88c249c4e4d4f53bf47a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Uzb4nUyemCVayUFt+ZJFs0CozLymucQElmr9pafp4aCPO2SHdY2rnhQk1rtqQkMuvyp3QeKZCeXMLfVHagpQYw==","shasum":"515f393c1236e1e80ef3b70514d43db231cef911","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0.tgz","fileCount":476,"unpackedSize":1097612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeWq+CRA9TVsSAnZWagAAZmkP/2t6fC9B41tPBzcc66FS\np21c2LM4Y7ng2X79Ty4wdwtgjEOcxKuUr4FrEJeiCly8aq7RipAb0nhOWAgK\n8A5AiH3bsjOnfYswWz6aVd3HPGhfYKw7+YX0Nr1K9/x5LV1eTj6l2xHTaAd1\nHLirxMCIWZow+ttzq1WI8tht0dGBZX5IjeIk2tXYnX/w2AuXpFTc7HzeSpJT\nnsZG2slz0RYqRjJIa6k2INxauFZJwQAgIIwpwt7E0z57BbZ4sArKFtKYyhyU\nDioPdiUmGCS3rm4hF8wuvOlzq4ee3mXWuVkjHW7V3alkism8M/RyrRc5/Ca4\nOZo5f8c0xAfJ3C07QOMMrw6gE2spauhKGxVZRUSH43nCNboTJoFnOEKaS8hI\nLouCXZDUM55Bwa7K/M5wahrkEj6iRsWW9zI1Nyp+rFPeQc+6D/FMpAzlAcDg\ngERcoYLn7LU7WFy53GxSyRKGFc4F59RCrAwzU2yOfFqh/iQv78YwqfQG3kqr\nXsDt2WFXdi4OAd1ff445Cj/gSE61pvmQsp2U3rjXvQ/g74DiVkLKVz4fvczh\n82deTymW2dJ+gXQqhH1R2a4drlGcpAEzmWOWvfRVvwwPnMh2u1ufT/qopzgM\nLlAXM9DbE1psYWnwHm1Ru1RbiU45vLSsiqYde2MDNHXwVeQG1vnMAkKB2SHi\nbOGO\r\n=EEbl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEVCamPmvkgQDo+rYpl/syxWd8juLpKlwF68FxL3WsMAiBB539aOFjUeuGU+jPrEJ1YnSoXC47NwKReQGEI58DgUQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0_1618569918354_0.3330692557566821"},"_hasShrinkwrap":false},"1.4.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0":{"name":"@sberdevices/plasma-ui","version":"1.4.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.2.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.2.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a3d539d1597549b9b5fd4e7ed5e163d966dec0b7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.4.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-a6yF50i1K0sbSs9/rvR85JdlsdWAlUrF1tekXRJ2jm2TroVOS6HVBgn7E9xvgW4wqY4S01JjvOlLX2+7bdVe/Q==","shasum":"dabb95886e91009b7fd0999501d18f3e02118ff2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.4.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0.tgz","fileCount":476,"unpackedSize":1097612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeW2lCRA9TVsSAnZWagAA1LsP/11qgVBfHRFCVk4TitFa\nw7EKLDa5krLMaC1df73mJE2f7MxnoIAsoi5hKxO1Q8KNf2kUEHnacGfidcmI\nlfBvqQQhYH/OgN5Ss0VdZhch+gVm4pjMM25aVSIypvVleoSbb7t8KbjbhVDz\nM79Cd4eh2zMcatwKOfu42y3X1HIWwIktwzc+6R1EkyqgTQGKc4Q2wBARhL2C\nubnJXGIbP8/Vbq3gwogNVvph7ZC+GLBGmbebgHWqpnxScChb8vkTunKn6lR2\n1fyI+l0TGDnW1VzBeC1brrYsYVvzCj8dXl2qQL56BxDO1lW/yyhn1ZFL9Jjk\nmFbUtuSNGzUzPaertgjF6mlpNgjTRVGkVe4J4vMyhvctcmPmaxLb1RZ8s3LW\nDklx/Y5dUaAeGtMS0RHgvy8X1CjKtzmaimN2uCUrvz2JioU+XbEPi//gab9V\n0fxpvcWmGdiwZAahOrJFo5v7KEeOAJdkAlxhYQBGMfsYmM6JAdHQHwbGuUfj\nlUU/VzWuU2/DW0s98OZjNUwy9RtLRipro2mNM1qV48MwwZ/Oe48psMJsBS+t\nEyYln1I3GkXaJxcFuQrcjsIMeT6aJo0+p4raA9LqfT0XEY+5wp5Csrvh+5di\nXQmPijbMXUzkkwH5CHVVllr0l+Kr6p61IufU8rpfYztJkgWWh6QHyamtkgnd\nVBp7\r\n=DhMe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvklD+YtGrtUJe1N4hD4zTho7Uze0Fy/Xx3ns9mJTLSwIgJ+SJ1yN9hlW75NqcCWuIknrrpN87sanZt9dimsmzceI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.4.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0_1618570660467_0.5502128869494447"},"_hasShrinkwrap":false},"1.5.0":{"name":"@sberdevices/plasma-ui","version":"1.5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5cd37de68a73b5e09082ed6c87a34c7a1656a6b4","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-U6Nxw/hGfqiBtmQOz35inPtfwLIPPnATRfhEUqzgmzr6SEzuFHkaa4HfsXt2J8FS7txOiZLwckrnbYyIKs+JKw==","shasum":"a79cd9751ab9a6f8beb09c558acd7f9e98120dbb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.0.tgz","fileCount":476,"unpackedSize":1097715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeYcpCRA9TVsSAnZWagAACpYP/0GAx4IMpElNCtvHNGCr\n74PrK1QF/bOMcPEZHPG3tLI/0rAA34NARHYB0Umw6L0V8IWtTfeLus3qHMch\nPVJCrecmb2gCTrp6fRxTjp01iU8yGfuslDu20o2dDDsSXs+nP2qcog6eLii+\njeWnrtuSNK+tg1/3+h9Nkc5eUgmTM7pOOri/o0kqMQTFERm4bc87oOB7+fP9\nf3Rc+rYr56ORRnIoOnucFHg1vWH08uvwnWSw5R0UOF1Bg9h6gdcT+mzFzO5k\nKgc2tLwfzrwJsGFT+5HtSuBtLgumpWzr+KkqeBwFXQaQkb0kvKnAt3g+6D3n\nmVa9SABMZNlKgKXD3hML5Uatv2zj4OlHXVKhsGwuiPyHb+vzjIlZ+EbQE1bZ\nW42ry71ACY8nWQsoQgYyWdvsxQMjXA6/BweIUV4hV+ky7dyXmUHh6xJAEda9\nJXGNUFwnOKFAqt3cLSWNOiitcDVwFNyLBwZmkCNZ/UJYu0S/scA82XhZdR/9\nmQKAhICTsNEeOQt3Yx7txQj1AZ73Dtjx/S1RjcTPtOe9nxKV7b+MFJDrbk98\nbxyhrn1miPzo+emB3fnRuTXY1x6Ca1OgKmEhmuF0clZZ+4NItcTTILNiL01s\nIC7X5JvtODAie/2cv8DvyZVUzAFAPRzaFrJBQphU+LVReXBdwpKv9aLjOLG7\n2ncg\r\n=4PoE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWAQwqnKyrK/NLBZhVhEhYHEg0mYkNsu0jExQ8bxKP6AIhAIpS7iB9SNke5B0ZAVgnjCASFycFlEiFjJJWAYwDQbsc"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.0_1618577192915_0.19223931262572735"},"_hasShrinkwrap":false},"1.5.1-canary.312.6208e18e3d0e2147cfdb891da53aafb676ca6f96.0":{"name":"@sberdevices/plasma-ui","version":"1.5.1-canary.312.6208e18e3d0e2147cfdb891da53aafb676ca6f96.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6208e18e3d0e2147cfdb891da53aafb676ca6f96","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.1-canary.312.6208e18e3d0e2147cfdb891da53aafb676ca6f96.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ShAL+37NrUtnSjW3+hhqddBiJyt3iz6lkmFl6JcejcVyobR6V3EeFfII1OOxRSBHNjv9c9R26BVqstsiy5Npog==","shasum":"58ab669f04a259ec001bebcf963b60dd807e07ce","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.1-canary.312.6208e18e3d0e2147cfdb891da53aafb676ca6f96.0.tgz","fileCount":476,"unpackedSize":1097930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgemC6CRA9TVsSAnZWagAAQ2YP/0AiMRacP3mmN5Gix1Pk\nK0q6j17Ag//4Ayxqec/1pZhUtx8+0LPJ2megdwuBYjpQP9Msh1lLegKK4X8y\ngnmJdG6V9+Z6U8hgbG02LOrNGXCMYKgENz/1PHnTXFtEmMOa7bqVx5c7K0ZE\n5AMjmShyXtTJp+Vk2Y8kV55ArfYwYbzTsv4qYs8jsyVhRLnc9KiDg4YLYfjx\nvViJUVdSfFcZ0qI3JTzKmF4VeTfUGu0YWfHZodOke2GFo/Wz0hAbx2Z0SyX/\nw8CNfJxDxXkhOvPPuIW5YVUtX40grRjcaLyKMRW3miYx2bClHeuVSPd7YgpW\nx0LenjXyQzJ6kVp8zKkEB2Shc+h567wz3BbwB7QA3cmlOztXxYQz/Zqyb/SK\n5sMmoyzpfNZ6MfkW9lcnuNTzL82EfApLTC4U5NxLNVP3FeTUEUOs/XEwqdEW\nKDjFZOothy9OwCLHQd5x7r/j9ZwODmzOQUs7UWe0kRViUBj8PTY9cRroz+eW\nlpxsra5vl8dKza6QwEzHN9e4YX5oWp2c/CvdEYKun6tQeS+5b0R8hm8/kRjq\nLAncjldJu/U9m09TNATPdwGM1GavbxYMCimHqmHHPhis9cbSZfJuD2h5sMuc\nhV361f1MeLqWaYQqqKLXYZeaEJruvwBgImiaZoFoWlo50dk1VLK4/5Di0PdY\ndG2t\r\n=XdAe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8hDy7595oKqYmwTtuUsho+RyhAVCxacSwA56bpiA5PAIhALizcHStgdOoMve0D9Hr67dfeBUNUzD0DvMY8J+tTc+z"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.1-canary.312.6208e18e3d0e2147cfdb891da53aafb676ca6f96.0_1618632889903_0.048173010131223215"},"_hasShrinkwrap":false},"1.5.1":{"name":"@sberdevices/plasma-ui","version":"1.5.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"49055a37d67d5fe393f556295d6f15ecc2659968","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-AUqy8eGH8I3DoVLMafrollBOC52qDuOKvUISB5uGFeuKkgS1mjQbA769/s6IVeiMxaMpQqPMXV30wxxdgJFFaQ==","shasum":"7b174e0317366e348e250ab2f6fcdb13f146706d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.1.tgz","fileCount":476,"unpackedSize":1098149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgemLaCRA9TVsSAnZWagAAi3UP/1c/nTYR5QNohQTZ9hSD\nYW1B1OGENfIs/KwaYumeaw70DJmiYAXv+qqWzYDA5moMSTGE+qDV93lpc3j8\ndwSWkxnrOBjV/FpsBe1Zx88yrIJY6AWR8ysJS5EeCPcFiFY77U+Kf6XBKuKV\nToUVTr+SGAXt9/sXVJkoJpvMHHlcENaVXZMX4s9/5koqGUeas/gUN2bXdGF5\ncrqhRMouP8HraYoQ9FG066kpV3l/F/lqlDEjeoCL3b7R+xB48nvuTcyOb+lW\nw7EumWfUyohxv9YPA4ddV1K2f1pTqoRx7xebh8uItijCkdxivXDvQoWhiD1D\na7FSUxqsC6QMN9G8rJR5QT6zXhmiruVFpPhrKrhOw/2MflTvwJq2M3tBJ1aF\n+I4bMTBFWAb6NNypG9ytaSgKeXWcs2YolqMS0YxiR+UIo4iPNzCEQWgbKpld\ntDk90ISc4qu4v42RQhJaAV1oIchPJyCE03sAtDrFGz18punOYbhaLNh5JNmp\nkYIJ2ZWrf0ArbKxz1OMV9jSgGY8HYXj5iW6E/cqdAQE23iTK9MXNvWJMTFRq\nY41rdulv1LPA9CmrLMOdHm+tlxqmUJNs0pd//1gOzRtCQ0rTDpdfGYriLEGV\nQagEFm4ps69+5L1Hl+MxhKRmmhJAwNFYUZkZWuPAu+oxxVv3p7srPggS3ayI\nweUH\r\n=03r6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVQsx2qNPJU3pAy3qkzbgRpSdxrvq8USUmCDuQaz9sGAiEApF4LmXA02lTSu/kmZh7kFtXi8Nt0loUCXKpJKcvrpcY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.1_1618633433885_0.3631013608686855"},"_hasShrinkwrap":false},"1.6.0-canary.300.d44b87c5bfc6e6d72b523e2d86d4a038067b201a.0":{"name":"@sberdevices/plasma-ui","version":"1.6.0-canary.300.d44b87c5bfc6e6d72b523e2d86d4a038067b201a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d44b87c5bfc6e6d72b523e2d86d4a038067b201a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.0-canary.300.d44b87c5bfc6e6d72b523e2d86d4a038067b201a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5yIWsZpWsUZJGwQ4BlmhrgF5jX63+UWMKC3wr6m9R+QAw44MoGKZESh3mDumTlrsx5sykqUHhIFNk4LDG3diVw==","shasum":"f5803e95518f448538d74a25b0b4c83d8f4ecff5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.0-canary.300.d44b87c5bfc6e6d72b523e2d86d4a038067b201a.0.tgz","fileCount":476,"unpackedSize":1105981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfVtBCRA9TVsSAnZWagAA6m4P/idTb6oK2fg+84xDAej4\n96RpwXxQT58zM7On6jN6LyE62bkHkxYXND2MUYfCuovrIFAhVvxXdgSYp4vG\ngsqRbqTsaZxVIkL64G7AezkEQ2rUtajX3kkWOZmyTFyoZKvrx8HI3N65bz0M\n/Sd2y3gcQHjKjpVcSom6I3vLbvHuQQme6aPpHYt5M6nar3bW3oBefGCQRj4p\nhct+q7Uk8anAKL8hlRn1Xyr6h3WgxdAa9oMBol+Ay5LkVfxf8LBxVWk9YrUF\naLtCwInXinfB+DdKHilBh56wM/Q0WXcURr58n6pcoO9XADxveqBETWFKp3eg\nae2/8fey3yp0hzFK3eZVGRy1ULIfALfI3Q2W7udiGBFr8PjPFEZ9GCrP8Yyx\nCeF9SWblLErgx3qT0le7yL9tqMuUCfPVZDpjM3vkDT/oVjXWvFyFqtKChb4H\n1sWvHuV78dmILO1PwXfil+gVispHK8fw/Xqfthbvv5QT1+dykXDDzJFlWof6\n/1SOymBquOaSbm+tt/Wm+s8vSoNA3zDUIn0n12KXyAG86v0E7tusYKsxU4tx\n3pfPa89h0qYEghVl9zx+D6lfMb0vpOSOB0ZnFMbSpk2wCYAOpA9C27Tpf/+u\nTI8101CqdMK7yXaOQBU3zmc0l2Yy8vueGgLw0f2x8U770+hqIVbd62jaBix6\nvfpP\r\n=M+0x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICR19N5IXmJNNgZRd0K3GDwqY6+OOpjOBtcVJ+TwuoZ5AiEAx32odtDxpShiURgD1qZoR37y5aqcMviwq8Ze9L7Vuks="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.0-canary.300.d44b87c5bfc6e6d72b523e2d86d4a038067b201a.0_1618828097165_0.3324188636292651"},"_hasShrinkwrap":false},"1.6.0-canary.300.d2a8e432c9ae1f55bc1bbeb295e54e38b757c1ae.0":{"name":"@sberdevices/plasma-ui","version":"1.6.0-canary.300.d2a8e432c9ae1f55bc1bbeb295e54e38b757c1ae.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d2a8e432c9ae1f55bc1bbeb295e54e38b757c1ae","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.0-canary.300.d2a8e432c9ae1f55bc1bbeb295e54e38b757c1ae.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-KV0RIsC2iYGDV/WmQycY2YCXT6PKlfn5BZgFUu8sG9kZVWwGM7PErr6vce3VXpVmUhNgEgd3DkndXEb1GJ2XTw==","shasum":"587f9e69f101b209d6938ebe72644e9367c1e0c9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.0-canary.300.d2a8e432c9ae1f55bc1bbeb295e54e38b757c1ae.0.tgz","fileCount":476,"unpackedSize":1105981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfWpzCRA9TVsSAnZWagAADqUQAJa1jXP9MXFxK/BoVeOl\npeZvkhefby5hqY/hNc38MsHOUMbFl88Km11sSywg6YlNia3TarljwjN79YAY\nfx+dtSjvlpDdUr2jYzRdhcxH+xLtujSmXd2mehvRgI1OQHbI842Qd+54ldLe\nBpG6Zi+sp1e00cx+UC/JBPyOi53IpzHXEXmBu9V7qy4S1WQwpH+U8AUbRTro\nYRJgazsLRySyWYONzQ1WbadlbGiZ8cIFc1/bnsD8ne/Cu2b28w5DOFN9xzvA\n+ssvuCvX5GWfJ5xjEuu4DmzyWNZlNwKCfbMPMuTkT7EJL20VkGHz0bOkLXpn\nVS/rCtozhtatriT6sECq06MifW/Adnq+0SlQsRTpEGqnmGSM/hJUE/NwTnTg\nGVFNGuMoKDKN+DpwL8nq8AirwRHEhY367mlhqNV7ePWDZSJyUNfPuIQFLFo1\n33cjGQ/wQbzZ4FJtKvSu2n6ANwPqZhl+3CsZirNz5VmuCTuc0Q+h8m/h4QB9\nJ8PkHrdXVKELVSoqK73jN0YhITnMpd3Ky+kukJ5Mb6NK6fWm1tva1CZu/R6G\nGJfpUJQNON3KzxDQT/s83CWDC0H3XRfCLfJGtfdz8zKzahTZnPAHjCTUl1L9\nH5IWiQujq29ep7lFXDbmm43DPMfSMIxps8EzCiLAJ5rnGPTHYdoWwj1Cr7Wm\nO2cd\r\n=k+iQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWqEWLFJ7zj8tToVWXtLQYzdKajikIS5EdySkwt7URBAiAz/asPUiBsSjiasXQgPykpTAzIChxWLI10Yn1sjY0IYQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.0-canary.300.d2a8e432c9ae1f55bc1bbeb295e54e38b757c1ae.0_1618831987077_0.14218838582359683"},"_hasShrinkwrap":false},"1.5.2-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0":{"name":"@sberdevices/plasma-ui","version":"1.5.2-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.1-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.1-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7fd1b8536f4abbd475c748cbb8ba2b0c8182f770","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.2-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ZXguxI8DI4v7czrtOqzesa7EeJkHuoqQtEdn0DptDX2ztmu9MCgag+71lc/H3ImiLuFhQT0KcoB624+uRw2Djg==","shasum":"b3831b440badd4f03dabd905eb48e4d34185f958","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.2-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0.tgz","fileCount":476,"unpackedSize":1098311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfZO0CRA9TVsSAnZWagAA67cQAJvAcR9IDc5mNFyEOuTc\nBgEgzh5c1owU/edi64Nl+g/42TXGpf4YUkjhsQcz0iP4RZN3nSIJsC42l11t\n/mfiIc9vtudNZpmUaOHVd6F34RqW5rjVDIPEkwRMEEM3wQvotucSBr3FX2vk\nSO/wb47s0JvT8Pd/oZiQEm/8ssuZA1ridWq2qL6yYYbG/qxHX2IhW7Ea91NL\nrIdzuCdvVpMMecQtIpYGWUeiKz8gYr7j/6D6Ymbhu63gI9MhLDgqE+git2RG\nwj1A/kKdlcwMRfXV3XUvGtUsBYmbi1FFVoQW7UP7htonP5fcY78+zPgAz/XQ\n/QS9Cb0sIAXRi0SXZxWM2ojNOYF1DEWb01VIXahyhp4Fo/3jlgWohFUFVJuN\nZLN0xnHpLOwZqcNUZuQe22O9nhimlAS7r1Y0bNFDg5qtgdu8s+7e1f6pSJIV\nd0fcq3hUEzC5akmR2kHEl3fQvsgMtgi+UGWiEQJSSWMn+2fVNOzoyh1bTzhZ\nzEMH2IoSXHjWKS6MEBSutfcHJlwgqJMUczrsNCAS72U7yybPu82Q9WbXf2l1\nI1SJhB2KrMNM5HFO5Iox5CxZwDqXatv6Mq7yiKUyhqUrmhtquHgNHnN/ppHJ\nASJLTPJHz1cHkWnbJP93nbt2auIhiVAHQ8Fs97zrerMrgPSpTr/3u6k4fjTD\n7nkL\r\n=MKTM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhiYLF2jrBe+fuztsXlZNoPrRSQ82k6grksZnp20QBrgIgMrHtPKS/Ws3GZ+Uf+mXRbzJBkd8GTPB6m9sLkg1IlPY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.2-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0_1618842547898_0.4473837527792517"},"_hasShrinkwrap":false},"1.6.0-canary.317.98c4966b97dff27157395577f0feca3d65426699.0":{"name":"@sberdevices/plasma-ui","version":"1.6.0-canary.317.98c4966b97dff27157395577f0feca3d65426699.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"98c4966b97dff27157395577f0feca3d65426699","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.0-canary.317.98c4966b97dff27157395577f0feca3d65426699.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-MdId1sobZt3CsmDMZI0H3ID6P0aB/gGIJ/DsNvu5VjCRsIPqBIEQS9F8LBj4AEzgsJVKXGKRXNvINSCc9fpEkA==","shasum":"da47bb991e13dd2bd03d4236d069f600eef51b7e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.0-canary.317.98c4966b97dff27157395577f0feca3d65426699.0.tgz","fileCount":476,"unpackedSize":1101184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfoBaCRA9TVsSAnZWagAAumUP/184Z79SuOnAryqW9Gik\nmeRNxCnNa2DoAnIE7yl4aODKtG3vMp+1PYJrIHRXE/n+bNtGv7SgR1aKTCa/\ns3f9QkgAJ1epWHh9VQAv7AnPtD+6RzuUaVjJShIj5uMCTOM34x9DlA0C0v69\nOR9R6dUo+hZzWdtFDOLr0u2xJIHBUmTMmLb7nv3g0TRwkY9HbEtrIx29YUJW\n0M4NqoqZjeNloZMgMdKxnyEwQZ9fyPOI09EAxwNRam9ii9lFOyGTPUC3GxUI\nnazvQ5PLJiyI+DPOFiFMTryNesExQGdK37j8rZZmaCGKTqCaz0DO0KF4JLYC\nBcc5ejkmq3QsSC/fjOxBcpvVD+WWnpBJ9qESeTHkkReCP+ZqVmB/ljXSO76I\n2Cab9wa7f4GHPhD/Fzxy5PqAIC1DQi6bmygB0Y0xcUkhzXN/hHSkg11B/7N5\nq1w7ggxO6N5vl4JdIfVbuOfzG+6OWHfrcq937nffE3mxf2ZcQYhhRRPpHDcs\nboiKD9OVZf2S2YS2cm0ilth3FJ4WGw8X+PcUY8FkkXL+iBII279lnnq88JxG\n/q9ckYOorpR7Zvn7DczUgqEcg3JrbF5PIIelIcgo/jHWVfQZpt2qmKAfcI3G\nXIoouG2YZQsbgm8u6UOEDJZppWOBo2aHu4elMmJRRUms/TQTCmBIEMwWBua2\nuoI5\r\n=mSr3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW6NPP1Yi/VOkRLwKj4jQ1WYfqI+/3/fNNbrPAWujTCQIhALIkgdBkFc8eJtHcaJ9OSih+yLmUFnqwJ+1obK+AEMEq"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.0-canary.317.98c4966b97dff27157395577f0feca3d65426699.0_1618903129097_0.8361948132997283"},"_hasShrinkwrap":false},"1.5.2":{"name":"@sberdevices/plasma-ui","version":"1.5.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.1","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0deeb48f3f90dd9d1dedeaafaca608f6a413922a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.2","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-T+A5hcc2SThuNUyuxzsybQnTeJXnZbpsRZqiO8MFMxx6H4HeBUKwFR11f4gkKeroqVLK2rKqECfFnZmXklLpfw==","shasum":"d7c962d0d95df458467ffd4742ec4553b01743bb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.2.tgz","fileCount":480,"unpackedSize":1101986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfo+zCRA9TVsSAnZWagAAYpcQAJJevXLPLl/4KKPC+nzB\nFzYPQjWy4UeXMq1zIehM//Q+YkWW9imUrFrTqZbr7HNMRhCiwM9K656TBiBW\niYYqSUqJ+rkLCrt6gi0SGu6/HLamueKeHgOg3YolAJqBfk/rE4NUPSL4AV7+\nC+w59zFzFv8FUf94fiikBDOZTGtTi5klCh1EOxZYwi7WXlKS8AlnRMVy+jDf\nVkEsNhyfz5AXTh1O8f+dZS9tJ4ZctLoCxCl9kycK6RL/F//lpVMfxbloP437\noCzOqbJE6c74w0hPxG/jkwyJYq0GcuWLSWjowcXLPnZ+uBYxAsCkgLzLoqpb\ninWy7BM/UA0I1TRyMJcWzFmGNXITiMErJ5iHGuFuD0J6FadenRb7ul3qNSZW\nn3BgMXrFuiCK/le3lb5dklW25cZhuN8eeOCuU6zZcNfwF0aV0bM1YUvWOGdG\n5d2NzeztiLNVs1i20WqAQ6C4egqr3UFncjAxlKIhbqRaKaWH3LX6zGWgpAp4\nY+CtB7pLiOKahQpYtP4MLmBzdgZjevPk3dcFjvEypbxP9NDVNER+uHoIZbxl\ng46qRcMyG1TJU90eYfXHP+KpMk10agCCB2izAW+AYFM6ugPIILb6pEUs3CGa\nQw3JUiSm8h3FE9+jZ3w0NSZ8bURLLyQaNvBZOYxl0kCZvJt74b+8IH/2znmr\nugRe\r\n=75M1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD57+OzaKNVUldfaSnCQgoq7ZNNWP+BAWKX2FbdC3hdVwIgEcOgncsR3yEiortviFb0kHh8flHZ36VKxK5Ih056lZw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.2_1618907059382_0.9509243431713268"},"_hasShrinkwrap":false},"1.6.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0":{"name":"@sberdevices/plasma-ui","version":"1.6.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e208694c221b175cac06f52c390eaa4d164cc00f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-kL5T1n8cxhO35oHGA8T5qU3uJ9U0Y4B2VtXsAgnUwCvm0ffWufuxtn0dy2dEYYpi9HGxVcH0iKvqIcom9b6mEA==","shasum":"ef9de7f6cc8297e64cc539fba161944fb17557ba","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0.tgz","fileCount":480,"unpackedSize":1109259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfpCFCRA9TVsSAnZWagAAO4oP/3VJ2Yo5I3GxrcjRVINI\ndo8HhdzGA0qaMapbOIeZZwxMpi1ac+sVqniP1zZyy09hCaAv8JmAHqEfWBTy\nkxfhIWpb6wcg3ukjKx5nJmPYG227tDX/WhxRYH6MB7aO9M9vXXSVKbiQo/kv\nDunhVDguUACbe8w+xYiCrD0YrBMEJfzAy1UiwBRp9NiolBRCypwA8I0qkbps\nN2CWB/hjUvkKEWypquAL1LUP/zu1+PC3NOdOVkir6djrDuNpL3KH3nD+mmmT\nTSmPe59HgucSQJoh4yfSFEdBa/MrsrVGqfMmdD/LNAVDSKAh/ljMkRueiEcN\nduULmPO7ey7uds8/SIt/sUIKWaoYt8XcEDrXIbaI4pI8gkEtVoSuSNGiEuMd\nhidA7j6T/sbFlmwMkLR31BTyxOd+/pmGb6FzqO3mGGzR6edMrN46FG7BCr8O\n25Ov6XeGahY8CnS4xOdZ/vOAWnDvY17HpBfA6JFdPK+5CqA/dEIcZUDc5Q4/\nfOEJaCGyT9dB6frUxcnLxpVIr05PZTxkR7EV20I6cMZxGVrEIQPIz3uHQwbq\nqJgrU1wg2bzODIt/yCJ43fEyGh1yD4Vf5DyWu43OhhJG+TBbTUwnxjrDLaNu\nvgC6DSRQ1YrXAKEube0TFNFxZQt71ZAENNORh3k3aAk2ue3kwzp5JZd7DIqo\njBh0\r\n=2Sar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Gf+QC0lnL9MM6PjM+yDQkzGVEWv3XMPBOKgKW8eDcwIhANVKzQ/V1mMHPSpzlJ0gaamaszYeO3NZLYscLZ4LXI4K"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0_1618907268878_0.6399640369763098"},"_hasShrinkwrap":false},"1.6.0-canary.300.010a2e95cc7e68d552572c7e2d4783dda7c401c7.0":{"name":"@sberdevices/plasma-ui","version":"1.6.0-canary.300.010a2e95cc7e68d552572c7e2d4783dda7c401c7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.1","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"010a2e95cc7e68d552572c7e2d4783dda7c401c7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.0-canary.300.010a2e95cc7e68d552572c7e2d4783dda7c401c7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-7h++zKV1fYOVBzFB71M5hPHGbu1Ng96xGq9/U/saeosgYw0fbRfj0rCEN5Y5RlPFQmuxZPdOaVNbaA8lkSWQ2A==","shasum":"a8a898d6925b68489108cd24497e60e81d8f99a0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.0-canary.300.010a2e95cc7e68d552572c7e2d4783dda7c401c7.0.tgz","fileCount":480,"unpackedSize":1109447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfpfZCRA9TVsSAnZWagAArXAP/3gUvLXlYRfwNtnR8DIV\nBIO2jKx7S9tXh+hmOZtcwOrhFgPy4AJE1RosB0PY+fuFH7cEKxVQ8IZwM+8a\n4lXuB1pQ4DfZl5wU4cnGMAfxrvYZiuXhZXt7VJJTrOqrnyh7Z9DU4KBcpQcs\ns6ItZqb5jFDmHK8feqdk1tA3m+S9ScSwbA3RJioUbOVCycXFEoeswFhQ/5oS\nItBcTwyAyQBSi4h59JWKMwEDl8Glntr195fsovr7UdXwc5ZtaXIn20hJgdjC\nd19UvhZEWGUEWW6jYWEQVpBQM7KRwiDtd1ajyocK5HfpDhxN0JYlzZSeeX6R\nX6HR/EOJBPohLA8rf10gAEjkjkUzCUe/hDyv2z0MnkA/+UyRDM27fFlCvCr+\nkeKUK4O7nfZKi2Ci1En9TC0kMUjY//ldea3UJPR0ehCTHf+aKUKrMWRmXvIR\nDP5HIU96rno1Xh7WbZI09bwLDAntS9iiVqPYW3DFZac+8B9WgZTpFib77ueX\nE7Eql53b2UkIuVkGka9KvzNg1Qmz54KdJdFtOX83FjPL6/+5jrc6Y5Jx1v6U\nH7WoboFpbBru1GZ0YRhZMT7L347LVS1OtHYLAzERYwlW4dmPefX+ldC/L80y\nS5IiVDCcE3I+DDcBh+xRhOvRsmk2/7Y27WDLpOcOgfV4mKVfP0ewd/b/C1J+\nEghF\r\n=jIQW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7Mnt+APOsnj5f01ZLqJCuFeAt4I0m4/mZ0GijkOCn8AiEAomUq9EXrKmCcBgpjREikIoB41OeRfOJe6b31B6Px6tw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.0-canary.300.010a2e95cc7e68d552572c7e2d4783dda7c401c7.0_1618909145045_0.2502978194890919"},"_hasShrinkwrap":false},"1.6.0-canary.300.02148409f793ec7592160521c1439416e189b460.0":{"name":"@sberdevices/plasma-ui","version":"1.6.0-canary.300.02148409f793ec7592160521c1439416e189b460.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.1","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"02148409f793ec7592160521c1439416e189b460","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.0-canary.300.02148409f793ec7592160521c1439416e189b460.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-nB+68JuNTmPHIFUFJfwnoarVe2oOmY8fj+JPgU8d0lwtd20+tJZdIpFmGwjj5xKdYpVfqYz2MZ/WKOT73+Iqog==","shasum":"d49e8b17c58f7e6e89f61a2735c4ecd5ca57decb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.0-canary.300.02148409f793ec7592160521c1439416e189b460.0.tgz","fileCount":480,"unpackedSize":1109447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfp4JCRA9TVsSAnZWagAAdbwQAIHhlNwVcdOcrEhdX/42\neKF2vkCxorLEYM48LdMb0BNdm/qYjgOl7Zjm2HTjXZSNRV0vDBDaTaMkjumo\n0fVMk7nf81ubZ5Yjkqb54V9xhGPsbuRrLydxIx2C3akNGiDGAq6Lzdmz0hUs\nxSt9DJ4RQO9rZfNyYnHSAHHJHap1LU4otzWqbmmHpif4rzEXz8PSQC4s7cUm\nRe8p6vEJW4CoVBA77kli0m8gX2M+HYj6m8X88QOnjpLH96Fa72AkBqy3HPzB\nA830rUfKakULXEopWQKES11NtpShGvrLGuf+DLwl1cuc9ffSj2ueHM60IQ/E\nwFgWBLpsFHPpFLl74ZsYkaAswGPQSMvzOyPbGVRBD7NdY6nyO0lTTJRsB7la\nBpzC5Qs739my5pYiKOPmaPzqAMQIJ1SvxSdwWHn8gX7diXKnDO3x3fpfoQdn\nfQtou1RSCWh8kYe2n3XvJmB5ehfYWc9c8zZ1ilESdiXae8ZE2+GxpQHTxxbF\nkozUdDF84nNyzl2czOrkMA8zsdI74DInb5S2u99Pkquqdvk15efismeIGvOW\nXMunNkrazPE+fEjDQuaF9YiL3gnhZ0xYfCH43E4UdWDG2UWgpYfZMXDFF6d2\nlY3REIVBbB/l9aHWVDgcKuAnKgwHA2xlacuO/Vj4rnTxAZ0CF82BkHQM3IRj\nmUor\r\n=mYw9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC78vtE/h+3Sl1wg9/fyVywTdVhRgh2O4JFsBBAKxEHvAiAUqjX3j9dZuAEqsnkZb+7NUMYrai8jawhAqgRtBNHmMw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.0-canary.300.02148409f793ec7592160521c1439416e189b460.0_1618910729212_0.7012203349373363"},"_hasShrinkwrap":false},"1.5.3-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0":{"name":"@sberdevices/plasma-ui","version":"1.5.3-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.2-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.2-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"517c1dee233c6628b45a19ea16e812d29d814a69","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.3-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-TUM/T9mtwUrLxwz2v6LR8UC4tcR7kcf6rRRwJUd20oqupFecjYsfzWSdLy2HN8OSu3zAlnx/cbOV008Se1esUw==","shasum":"845eaef0551603fbef548bb61bc55b831750e8de","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.3-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0.tgz","fileCount":480,"unpackedSize":1111195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfrStCRA9TVsSAnZWagAAcK4P/2kncr9gWajgbszW/aqh\nZPNl+YYlXkSl8epHdbPUto7rf82IV+2y0ZaC2k/YyDbbjFrsGlDZ8UTTj9Ce\nd0n9tSzy4c0mC/TkCY0BZ/jo/VTQxJTOufNOQ1r5EFvgRpYDhoDLRGCZ69Em\nC9GgRNGUlqD10VG2tieWaXlS/9frUNDMxK7UGwR2A/WRDoOP91uSeo6q9Ope\nH3sxI0c9iD5PVLbA8FWc6qKWTMEz3MmQbFjIrl4s0/dOwu3zE7zbNNtdsVul\nes5lRhU0LtVEkSCSc6iFmBu/wuIbYUPynuBDfRhz9O+eHIqowC79oFoSsrwj\npOuTjJkhBu6qroMBp+EMSLyd2rItkSSTX26NefoHV+LMAm9xRUJSzdSL8r+z\n6eUtrTZKJsWoT38wGxxw6r+i/NZki5x+X6SZ1ChAhIHC0HK/9mVmuOr3GykL\nm+cmgbaz0R8PwL5h/bwpgYehq9ocSV8eRCGGirvpeTznbF437+dlhPBCKxIs\n6tQBKnbJ8c2VTcVMedTyj3HvJWsrZAgmr2z45rtutd/KipmHtrodjqMBnQw+\nWWh6Z7jRftt1k7ZS5bgwZUgan7NshVlfzmnkO8B/w5Ufuh2iHJYPSM1uWyEY\nYyvalylNKRWXoPzFYP11Lu4PKkIvDawGBh4ljT4oi/y1ZqcQv1VXUSVOH8aP\nYPlU\r\n=sVJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYHLlIX5QPc/S3iw6jFe1G9x9Qxx+ccRkrd57dQ1GNTAiEAvlLbCM2uQyH5M3FkMaZETEsGMHtFJTuaRLaT6bjEgI8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.3-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0_1618916524770_0.34941773538122267"},"_hasShrinkwrap":false},"1.5.3-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0":{"name":"@sberdevices/plasma-ui","version":"1.5.3-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.2-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.2-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.3-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3yITnFXYtfgtobF7V2llfkWK138QVNicwejmyXu2pG4LryjyLfPKL7fSG40nGPW0OlVcj4u++Pc6EW72iUZ2sA==","shasum":"0d9bebfe4f4f8fcafe5eb24fdb30ae400213a142","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.3-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0.tgz","fileCount":480,"unpackedSize":1111195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfrVGCRA9TVsSAnZWagAAZAYP/RmBrpKahV7aIQF1zCoA\nbB9lu0Rp+40By94rQfQD6GnlC5X3waMlIwhZBwf6n+NteG2V4/h0eUgGf2/h\nviXzmzDe+jHKQDB46EUZPdUsJFJcTda87yX+imVF58BHwUFWNQmmASjtS7Gj\nZPRzVfi8HhbW2SOsmxYgxuzVPO6+u+uQpz5qBdFm3qkXRfuJArNfP/+N0hwc\npvHQeTxK1koosym1/QSgRxG/EeJiBWmjtLbLN6RHpkK4odRoR/5ItQTIVzN3\nItZ5dCL7HwbivQ3g5wKFVS4kvY0aLNPXdCZm/8+DqIIFn9QMex5ZUuf9Te9h\nlHxYFPakmAPjy1Epm2bMhQxLMkRRdMF71MAHxrBZJTliE6FXMXF0iA/8yLqs\ncM+t+OyxSLfeled59swRAIlS+xGWsdsFu5UrmZmSDEd9QHoNHNGJIQRyvAFT\n4/N7FOIWltBoR78S+hJZsmELMcVW4m9M6ubUN6oEwQodtLi2z8RwUYwmur4z\nwZkfOnYHYtngj3RyYUTtAZ8b2ZUqWMHv1acF43ctJV7wbghcRYBgOF8/PbXt\ntwDp6DPK4LdT4ChnTWUe40zwdinc33ycoaffMVL2LHA9XGrdFkyRBF3HrRGP\nRfPQSIFcFD2IILRPDdm9vh/sa+N5ex0i56GD6f6tIEhjHyULXHnfVBHKRU2H\n9Tms\r\n=Fn1u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQSyh14xzJF5mSs5m7GURd1YVFmwYqX/958AxUxf6azgIhAMNX+zTUAWPDa9LKMFkjqQGMxtoz4AMZoM9z6Wt2K/z3"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.3-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0_1618916677668_0.5086075010690096"},"_hasShrinkwrap":false},"1.5.3-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0":{"name":"@sberdevices/plasma-ui","version":"1.5.3-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.3.2-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.3.2-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5062609e6aa23a5c920306bb15d498a41935c1a2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.5.3-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DW1D+wkVtemHMhORtf+F4IQx6cNGNLQRyBurCkUZ6wbNYOOCWVexFKwOSwFwqsjaw0T1OxWoD/V9GcSORYv4gA==","shasum":"50de9c565841be23a0c909149f68d8452d9b691b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.5.3-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0.tgz","fileCount":480,"unpackedSize":1111195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfrkXCRA9TVsSAnZWagAAJ5EQAI7KszXktTQf2N1v2tDJ\nEOq5T2PYFBaA74iapLkpltyvfaYiy3sMlybJPvqDeQT1Le3Qbvba8Tk6zGRe\nFs+a0ZyOr4RtstDl3kntsONeYiyoENMLhhWA8omAmn97m/GXknCsdYbEwJWW\n6D/0JSZKTnT0aS4jWOFJ5ijpUsVsjACQ/HD4fU8Hx20QgnPtaIuA4ylVdBjU\nTGGqeRBaF+D/sNCjSL/Vxnhgob19dPLhNkvRW+gjQAE7Fcdyu/ndJbmqW2kK\nuzQsxiaq8bvaSxtLGLLAFPRZ0lTdD1fSdM5WWMMKcNi5E/sg0TUH0ufcrwph\n9lqB9Ti9BWHzmdwfGR3vN6m8UQ58WdSgDCP9cwEFZEnXmzZ8rJlbE6GiWHq6\nj7eaaSlI81HCOwBX8wVkWWzKzxYsBFfqA8aSmooC0pbqlRt5UlQbSXC1PIqT\n5+FRyiUsTpeODlOWp40Es+1zgU45oaNDwHFq2mzU6lXYdfPi3SqWcVwd7Tkb\nwppBe3i492QL4urncgjX+nMkSmZn49rAlE1bI2XQokgVZuQFsddvMRitFKro\ncMQ6ZI/h+jBDxMVkgTBkg/EcsIoq7c4IX7OILFS1B58I+V+Pa/pqg2Uy1jR6\nHR6lte5Hp1nv4AyCHbW2iQe1TpT2+RacTkJqIzmL6bfY3JCtQKiDsYfciNzX\nVHO0\r\n=USoR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1YEFApqLT65FgPcynawxIF9t3bMlEh7CTt6ioMqz8nAiBiA1VOusTIdwHA+hUDQ6cX6jqZ4EJs+WCcuy43kSgLWQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.5.3-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0_1618917654857_0.9040329813343082"},"_hasShrinkwrap":false},"1.6.0":{"name":"@sberdevices/plasma-ui","version":"1.6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a45dc22041ce7581035f5161fa49bc91d4167735","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-GQUrZ7P7XuQEfwQ0d7db+bmpSfuMA2JO9ggXTplSFxpB4M1aFrErZx6RWACD9/tCtMUj2nvupkGxu26epQnnnA==","shasum":"703207cea780437df054ba1cd3f4c50564c1a607","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.0.tgz","fileCount":480,"unpackedSize":1112290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfr/FCRA9TVsSAnZWagAAc9sP/07pWPy2LBbwN/7GVbsK\nxqC7s9McI1oSjSTGsPm+5NgM6BvpWG3JvISm7RZz73aF9dMaWzW8uwJYEIuu\n+av8QFsVyhml8WftaCUrkvKVrjP1K8KkPDL3P0wqvftUWEupk687+5tQBCqN\nvG0V9w3Oliud8tiPqSrjDxukon5BTEFBXWMgJc0gvytVYTH94C9Xlxmzs2rR\n3D8Z34/yRcJw2UyEX6ks+B7JpLSFjj2QHoKZF52SqBHNUmTGVmwJQkYVPCJ1\nCoGeE2nZSCUfJinQreZn6KRDuQHgnGR/PuLg/k+e6n4RUp66yLL+D7652iBj\n9StKFE8xhDL0wQG9XBuYq1REpslQyAUuDCZ2dO8hoxtkz18xXyEQLH+zwI+r\n9QyXSreFZ7Wjw1EUjiaHTRQV0Dq1tC3vH3OFysciRHMWUAOBHuebiRtj2T3G\nRV7ctNMuMM13lyoXt5s9KC9YWTutx1dMp7kTU63ub+iVZitlLAm9fSTjyDgA\nOl0kAT2rWdmkoit3ygnGTlSKWnyYDRNv8s9Qfvz5WD6hxLZpDJLmUJvEnExq\nNxQc6guQiFKzyN3az3PbfxR8a3EaMg9SJYi6APqBDyWXRYV90qy/NBBBwf/Y\nPhtvbdkVom7FVKWE9X0Q+/E1AdXaW6SYdmVaJm3fw/adFcaAviOm9kge6YkT\nJzN3\r\n=r2t9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEf2qQUru/EOSe29l1mnqOdEqFeblXxRZqpG92JH1o8AiEA+jgA3OpZNnd8gROR3WoYkz7Joll/bTlCZ2zH3dHuXvU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.0_1618919365178_0.06730573154318353"},"_hasShrinkwrap":false},"1.6.1-canary.322.416d836ce5dc5dfb7470b8a8da8dc4d94bafc02a.0":{"name":"@sberdevices/plasma-ui","version":"1.6.1-canary.322.416d836ce5dc5dfb7470b8a8da8dc4d94bafc02a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.0.0-rc.13","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"416d836ce5dc5dfb7470b8a8da8dc4d94bafc02a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.1-canary.322.416d836ce5dc5dfb7470b8a8da8dc4d94bafc02a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-txJdjo22C/V83IPziGH/X7Wjb3jTSmc4EI9qGug7ZW8MvHiXuaayewmGfdaShRwrSUt3F5yWESxuYB4p64eobw==","shasum":"89a11c06592839e522c3ec681d1e23e35df6d254","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.1-canary.322.416d836ce5dc5dfb7470b8a8da8dc4d94bafc02a.0.tgz","fileCount":480,"unpackedSize":1112472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgftGdCRA9TVsSAnZWagAAU4gP/RQ7McqkH5VJnihuR53k\nRVicBVJFBD21l4TokJ6rPpdyQ4SPhjIH20QgMUtHNvDbrXd13HVbBeARzTKk\nsfacBGgRKt56nT0IHPngrkUCLcDulGKTswPm+4H215R78xkv/BDVqN0w1n6o\n8pA5EvjSfwBIic79KQN2JgumMGjRG2Wzb2rNHHzZJInYO9Emu8ar25aSyOba\nREF1kd51g2t3Y8byR7sh53CuZ1z/+Ooa7vIBFcIkwka8ehokN9VMI6ZGpCKM\nN+aU7dySqIbD3aalVNm4Z/30/0AJt/391D+ZllL/0zu79FggTUYYHVJ+D5B0\nqG15rzPX9e+QbAMQI0Da41jABe5xspF5J/7809lvpmW2LBjGKBNIfGoIR8ej\ny5zwI1SS+6f1keKy16YzSkajxpn2+yalzI70uXiSXgo6WpbSR0yQRwivwMvF\n0iaaKLgKiTm3qg1LCMvB83D2V7ocdknzZra+TLQG0ao3dvKYZsqdEyWhXFwQ\n8w9NBrSESisorTr60YWmY/84N7swJKgnGuhEG6rSuo4X/qLgDJM8BOzWXo/H\nmZi5jxZ0hlQk3Q2hIHPKzyfJuJOAfyxTdVQdFkTcd09G/xaV9QFoIk0nbG/Z\nmJJgrCfs3KcZJrHqC134dXE6yCk6A38GoNr3D9zk6vGWjQwOfDa1WljxXeYr\n9InB\r\n=9/Zq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPRSbks42+le4QgjAilWBkmPVZZ01vXw2NB7lVMAGWXAiEA4RsVe/AfR4phrk+e4k/k/gtNhLo2QJFnG8abxvpBbK0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.1-canary.322.416d836ce5dc5dfb7470b8a8da8dc4d94bafc02a.0_1618923933219_0.12953963194557505"},"_hasShrinkwrap":false},"1.6.1-canary.323.673e06a60e005b32110e87dca1a97b16ed3266f4.0":{"name":"@sberdevices/plasma-ui","version":"1.6.1-canary.323.673e06a60e005b32110e87dca1a97b16ed3266f4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"673e06a60e005b32110e87dca1a97b16ed3266f4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.1-canary.323.673e06a60e005b32110e87dca1a97b16ed3266f4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-/G5as7XLoTmPs1k+5piBGqL+4Hqpk8xpWj8RCEx+f2kh7Se8blMd9sRg2z+aPLptJpW1BVfCF6UqS2QGO7xlNQ==","shasum":"3071a2bb42f310fb65d3732ecb0a337b432786d5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.1-canary.323.673e06a60e005b32110e87dca1a97b16ed3266f4.0.tgz","fileCount":480,"unpackedSize":1112338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgftzKCRA9TVsSAnZWagAAqMgP/3VGAvw5S4RrubgNBt7s\nCx0j2hAxrtRpbrU46q6mmKtRTFwfK1zKzKqxk7lR/FgEBcQc0g1OBEIHx4IB\nHFeNr+g9YtezN2JojxGcn8d2Vdu8cSmzTFQ3xsGw8alkyzfL5RLVkGssnC+V\nyzgm2GhSkfD95uV4ClXHLjke3IRHijqW79yYOsf2OfIDjD9/FgSIcVcg3siy\nIWxilw/H5vWTQNCLV7e7fJHIrSt0+yWqoOZSl6jbfeQzVNLOXa1/MmQZlX55\nbBCihRN/gXfHs6Aj0XSV1MBQ0otL+Tzpx+hSRv0JJmXwWlIXsuusI/VfX3ha\nc4Hu13X5adpY76dSEsz6RGKqjLosGJOZ5QpwEdgbHFR/awcoW1hARQPONX7i\nh0+f6Ykiu1c0HkNEFZ/54r8i9D3U3KW7ZQjxRmoosXxoSanCmFcOqXHVwJHC\nvgt2Cvf59bABw1FPtGOuVGyj4tDua9DLd0WvQ4pKHTrhVsvPThEsE8oNno1Y\nEi6GePIT9GALzblBt3mtilNqFruQHGwRIE4YtppJNaAXLMAWKpGxLk9BGIKd\nwzoOUYqvTyzNkZYbK3WNgSLNwqq4epNITKRKWgcOQqnKPDnA8uzfcM5ha8sO\n7GE4F8tJuuSaBUttqoo7S8hatmpjkO0aL1SoEaylb2lYAif++wEBvTjQG3pT\nCCKn\r\n=pSQ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV4U414ebhBVeb0eXq4Tn42lkX2drExKdNDM9TiL4vQwIhAI666TJMWyotJ9666oy7rx5u+HcPCQpbL5pybMqNCiOS"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.1-canary.323.673e06a60e005b32110e87dca1a97b16ed3266f4.0_1618926794343_0.4877072767472397"},"_hasShrinkwrap":false},"1.6.1":{"name":"@sberdevices/plasma-ui","version":"1.6.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"91f5b5587ee7c0f808a08f58218450e63950c75a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5ArUcyY5cMclwo2z4JFKzEKA8d8aviVUnUrFt9W+WTKhfq5XtNejX0q3EblJKHmGYAPiEGBuaslWYgXvf+kfGw==","shasum":"ebbfd64c749cc27ee601223e134ed134275e6bf4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.1.tgz","fileCount":480,"unpackedSize":1112594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf8dtCRA9TVsSAnZWagAAWzoP/jYuOg3OZxqKtP3mkxN+\nMwr0kzHIDX8Pj7Ms+bYOue9LlV/qjRUvaqk6D/rDTw2+ApLEZr4BL5lCjwj+\n37o6y6GXSJA0VfgGYgnwe1OGne2M6u3TMPZV4YfLP0BJSDPAZRBtZoLz46h1\n0FB+1ZYMZIHVsiWi8u4DkNmvhOZjVJMAAqUM3nEJsoAs4exOFUe3KNr/WEhY\na2WB0KWFIsnqj4gIdzW3imsUxVZp1xrfM9oNcsxd3EFK5nq9BE/MaLKHpVOX\n6BbA3nT9Z/37oAIjGhG01euvQ/PGFBULXtqQ4zD/kaPK1QSF1gozEykXr70R\nGj47rM3GmUDxg4AINrutzWfLkVG79rEogj/BFwTWR9UDPYJ4WARyRKmQDIVz\nYlDMkfjHjYSpjREZXTZJ9msC7T+xvDvV6/liGlHKi8glHZoKoy8PsLYMsnco\nDkXXwHF0IbK2gLUUgyujuL5R/wKUdx/vuFDmhtYbpYGxR70nntKUHcr2CJVi\na3wnOvX5H52b8PDGVzhteeV7tscErQnESlDN7Z2pjEN/qTnZy0zRLfCkmr7E\nPmUYZSNjuIBZxRNRWjllDF2aml+jry3kiQDcernV4DaBlaxNT4dOE4LdUiRE\nnxFp28PQJQd9YRUMU6MDClwmjjUukUx2DDyo8dCgsMqgQ+N+L5Or+A9ReT67\n25P9\r\n=5Rbo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCbDQd2MbMhuYEdl0IxLHyGODbLW6dGQL7waI0/2bv+DQIfFI9lzxAhSaRQfYWMTEq2slEK7/+or9dGD5pkEkh12w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.1_1618986860928_0.13108286350687837"},"_hasShrinkwrap":false},"1.6.2-canary.322.9d1fcacfcfa26b8daab266cb9873658c223b2d94.0":{"name":"@sberdevices/plasma-ui","version":"1.6.2-canary.322.9d1fcacfcfa26b8daab266cb9873658c223b2d94.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9d1fcacfcfa26b8daab266cb9873658c223b2d94","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.2-canary.322.9d1fcacfcfa26b8daab266cb9873658c223b2d94.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-BevxVfrjNHfbFpZLiP297SCTDkluhbuEzOuV09Y2wfdAEDk5IAjiQKTUhlAIvkCXTCoQqCZLCA6cIgMQ0NXP7w==","shasum":"e63c17fa8395de96951b9900635591e96c50b363","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.2-canary.322.9d1fcacfcfa26b8daab266cb9873658c223b2d94.0.tgz","fileCount":480,"unpackedSize":1113230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf964CRA9TVsSAnZWagAA7m4P/ihZNcXlqi1rzt5sqkT9\nMJfWSqXS9LpFYHqyUIWUxcPCy1c4Dcd5jrmPi/MjpvGDwVvjScaEmhKXs95G\nqQl3+H+5m13XaSshO2xNxcxCPRqCPcDUvzv2dascWea3uHsE6Nc3pS3fbVXi\nT9/rLSXV73E8Wv7mVm3/xgLrsQd4cDTXTP4/IQ/VIHgibRvdheKvkjB5YFxp\nBu0rd3Wm8li/ijthw5fW7T6PKLE2E7wkRo4jMj6NFSXQ7wxXS93OCpe2CcCi\neS/8zfMbG+wjAuXAHmdqFClOeW2URfmfvXd0oMQPHWiiEATQx3CWZxOFThvt\nQ6UbjRd9FxXxlWJgtSGgiV0EVJCeRU11dhEyscAr0k8WxJeZX6Cy2LaQR1tl\nCJstU+T/Lqh9g9TKm8GSlu2Y/TY+4HIBUxqXf8bWuW1AJgHc+5u6vH1abafa\nJLXtDMO6UC5GNK60+dRi6LMRkxhOrkQ4L9caQzwUDyzKCv0AWmTsmCkejv1/\naWsGduAPKPiPCo/fdYE5QxVdO05/FYrLrXuIIHW//Zcrj76m2LcePD5J2NBl\naqlrIbBHr9Q6MSeaMQoUSM9XjhNoDCLpTRf9DCDlV/gm2+IdCENM95BFCHb+\nduRgOh/en5QcRXW9VLC5tfFzyB02Os4+95SpAPXBkoUGxV+s28AbXhiBi9dB\nAf6W\r\n=/m/k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5x//KRUaJL9T7VNc3R2jfAh8GvAEF+xSvig9zca1NsAiB4KUTWjYbimt0zTtkIsIn2wXFG2w9Lzi3Qo+I7UaOqWQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.2-canary.322.9d1fcacfcfa26b8daab266cb9873658c223b2d94.0_1618992823811_0.5481075415845245"},"_hasShrinkwrap":false},"1.6.2-canary.322.ff655b4feede0a8683268e348fa3362a3b07cff8.0":{"name":"@sberdevices/plasma-ui","version":"1.6.2-canary.322.ff655b4feede0a8683268e348fa3362a3b07cff8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ff655b4feede0a8683268e348fa3362a3b07cff8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.2-canary.322.ff655b4feede0a8683268e348fa3362a3b07cff8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Jc1Fbm8MpOIFDcW1jf9f9Yw71CZjTmBtPQoK5J6lpKEw2IBdniYNvBIO04eAWZy8kk6RLvghADhvuEKrx+X6Vg==","shasum":"60e3a5bf98e850c3a60c1dac4174ace374da50fb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.2-canary.322.ff655b4feede0a8683268e348fa3362a3b07cff8.0.tgz","fileCount":480,"unpackedSize":1113230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf98uCRA9TVsSAnZWagAAIYgP/jEMDolhCLlEJq7Mx47b\n/bBx+yCY8QGOSX1VJsnY4j31AvrzcDCOA0g6iBdBWCumlbZx1Tj62Ft+oxXr\n2RoA57jlNtXduK70+a+BDliJ0FOTmH/kWTWn4hw0Ap4+PDNQnotnPQVfyCn9\nrkt7rmm7W+AJA0eu04deqo+1H0be6jeae3NmNYP0N/ssNlwNLaRIUC0j8fQ3\now0y/pMWb6rj48O7um5vfJ9zzOc6oYbEG7FpAHi+cHrGbF2Zf8NCUjICnzSa\nZSIYhh3+HHO65yXXxoVIhQCgxMb/NS45bSczumGOcARtiEF/xrgr2JLBOx2R\nDOE44O3dlQa0kAmGamibkXoIZfmhA3frIThvXRFJWi6cRgMsoAg9OG8R+3TO\nVgKBA+y8mlIxcZb9FQO4u8hNZKzIzeVdwGCFYMEx/F1N+Um+ntI9m6FE4853\nuhOq0obe1LZl8JenVMf2/XTlgbiIr107pFHKCwDjDHkoy85v5reQuEwjVain\n6jZwYKweB1jDNIt0kw9hD+wMrTYdcLETmzmD91h4XkZxeqYcxgjGfHOAqz3n\ntCir+94S3yb+lKn91Gix0Qaks7mhjdYIROF31K5R1H8ytI7+CHx2xe0Gry7J\ngRfBSYojMi08oR0BTSt7jBm8/hAzPhza7t1C3+72bYjSlGiGdaaBz7PT5WO2\noGu1\r\n=XoD+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg2EdKBwuRsalDxGDNd0ay7Bk1OBDjoOGJe+rg0GykdAIhAP4GD38DfPYO+eK0lla8P+hoNCLeH++Hp/08ZmJEKXWt"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.2-canary.322.ff655b4feede0a8683268e348fa3362a3b07cff8.0_1618992942072_0.37235275349805574"},"_hasShrinkwrap":false},"1.7.0-canary.317.e7bb63629c65f2475fc32a2fae16e694812d442d.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.317.e7bb63629c65f2475fc32a2fae16e694812d442d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e7bb63629c65f2475fc32a2fae16e694812d442d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.317.e7bb63629c65f2475fc32a2fae16e694812d442d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-zV6RTp+09ftC9RoxMgK4+zSz603bMV+95YX7+3EC5ZJVpy5fMZLy4XF5w/zg8fLEQcf4pxOl5TeBmrHEiSiBxQ==","shasum":"2fbccb14f8b0b66dff48cb920153e660e9889f4b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.317.e7bb63629c65f2475fc32a2fae16e694812d442d.0.tgz","fileCount":480,"unpackedSize":1120584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCBnCRA9TVsSAnZWagAAfy4QAIV1Hdwy7o4k15UsW2V3\nai6tGDrCS1Ncg6ccjYwT4K4rUv15YKU6BFOJNcdBSNQ7HJYT2vqi1W8Pc95t\nSz8R+mfkcG37KX+wZCiBg58/hCZtpkg7Xbj8E6n6giE3Ayrg5bAmgaZfnhPU\n7sRhkklDrUbJzDWhQlnWXqN+0eNbjMZs1Zx6kOVAg0bKUTdIkk5mkftYM4IH\nlxj0sryRZjwu4vXQdFZ+VY936XeCIWJXovLQLTb1oFtB0UXTouIAXUCU8WPm\ncVODpWgczfWpYtn6yOUm3J+RuM7QKqOwsFyIZW5qCzw4lCi6jFfuT3E9yLAi\nySXASi6hzvqrHcMvGjAJUfz/TtoMddWSYkHDnd6iO7YcX087TOYCc4sv26XB\nOW6w3qIzzMz9GEBk5TAY5PRvWz/tKu4Ir/JXbx+1wTmFC1TH7xvx1yamyKrl\nzxuhHEGcGIruNul/FA67op9uXjC/IYWRaox76eatggcqKR/lPZL9mkiYNun7\njkgNIjG8lW5pyzSvIj6LouejsZg6E7YooyRBDpJRRZ+b5eTjvg6jS8Teo4Qg\nc1NN7IjHCMnouJFBvXlWp0NAEq9nzBpxidlDUvz3EDo6XAlcqmfELXktMaeN\nHa/kTH1vosWK/lbaWCGznxF21bOgCo5r+9mzLUafnFqZV0wkiS84BinkMT39\npzIc\r\n=Bgwc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEg2/9Y6tgg0upcd3QHNkNuIrsrEDh9QtbqV+SWlGSAIAiEAzMRrMdj7Nmtoo9Ee8Uqm3WsNuWwpfOBZQZArJwm3Rl8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.317.e7bb63629c65f2475fc32a2fae16e694812d442d.0_1619009638969_0.5541573837741334"},"_hasShrinkwrap":false},"1.6.2":{"name":"@sberdevices/plasma-ui","version":"1.6.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cd023e4b76e9c0a3ff6ab31e2452052951f4da41","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.2","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-RFFB2gpmFsbZVqdvz1isSJabXcHmNXd4/u7xk+keOW8H3s+m1hHEgRFbujwAS1M9cnw9qd3qMFg+RrPcVPR2+w==","shasum":"2c306bff4015526cd99d7fe9beb9f1c38736809e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.2.tgz","fileCount":480,"unpackedSize":1113450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDDZCRA9TVsSAnZWagAAVq8P/10DJ2mebkk4UcgHT1+H\nz0/0FXVnXXOOk5x4ZuVWf4G3/JUMyRsLcn1mGcHDzGGRLg2NE4UgzuNPQNlq\na19dde/IHSRyFET6+NqA8zPSTUo+++F4b88T+o31YrHIfMVmbqI2fAOs9mRK\nokQL5PSK0mNoM1U0a5tB16okKlSSa2RBkBxPVx9+p3vWyNXRUGGMzLcP82Ic\nJKUQZ7Z2dssQHbA2syfZOEAc+5m5Uq0MFvHXhDIFg/FIcxe6q+uop+0KTUKn\naW+nd1T+e7R2Vb6PMLaieCc2Mr2BVdPwZ8ZlZOwF0mc1XqVshAr9y3d2+dLc\nQY5/cOjQE387E+otQf0N9dISHSb+W/yJE7Dv3bgc1TG7hq9en02LDpn8+0Gs\nTrF3PgWipBR7LNgsNNJxy/WnVkty3APVvjWH+JX5OLpcqIGmDkME3lHxz9yR\nfAprqlipqgArVRWxNX6NqSiRC32X1NNjLHyd/KT3/vYRrl/YqbBIdXUIJFiT\nLtw8Eu7781Imc19ZUJv//b7lKATc90gdPu8Ajf84lL13iCtuk1CJ1si38ptB\npY7Gx1MiouMjZqJ4g5OAktDFEak3109U3CjIa1o5ukRrtQeL9IUR5BV5zyFc\nRZHnc+pXYw2Of33ohc3UaJfeIBZlgDfFGK6IAZH42o9cwAg9tjDwqGYxqICd\nTQoS\r\n=nUzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQo6wu4gJBVM1idFBaTKWxdi3RwfSB5Y07JEPMGkcD4AIgJH42rLGTiLOj2HxCElBjLzn/naOhVpe6WhENmwxaeGU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.2_1619013848586_0.6795602680051414"},"_hasShrinkwrap":false},"1.7.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6eae4c7427e747092a168d87e600b55f7e918b68","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-2IfJ4eTJ/6iXibte+tSYt3onwBsVxQOzON+BCJhhZwlxziWEuGGueja1FvBBJnoKgosFeXQ0i0CaHqt61knpRw==","shasum":"d9d296c6559c7e1a658a168519ffab6496b774de","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0.tgz","fileCount":480,"unpackedSize":1122878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggqq+CRA9TVsSAnZWagAAvXAP/3sg2ruJPPmhYQFNX52J\nGoCql/H8XulLvUU5KvbCAt3VeLjdQY6+2zbAi3ZjNAgrwIj3IZoRK3Z0e8DG\nunkkYz41Gz9fDRBF4rB096fe17/erYQJmfpaVyxu+WnH572SFKAoB12wZbJ9\njbSNcH1tor5pCaqGy8jCwYs4ILnJS0dLymcEHXQtPHcAhgUT7m9w21kOZgid\nsKUYTA3xdCio12AvWCObdLuxkiHm5PW8a2Foo5SHxG1wPNvyBZobh39ald5U\nniUtrT+iHxIPoNaEaa4dmRqXb0yj9fPO5Ya7euCf5WzrpQwqOnIV/ljE2E6X\nY/uJOZtftSxnaC0IWTPPWUjEDknHk6Cvor/wLASfo9zf32AG/7LowMGb5bdb\n83gAOXY1L1X6KC/xfHGvRpBP5Hrjqo2b3nLblfwuPLg6e5jYP/jjcxrhBLRF\nCBxlRcbVJ6VXKdNJK2JcngHi9IRjmd3fexa1OXWdVe9mHdOLy3YZvkwnqxPX\nnRZHuTi7+tojBqS0QKcqYggpvDCrwM39m0p0TUlmspwHgAllofS+rN3befLi\nW5qVo4us5gcUA+E3NVz3UHpvKL2HFpL0d2nczIP79gpM22Fl1ayDOOzmskgZ\ntSM72XV+4kwbFsU7luxYG0sesaLdZPjWhu1FJnEN46PfvdW2uE7oLR21HfZ4\nz4Ft\r\n=Ngum\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfrqqEz29pH6EUv4OqlkWtL7pkhWbacVaPoDYqpQXXBQIgdKBFBNa7xvJw591Y2NJIIZdEdfD5y0sU/3OqwOHHNFc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0_1619176125966_0.06691451268399007"},"_hasShrinkwrap":false},"1.7.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"35ee1b2021888b4100777b23c6cd7060a1acd818","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-IzcKfdDIrYpRvlC2JBjjkiD/pRcY/z/6IqjMFFVkitkCjikcdOvy5a8vM4WLHFWK+8DcwLKfSvoXPNqvoU5pog==","shasum":"71a2df2258a800d022fa7f7f291b5e55b7e71131","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0.tgz","fileCount":472,"unpackedSize":1090813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggq80CRA9TVsSAnZWagAAJJsP/iU4HXrhnwbF8EZh0ROD\n12Z/EspC/jpvRCh/hX5t+0DGTu/evDtFgvbOK2JM5ReJ1eUewCsQxyHf1jKf\n/jxPtozIy3cDeaWL0aFH9edH353K2jBjrn3OaFFnLTkBPy0hFBiNx/CKIVQR\n9EL/bH1QuaWtjHgf9Lx87CKikIxu4ZE30YgkbLZp4GcocMMHXq4bIbMF/y8i\nI4okFRcBbuIbPpuOSIEzfIXzg2RK8NFAV6PYOQCpJy9hfULGcuDidfqfDDEJ\njftOySHBrUU855PcgelouJFnLxyVEL4sb2vroNBDKl9IP/oj21HsTo/pyAC5\nf92E0H3eX9YedvT4fm0KFRQUwIQzUil+PEK2VsAHM2AcnJwpkkD3W2NWrRVN\nrFx3htjsjxX2iltub0iw61xVipujjtL5f//N634Ouv0RX2+42wpbS3weXjMH\nqF7GepXDX0YsBWRX/QFzq1ReorqYOIKBQaRIMnDG+GwiguQGQiF/gNfol1u2\nuFkVNFQSvsg51NbrCHhB1rcPkdlV9jVA7Dp1wLZkrcom3iLFc0p4aXPM89y6\nB5mO+BPAd5dNAsaq+wB3ROWu7PdX0Wl6vsUWdf8wHx2spnZdvBMa1I4DC7PO\ng9XuSmiINlhswgLfBed+7hsVdbB1E/K02Ga1yRze8YoKSHIPqtmi/v2Qf/nY\n2Ojf\r\n=OwDh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa2z5xQLy4asp7qWBgS4sP/RGHXfhSQ7MWzTkzk5TDIwIgfy/kSJxlj3pjFEnYqya+NF5Q8EQF3rWSpTKFYL/FUZM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0_1619177267876_0.9331350025827834"},"_hasShrinkwrap":false},"1.7.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1f3d56265ec0407de9b3e1ceb46baa26dc79533b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-f4SwN7I6ZWc1JiyE0R4R6+7MIvoV3HDEkxnuDEsFYVpbTBMrMBWoUFU0iG0No4Vo3vASkPvzcSmU+7V1Q/ZjCA==","shasum":"1e594c446c88357a591516cf49082163891215ab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0.tgz","fileCount":472,"unpackedSize":1090813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggrI1CRA9TVsSAnZWagAAXEIQAI0u3wj5obOWX3b0weyb\nTomhIUFzffhZ5SovkN7mh2elpfFfjEE720ffMLHOWYoGfQuVAk6QZqy8TpaC\npd9pOltlZONVg8DOb3NhiWKNKxZNK5locIq/S+NoVaIpWgfeC9xELfWCuh81\nDmTyq8LimLRX38dUQm4Tf2mJrERjVAcB7BuIKFpemp/F0C5gZoG8ObiAR9yF\n5NKeBOAQLIsy0EMpGknRa2afNeHipMjO4/SkeVrUnHkYk3qR7H91Kn9RUev5\nObViVZMp3o4xDuVcY2Taqqy26H8/nhGqgC12TxHjEtZajJNT9qhOZc9YWrBH\n/HTQFrmNUVufQFfwlchjeh/S4WWOH3nO4t3aS0eOd89V9cJP9MBmqzCbr2Dt\nyHJ93Ny+BWjkc0IFEMdSD5ktpDb4cOZntij1+NBesihBl5uhdMbrbWYH1Iez\nxih+ksdd2Hn3NO5RLxk7X9Py5rNXZYV2QsJNW9SRWByFA3u0dw/LEFbV3yu7\nQ8r2Fx8XTrhcpQYXt3huZc9LEREyKv8/nPxthCJjZDNAdW+HomTwHAfh9TT3\nvwFLDGSepTFbRNmPJ3qeUgZoianp1IbibOwAMHUiQpDLM4csYtD5ByOXtz80\nO3ZyV/4RkTuz6Q27jYqcdVizClklGG8v5ut557iqx4jGf6tsM27OZymfzdQP\n8Yq2\r\n=fnh5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJOhpQNnYCWcWVjAmbLhAhiSW4bPoPK2Q+2YkZpNPDeQIgEdIxiaVGiADcjm32XVXX2vX6PBjpBjn0f9jigx4/U8E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0_1619178037016_0.532443938187787"},"_hasShrinkwrap":false},"1.7.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"35fc7482fc70e886622b20758deb3165b5e96ab8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-o/n8EEp07Q6y1Cdy4YJmh2MQm3ObnEYRKSVtKa9BTAFcxZKTEsb6bqxSmMBWvFWFHVEpyByGUTaWfShrPwJB2A==","shasum":"f831b938683c066db2101604bd37e31a149e0ab7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0.tgz","fileCount":480,"unpackedSize":1115692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgguBrCRA9TVsSAnZWagAAESwP/2VOyFmKqSE7jUEfFVzc\nMFLppi6mvgncHyYpSL6Gg8j2j/lAt6u5zQey4miolWnueSuF4Pydiqns97f6\nEq0HhWgtWlFia7WgSIJN5mWBAICchHKXMTn3P/i53wjJot4j2YWCFgmnnzh6\nZVrlzLN68EZM+LXc7nY+JMNVfxiROgVZc5KnLq1qSBdELGe//5CR9EjNKfZy\nfob0/q2o9pZ8NeC+x4hnt9YWikB0/TOJ+AaSY1Hhan2Mf63cxLByl9uyg9KL\n1T5Kem8U5AOXZ82qUbfjk2Byh1a051OiMJI0yGBZo10n+mYNZWivB8bX3MxM\naTdSKn+7GNtAVEG9AhfP7Iz0PHHCekn6DmznR/A7vefyqV/8RPSQDPqVbspy\nP3/+TWnApJN8qqy8Zdu82kZr4U/E1TjyxCoAIhgoj5X7QqqSAETv7VA5QIub\n0wPKTDKmP52Ik8p6NUgEnUvMYFYDabhyf2GSAC21NeoOqLr0VCXdSvqSOm0g\nW8trheGkLNDNcLDQAGMdzlYVYEosW4EkVxenOhr0WEXaQd4+kQoiaxZgn53e\nChKSzB6Bd4q2RZD302wvoW39c6VZ8A4hXpezpRYrNwAlex5LiLq1vXvh1pQH\nl4ZtZ4a3uGs+zzQWiIJj+JBw4Vyebx2iuzqIF6MICKn/W4fz8TcPgl7oQMVt\nj0yt\r\n=Lr9o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgQ5toLzfZqTfxivz5rcFQJHIDeBUG65vxfnT+kkhukAiEA2iqqN0gY3klxja7dusenF0LPZ6b6KVYE+NtMB0xhXyc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0_1619189867053_0.09345664963223088"},"_hasShrinkwrap":false},"1.7.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ExDhUD9Z8tk7PIW4i4GkMLaRmdcCe4mjJ3RWW+jv5L+dV3fgDQOW1m5w6JHpUrbcBmNH105n8ZtPQu/EHRP1kA==","shasum":"12edd44b474927d5e8ac4b86f3da427a4de9274e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0.tgz","fileCount":472,"unpackedSize":1090813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgguDeCRA9TVsSAnZWagAAfBIQAIqNNBRbdp7cRNzFT+oy\nQzj3PUD3BcfrpMZbj8f3xCYAX3mV3TfHlXyNLzN311l0+L3WIqqstn0c9co2\nQ9caOSu3f+PAeKXOLo3X8nj+rOIEKaAOMo2RsyNMvKCelSAjo9Zyqi7UfAA9\nX+7i0V/iq/nI2dOadNqX2Ru0GHBocVuhK8sqaghi3FEHax24v5f1Ol48Ylpj\n8nZPfZpRMnNZjHqjzX8pmJSfNOjY0p42HuzJiPOfgcqBcGzscnOC5KHhydX3\nmHpHJV6dqHAFdPjSyDpkTj16FX+yUtReACiDOltg0iXw5mmeB1zAGSIi239c\nloXxkH3adwCoWeZ2QDr1L76LD7WhubFpdeGDjXiu4VLZmgwn+2l5QlC6i96Q\nZ5nz2PWV+Fc3Eu6Sepks2/nUb2k8viu+x8zv5fAR1LRZSilrQfdb6Q9Cojit\nR/5ymq8Qkf/88KIHS0/2FkWXHysHcsjrZ6XU9qb0NeUJ+i7xL+wODx/Cgyin\nD60xLHIUB/uhHa/2QPUlWLZjv18SEBqzS1Fb1Hl7BRMaoVqzY6IxDzy1NeFh\nwoGw7wh8X8ec1bgr9Bu1Z0nUF8EZiLlatyLUZ0tGIIwHDOJNhf8n2f4nAgS8\nx6zqSGz8llsHUUF15UFRbBUqOaJon2ct1SGzEHAdTs4Hu2ysMFvHldD9zSp1\nwrHb\r\n=iAUA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeptELbfUl0tHvpbQG5nQV3+rvHGKmo4Y5mPCv/HibCQIgD8T/PJ361VCIkrR4fJ4hiqs/ySKiEQD+wxHsou2xjh8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0_1619189982212_0.12272824056610454"},"_hasShrinkwrap":false},"1.7.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ef56e7d6e667a38661b000fa484d231ead0838e8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-tt5/sXUzudnIZMCNFB05DEQQzqqYQyK9+LO/tePbOpWnN+y1GYaYFP6Y2hxtTrcVmkn31+wFEwxGqLHyJWMzzg==","shasum":"cdf4ab0e2e2b2ec39c419c437f05f00bb1746f5b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0.tgz","fileCount":480,"unpackedSize":1115692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg+IxCRA9TVsSAnZWagAAz8gP+gN/RFEXy5VhrzVGzOjK\nvpXz8PJhwx733+CyQ/Bou5GHndHAtHg7keBHrFgg/b1e4a19LCrRkP/PSyyl\nVIZi4rYZ6SnQ2kPnLm1TQ0fe9VBJi+L38A6MOjvHsXAzOneQhHybxn1QraHt\nx8XOpWNQwWWMY3viwajxjBNjBiwOaAwAtjiTj+0XfBbmCkKTsqvi0/ulXTZj\nzftbJbEqZiU6b90Qtf0Qe9t99k9qmkkYSXmnha5ZymnuNNleEUVf651TDlPF\n2WrACUrKuY+rrLB2jNz7Vp7h9l2a1+OxS1GNUZOF8gdrosyxlSqPfuHP3Uzu\nJkRY3aAXKASVgW3IkLZ8gXoSS7tdKvyPrytT675iEQui6sTv7s1vOKluDM78\noTJ8hotgt/FYV0pMjV4mTDIFq2CPsfk2ui7l3kEi4nYgq0gSNqw89Tgx0+Ki\nVtDpTg4AsG/p8wSWT7s0k8wqwIk1N0ZTMtmhJQJ/+kLfGC0szXB+zHXcYwT4\nG8OyXHGzirDh31a5MLM+wZyo0ZXbUuIMIlJiVKMiZQ70TE1W56rQzKTnBUg2\nbBK9PmkQGW5CYAzai+UDdteLwPDdiDXwsLAKp/R6D12plQ4iYBjDiTv9Z81b\n9XmTihYmKDDhGgb7GWGQY7UvXOu0Damv3U4eRRxJRV1evsWwYvn3BGj8Pz56\nCOai\r\n=ZkRQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPVmZ4PZzjupZgT2JULzJ7o503eAwxARviCR9gcdxbXAiEAqYYeQoLFbe33a9tNcF/nj4+dU3nMBQnI0Q5BRgFS5OU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0_1619255857281_0.5283258549781997"},"_hasShrinkwrap":false},"1.7.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4ade00bb8b178edaa69e08f8a70822c9ee5860db","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DVdnpOtSui/hdD46ppDHsHvniUl2pforHuKk7vuzgFQ1Cihm4+A8Jk1KdCXurHf+U6y8TbBg4RipEySJrI/X2A==","shasum":"3ea987be15c95f4237bac5adbcd62dff92c2d50c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0.tgz","fileCount":480,"unpackedSize":1115692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghoMJCRA9TVsSAnZWagAA7yQQAKUObFXeaCaO23SzyAW8\nD2N74HqDbM444BH9wt0UPdr3C01er+GBnI/lY69v09STpcQ3cnMFibkfcI9F\nVRC9v/F6OGvgxz7+lW8Ot5S3I8kfxwjSixwn8fQbBwMnBWDrl9Irc06NA+Zj\nd6QghkJASOkc6I2ip3nxfCtx7ECQaKmkEcpTYjlqU4EV4f6vx/1Z/sueKNKP\n3O/DMcr0hlBhfjEnqK7ABkOYMrSPZ4UnljSN7MHg9hQmKD317/1q53iBnPiR\n/DogPspCgbeFP2mhOIrP86IukiugB62WuBjrSG7GSk7wNcS32lEBpHYwRRC5\ny9FT7bEKsUdlFnEAaCFBTZJ1nH1+2Ta/VsWDKTYi+9omxCQ+nH2306q0e80H\nqWjt7VcvgmyLBaVnJftMngI/y27Exbzia5cMV3ldjInFwrm7ONGoXQyNWhW1\noYEdUehYCj1R/xl6rIfCqtO/KZxxgDVwVjEAh5ozziu9zEyMCjW/cylDRNxs\nMNmPG7zcu3+fo4UiYoql8IYswi3Ezy92kxp7oCepcrm/TTCp41c4gJWbiQTp\nKycuf2rhm2eUmHZgctjNFEYtyxnDua9itIZh8HKZTBmOfEiXHUotOA2sVosv\n3Y4iuVtXzbdqiv7Vmj4LNEy6DKHUX3VGlvoeYl9picIc3GoKGz5uo92ojaQn\nMpiH\r\n=1Pgx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjJzRwchUJit6x8cel3KEqM2zhcRWvFxIWuldZf+ECOAiEA7vW3DTWyoitSlqFrJ6XwlWBKDJ5jL9soEB0FUlGIxrQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0_1619428104488_0.8014626519758801"},"_hasShrinkwrap":false},"1.7.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a908d3b11398dff70a2043b4a5debd8ab339f247","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Do+iu/r4vPvP5r542NmHAMxQk7mjUjzAXeZGkyYlO1lHsfyuC4Y+FRwqeneq3QK1i9qmPqod2/OKxQw9AWB3Nw==","shasum":"dd38d095efd95eabe0d752fb27b1164e465a251b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0.tgz","fileCount":480,"unpackedSize":1115692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghoiQCRA9TVsSAnZWagAAyDoP+QGpnZib+08UKHAoZutk\nYbvq9n/Gzou4ERij6LEX7EI/FG3gRQPtHy1c1w1sTsvSE1is8peTA1ks+RYX\nkTextXi2aiNfopK0Q+rMKFSlTqEqZYs7RelzgZEEv9hdbQfJekbFIj5Abj+x\nG7JNMfyC8c1umbQX1lRy2s2ffahb37HUTw7/f3Ufjc+a1OHKzI5gp+c89XAG\nDOo7EOVm964a+lCpmia7/6kIZYvYoMgXVuSW6KJK5dIf4szbuLM1PnaUjumi\nJ2BCKhdvWzzgdgu7JH8zsP9VKcS23i7Qax14e1D2xYVLthU1dkoOQHdtrHqb\nWNtbwOfkA+n0sjMLlq/h5sealRyq0mougtzLdqC5N5SsYv1FWKRqWwBaerio\nxmm2VS9/Nf+MuvlGZzqS7dF4TEuPgYKLVHg5UmbowXAXUro0NlYkF1C7veXb\nP2IEHUFRMv9YuTFHlSfZRONbT5RYWXtPiu6XnNHyFjFO6i1rnH1aCQMv6uNE\nCiebWLRk43UFRpjRC72k09FsxHNooDxkX3R5ciakH/wYGeUcVvjREJCdMfMF\nbuuyJTaJwGbKP3odTevfnJ0J5c2V8xXd9EYFuUVYq4L1WL+F24/FuTqcfWNO\nnBxv1C+2RXe5Z/8y7e39N7eNkbREiaFhIStXoNuZXD9jgd6AAXBr/2/6AXW8\ntPtp\r\n=WRvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN4vOgL5gS8l3d0JkqTZBpnmGUi8Bupp+dTJsC5xgeFwIgY0isg4SUJxwnz3f2ReUy4Qgos/S3+0rhCXSJfi0d+Hs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0_1619429520269_0.23583377609812528"},"_hasShrinkwrap":false},"1.7.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1ea4731f10c59c5f50f58dc013b999bf1a83b5fb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Eoyns4US+5gry3qXGQOssyvfRxHj3JunKzjlhep+lLIwxYodVac99A+LdNlMPQva5EdhSuNCKDzVdgdjQN7JiA==","shasum":"723a4cdd2dbaf1797e2208c2b56baa3dcbb07648","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0.tgz","fileCount":480,"unpackedSize":1115692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghotpCRA9TVsSAnZWagAA08cP/3OUm3jZYKYkS3RHJqmT\nSXOm8C9/XMDrFHdLEmHjvOtvtmww2nY0mWDWaQWbQAbjGyQMGl9dzYDkVpV/\nNh1PDjRNdcewPbhYGSYfXn2o+5rIqPOQHP8A+iY0YATmqyh12BbCnetLhP7O\nJMqBZTGsDiVijetL/o8gwYPsSOZVplyPpSuVPm7TukVXz+eZHgqk8V7JMFmA\n586QqJPEuenAfZ90wEUKO5RdyogFAkO27gfztdwWu1Sm29h3PR1D8gshqpWg\ntZIpjaEyaRp3gnGBOx0jF8wo7ofgpivUeEP6Cbw1ZPLh6a3szxTkTSB2ZcKU\nm1St5P6/ncB/OzRM1uh3VaR5jzCkeiiNHD/t4Letsn2kzoMleDfdsGaty7nA\nhPzjuCpxcccQXFcxESq0NK2Poi5JL9xWoHdYim07Xn0Gedpos0nPri/47ey4\n2sx5XQdPt+tvdZnxmRQqOUX8GmFHWgzLewYDO31YlGWvxYCBoXS7+rd6ckfc\nOWY+hBHn9wTBNPUQ9buntWU8PHOXLbL579+CEuF0giscJTvOuTQev0rx2gaR\nvegaFqZ+U6Hn0ZrJ+dE+UOwrGUnm/5FQFn9MictWEGFf6465ScDfD5mMm/91\neb5PfbPZKsxMQ8af4AWcMSuZjQCyIW1zjtRlVatKT4qt5Ap9tQ1XdCirc8yW\nhJRm\r\n=rRqN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgCPF0NZF1q7Fi23iEJnDyh2PbwcAXWiyokhKt6bdm/AiEA5koplheCGMDNdI+qc7dnWyQ91auenHLAPXFtBHAsLbg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0_1619430248617_0.8796103664272927"},"_hasShrinkwrap":false},"1.7.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"86357035cefdc58216109e4b2fefa283c4002f50","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-9b0PEszRsdl9Fv1Brmuk7Yvqd6F42nyF+t7GIQ6OgnpLPb1j9iJqGPVeIFLxND3uJJurDIEazwIjOc9WcKgZrQ==","shasum":"4d5d5823baa18502f5590df80b475a9643399f73","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0.tgz","fileCount":480,"unpackedSize":1115692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghsPsCRA9TVsSAnZWagAA/esP/1K/cbXYOdlccKLTtso7\nEUVW1qmtVo6R6bJZdlGAhqbBSx3iR1D9BQuI9pMEeEiVGlR4VBXX9UzOAJcM\n//c+QUeJqISFxByN3/otn8A1woJDKH0AEB4NGkBa4pczwBGOqqrIBYQp1DgY\nk2Ko/xaXB3365rAHMzO/bolzxXRu39liC3JH8EGRN3Q4NtexFh3nXeCyNMJE\nERkQsCBicJx5HI+cD5NqQuE27s/bpM5wmXgxJYFVoVaMoi3R3ATth5NAYTlN\n0s/HvYNkZSUfrH8DoFD6imVvFBPGsiGm6ncpHfcrvggjakaNARV2Z0Sto8kK\n2AVVxso/AIu60jneKfW9XeRtFXRIN9fkLsEEOBNkeS3MVd0ePa9RQfezAUNB\nFqWojM/oc76rLN5/2Igrrk9ThsDg9FzJblqeFJtyxw2EAA7nX2jq2zSkJUAD\nNwEttW80a4KdOxKNO7trFuHjhuGuOVqsgfo4bVNCAV/dihHHcc+UQkTBBVXe\nxBtPjKw0/fZnP82bunPHns/3dDDmuS1WWGMWVi+ZAqLvuTqlt9iv1G429p7o\n2PEloPCqURc0+r/Sab+c5tQsp0XT59Upu1G+kJVb+/Q3jk2sd9ZGePDZ9J3l\nJDgHb67MzSBsVsJtdoaZNB17XlTLzymR8n4yQ5azeRr1P3Sru5vwH7D6U/8m\nwuAO\r\n=Ktbl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMes6R8JrH9r9wBFpJf5FMcEOIZo7rc2HyaebTHbyq5AiEA1T9el1zy/WgllgsbqXtQlWJh+2bOyxrxHbgbmhkI70I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0_1619444715549_0.5361400531404554"},"_hasShrinkwrap":false},"1.7.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DdyfTpO/J4UYR/5JQhsnOjFWYZKgJanuF5M4CeEIgknjHTJZlN+HUcIxc0hjWz55KcNIPsImAtfZJ6+fQBD4Wg==","shasum":"fb7691c7e34043ba4a87e275da55a69d8fa61b35","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0.tgz","fileCount":480,"unpackedSize":1115692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8oeCRA9TVsSAnZWagAARwMP/RG4yo+2A/+mmguq4Z43\nn2/qlF+mV2IbWnNZZRcloVANnSoE51qFvG7+8JFo9p34aefvt850uCM+iKcH\n/i8nuMH/YYKoDBOFztNbVwekh1cfcVm4RBVOqNVOwAxjMkElLU8z0m/M73JD\nrr/QaHXeUbneOkdqbLkfRrGFieg5kpjUajDKGMpG8jrfPXJGZq6GxVBmuWS2\nhlANa+8Ou667K/GaQ6Vl0WnrtMI0rptuAqmgKqMgc5YFi0mKalVVpzJclgXQ\nvQ/z6GR6pAYVub7Fkzv8J1RJOagJ2HHFc/W5Xv+T7TTEjpBvNzGkb3ja/HNF\nZwZyenRs8T/layx/ujWVzC5BubmWmBk2dwTEE7Pmg58Y4I6KN8PUtUyZmehx\nMyao8OTaHEEgaGroKj0CcVDGqxDAwFUYpE9lL4lYSS0ofhq28wpkcMH5Si/c\nopXnD1xhm2cfGsQ+Gsm7CmN+kVk43H+0WYPepbr+rO8O9rfafD4niimcbmPS\n6H9H/6y67rXZ5dKd33FZjxHp1hj/ZWahCDU2QOh8Ng01JiG3Fpb/Ic/KHuwl\nIQS9spO8D3mxwKDSMurPSQxsGI2bYGRpqeJG75bOXKO0Cc9dlWPmlVLlrYH8\nKky0wtx7XFdn8BqhRa9Dk4heSndclSFSweb1LPEjuONMMBzaU6nYh5SuPioM\nzyRR\r\n=5y77\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICknQ3vPOz83wzx2t192sLnFN0QODnH2rAhf4EC4RvwsAiBkw1MFOQd13rj8SItz8UAORMBGpbzchAo1MQRA+zUbxA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0_1619511837689_0.7550941946675522"},"_hasShrinkwrap":false},"1.7.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","@sberdevices/plasma-tokens":"1.2.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c41df8e1125f562e60e45f2533956409bb88fad5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-zRNkZr/Rrhzgy4Siw7ljmptvfEdBO8954+IdbtOghhpGPl8v4xIIiag6qsz1wsstVzFhOvy4HNcWhtitmbW+ig==","shasum":"3bee2111a84f05b429c6f6a95cf2179e3ddda875","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0.tgz","fileCount":480,"unpackedSize":1115746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh9JkCRA9TVsSAnZWagAAAWEP/iNzkLiyyp5GqE2qrl+B\na1Fxdz75Ix8DIKtapz0GRBDXZdoX7RVqqkLmAcsMXdfP3+z5+JMAXpyDPpgF\nfJ9IFbjwIw58Qj+5m/etVtZQM7sWHXAhcfflxhSvaC/CGyM457ORoqw/Gxq5\ntsBCCIQq8JEHSKAFiEhQX8awMar1BfBBSqTHu4mXWEDoUXQEFeiZwPvIeAMS\nLJnI2cBT6dUUmAjwge7NrUACfw3J3llpKcJN6X+SkTXTgA4OFeySFNH/cyMe\nYkBa6Xv+b3LwYHWiRORcIH3oR2J3DHEq8wS9le01iW+iB5B0EgTFBl2W6eUT\nNaUAwdTnUO+85V/+v0hAo16aQN5x/stLR7sIC5GTntMBhjgmUm2kNJgP9mTf\n7ImfRgR/Pa4sW3aJiPZdni0SGiYaKNzR8iTbIRbvN3fEc72+weN9K9C1t/Ed\ncCvBVHvQAJQMTGd5fLdtIC+dxQL3U67bwlDB8iSw2Zy+BczKhZE9f3hzvHlH\ntwbQQnTnlUEOLIx8jcJMwe3f8NkHsuNi4ImglPJGXA/OOuI2Eo1/fAV60c0h\n9+sAxTg8EiJYAvigBspbkV8D3uTVZLj6oOvG+hur+CT/HcYk16o87BQZe6Ge\njaYoTD8NbRXmVdOrCWRSGoPfGNdq0Bx3RNhw9KZEDEnQOCaQhRYA3QzVDbJi\nakYM\r\n=MDAK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACYfH4Nmf5JfeKtm5YqxSX5SeTZUFFXwetCdV6Tgu56AiEAmL75AqBX3ojbWAlDo7ybvDzEW860Rmez5sU+B3jvT4Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0_1619513956012_0.6864383549031103"},"_hasShrinkwrap":false},"1.6.3":{"name":"@sberdevices/plasma-ui","version":"1.6.3","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.1","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c5885c9b0664d9a970d8d6382c360e9c2f4370d7","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.6.3","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-JtNCv3fUkitsOYknvgmc5cXNjfBzJxOS46sMfHl6QgT7NeqryDp3JQGeugBcuJgcxiXZbk42kBsTnntt8/cw6Q==","shasum":"982a4fb14f13ceb3fb60ef895474d1f154ec881f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.6.3.tgz","fileCount":480,"unpackedSize":1116030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh+ZWCRA9TVsSAnZWagAAmYsP/0ogQ72XkFpFENR5hzBI\ntvfE0wDgkEVIf/JxTunMotM78yag57237EBXrG7+TfkhDed/8864Z547wZ/E\nwbfNPbfBQM91FpsRjpQq/8xOuv5lyamA9hwXzf31RPSauRJwCAVOrK2IOUVc\n8Q1lV/FGyUQiJRb3DIsaZqfp78/I6HZQyCOwmzHvt3DlD4zzCtpKABorJyPE\nsiDnFuR8gm843zL1FSeg4z49ykv9rSwesSRNZ38D76SnBtocrD72rJ9Dd80L\nGsTpc+kTx0yRHeaLb69KBEeQQG1AW/Qv3HyGMVcB1QGmnClF5+4UvvydHn+p\noq/zQjqENmyqETfpOfCcMm/SVfeGqVMb7vZWPTwWHYSsLtAtfO0afA1aRnsA\npVTCf8y+L6DqQElmaU1x8VMZ3qsGZPXgjioFqlX6LFXkEIipROIVXfd1ibRy\ngfHC/Ze8/F8WMAK4XC940ZBoUyTjwTy6H8GQjItJZi/PxiEP51hXRgOG1gLH\nRn7fI6i7hq0LTHVUVx6s8hiYBoGjRCn8OWJZAQeF75Ady9FOqiIJ10YC+Dep\n6SSDaggdtMUEofWoz4AoLVGH1ocpkD4uNawBz70EVd5gGsfEeTZ3rHQSxXGc\nvFYyXudNDrj+l6ZOszb0OoPtUauQyLWVEZRIw6fFhBO9+c/Kmm2KXGlPEnJ9\nCyGN\r\n=/xhc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFsTSrn8hQRO7eo/641FMr2sH6RBQ1KryZ/Vh9lDx9LgIgde+Lwi0eo5jMGFX5DZaDyTCCsFf4te6dA1OqlYMn85o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.6.3_1619519061759_0.592291679922895"},"_hasShrinkwrap":false},"1.7.0-canary.317.150cca2526f36b9764c447bd9f19bc1e7ca436a8.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.317.150cca2526f36b9764c447bd9f19bc1e7ca436a8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.4.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.4.1","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"150cca2526f36b9764c447bd9f19bc1e7ca436a8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.317.150cca2526f36b9764c447bd9f19bc1e7ca436a8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-eBsVs71y2rGrTefzNeRdIkr8RmeOa8hnRECgaZM+HcSKa8A/wxls1NTVAx+IuqtZRvY6TJxU8vMWGz0HeFy09w==","shasum":"661042196ce212e3e7ecc8fcbdc29efe8b782286","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.317.150cca2526f36b9764c447bd9f19bc1e7ca436a8.0.tgz","fileCount":480,"unpackedSize":1125345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiBDDCRA9TVsSAnZWagAAHQYP/i7kd1Zj+qIJuBu4L4e0\n5eBAohSigdXZ1BYjNecJoNH2P2Vz81uCnO5z3EjKxh2NXDXcN1WTLzyatud5\nKfHfQQGYxWMn5acrrxRSup0L8ilP6/UNeCWH6kYDo9ixbkZymNVUQqj3CIGd\nLZBzhUDRhsZyYK7tRuihv3HAX77x7dgBrhV5h39JFHrKfDzXKCJ0IB18h9uh\neiqce3jKuJQ1pH6zCyr488sVBD4T+JdFP95Df2UWVNAvgFP7y+aFOawIXovd\nQga+GtqnnfeLWeX93PksHRq0Ff7M2l4leb7/V6VMkIJeXARlw5BqJLb0fqgD\nXYP8Xs1NctO3CIwnqw68C6m6wO+ScFTaTpP3z/jYK/S5tD3rNWLh/jb9lAhX\ntWvuIsjEYl/XnJUx8rUYPsz2lflntVrXC3cgAiu9lF8hosJ27YO0uI8JABqf\nnIKU7saVn7LtGv0YW5oKNPQ1MZLGr6uaVO4uSliid4Hy7VTQKvE2W1ve/yIF\nk75DsxmP9XAFX8hrmldD6OmdyfB4pAO8lgGCkr+nfgeiSHcf+Ae039rZueBw\nVMBcpMeVbnbB6L8A/UmYzQYV8x8WnRi/hRMHQTjrSw9rsWBUNDgvBmPV/V+u\n6zLD3mbVh7iSJUeEa1yxXxVVZ1clv6jLXg8KeaYXlM+7DXuFobyx95yVr/1x\nZvkZ\r\n=XniZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsbBY07BKGpvkq/0lNixOLCcMmYh+PIJNuWRDNVtK1kAiEAlQnRAv6/RixRk3KQUd0BvxEBzlbJxd2Kr1WPQ/aez1Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.317.150cca2526f36b9764c447bd9f19bc1e7ca436a8.0_1619529922962_0.8368663078621397"},"_hasShrinkwrap":false},"1.7.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"65a18d98d0bfd4b12062519df244b3c42c48abb3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-emysnV08enqpxBBXEPM680fdsRg1lGK1Akd7jHgaEKzHto7voezhbeLI+uBVvA+9wqcUffPvZvnerQBvOyljQg==","shasum":"9116feb58e8697eb9efdddcd66c87db3ff105ed8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0.tgz","fileCount":480,"unpackedSize":1116192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiBkJCRA9TVsSAnZWagAAwLcP/3m7toJBisCH/Vfs0dIC\n1jaR6MM7i+v1m5GiEfsdUzjM3Ol03N2Tx/KuFwCbFdQFStKD3NKXshY5avAM\nDFL//pqKNWRA7RdkGgalW0Ec/+NMpGe4JSrt6EqGg4DL88S5BlVeQu8nGOA9\nmIPBWePvysKRIaJYhQ98ftz5A48y0h9zAZ9OIUr9zBJRCbXk2LlshAGlUkGB\n1BvSjALHveO7iYGK1S7V7xHoYOgbYSTQgQmD+ED07o1SCScEP9AzatJf22Ot\naYJ+TsxySNX4Sl7cNpcBDr677Z4EdRUjneBXR71XMNPdp6jtRaV1Y1UNqLIt\n1C1muAWu+yq7pkp2yiFt+yrDkTA8tdw6c4nOpYn1/1cX5EWgo+9DDOjy0oKN\n9EJvwc2G/TtYpG9mzpElxN89FvPNJawnzipH2KTcmdr0v5KNWgaKfBSotNpF\npsrREZ4WMCYZtv53D7JDYVuhYXITLYS8MTNizycCwvYBMClHGHGaoOlKQ7pi\nFXdOihyN8MO43FxCTFrKLFaWP21jmRrSQxcgQ3jS1O1XqX2XvKD5c280GLui\nGh4lgfii9toThgekRrBXLnYvFUtxPNlDYKjhIRnc1yAxOpEYgVDM1NE32x/j\nKDq1PS/0qPT7377WjuEewy66ek5iXviUF5u8V5NnNiWvNqSbdRFr7tZKiauU\n0+UH\r\n=Ixwz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsq5224b80Z36yF9eW40MzamXz/d2sMrQhddPFyDknBwIhAIHGMK5veeNETWchBKuLJG8PJ7DxReQFa1BWdqTyI7Sx"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0_1619532040978_0.9737617637142706"},"_hasShrinkwrap":false},"1.7.0":{"name":"@sberdevices/plasma-ui","version":"1.7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"45fa2b9714bcf822bae2add04cbd6ee76d12e902","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-JtRvj2J44KncViOrCq3e+K+b8RarlrTyYVG+w5DG6hjFT12Nn+uHYn8FGj5n0N5lxfCaJm/VTj0K/EIMjyB8nw==","shasum":"63a9bd12fcdc794edaed644cfeaf875dbfc224a2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.7.0.tgz","fileCount":480,"unpackedSize":1116030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiBwLCRA9TVsSAnZWagAAHPsP/iyK0UbItL9tCDYHxm+B\nHiO8PildIfRY545d2/yOLr/NHWHz1XctXAeWEEpUXPTs/vXY3Us1pHIUO7av\nlNUoRj1kZFuaWfwt/h6mdvYxnfsU6Y79BIb1zCZ1TTP+/wL7ShWNlbyEYHgl\nihhqG7BR58HoaDbgg04pz0IDQPHsOcA8ElceSm4vBWdlKr7jSe3UGbOryULo\nOYMKa19WUiSLRc7j5bpPcMyMxcbxl6j/vb56VpIQj0OwLw3VGdLq4TGjTmdN\ndFDWv/9Ft7QIt28mVz4ohEZ1bk7i4Xk+iDZjdfh1BrSzk9FFnsE7ZEqguccU\nt3QRoQLvVawopyvuQuvFFLfrMfTlgFzKKOPM/ENW9bDst0zyz3FXSXOXBhGd\nE3AChyItnUtWYBMcLZ3qUAUqj2mja2bxdFJndM1H/McJHQEMDIWZzh0oyLGo\nYDqtziNfLaTxHaSe3ZNTSUmrstNVNmliOtMVWXM1m6E3rSPNIKXjx5wzWY6Q\nWyhpA35f5jbhWtXY6zLLU9+o7AWCHPPzQ8FHFRWBhimd45jOD+v3w6X10CFH\nRRTj0TtzWjU0jFUy2xhYqOj0vFVwmVGR8zwlRu3PYTEFajbSNgS1+bSFMoM9\ny0Tz4fKZ4sdgTD3rY1WeW2wWXjBgAYJ3WQcju6OHVvPFk3JO7yLXRv8L2V4C\nwgsd\r\n=g6NC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBc+59WKue1DUEN0VmU2bzJdFLRTF5ZlfZbBHKZNHVmAiAQ3kL4cShKpyaJLdfY8m0BVfAXg2rKLcI4MVQTSKBA4A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.7.0_1619532810640_0.40840789893147766"},"_hasShrinkwrap":false},"1.8.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0":{"name":"@sberdevices/plasma-ui","version":"1.8.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0","@sberdevices/plasma-tokens":"1.2.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fff02555ddc6c69161b041253e120a32ce3d8d81","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-y/zEBQVLoWfzI57YdAft4jfnrkZF5h3vpyYSNKg3IshFTildZswivxRHBxDQZYH5U3Oj9vrpBQN+KHVcgynlkA==","shasum":"9604fea269fe76d835cf448193fe52b4d71e593e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0.tgz","fileCount":480,"unpackedSize":1116138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiR7pCRA9TVsSAnZWagAAkVkP/innLQK57qgs8L3SDYnx\nAg/JDe1GUqAPjUP8ALM5XQjn3u/0g5AQYCy/GOZAaeyM9wTrPBCmJc0SLaUa\nbImmNB5fHzsv/mWy446wMYZ1iM0yk6+Q8yDxEp9V1HaQU5wbqMm+Vos7XbGv\nYpHz6f43UHszWQwYFaBeGFAYBGvW7JYee9fum/I55Kg+s/VmSu8Aew2XwjXD\nZtBwuJuclddi6qGwwKrcSDvDQTWzpKHEhPWTxYnW8ay9zQla4wVfTWMtfW+c\nwo9hlipZ+pm05yfq0Ddc9zV2lzD/hyfnYHFGW/FT8Ml01C+XYOs4f3Pevczp\nfBoXE2hG6boULgS3+TnFkmzY9mrorpJdFTEuFtICZm++D2yLLEW2+Sj9MgTq\nAY7PL/11ub0O7QQCXlsdldPXfMCppIRhXNe66HJa42b+fxCUuHr2eEBf4hyY\n6qo2wErIP0pP+rtOqxHSnNlatd6nOEVgryGutmiK270ev0CG6AxzyrChbBf1\n/HCY3v643/pKZNWEyNhy0jAJLsAiP83KT2MW8oWZ6ZFP3MYFp/rH+T25Tr3Z\nieBWTmKLVMQ3Bc/VdBrmGfF/H6fLKTDiEik3qqNmJXKffZI02LMRoKrnXAC7\nU9zZC3kgEc+dFrFKqVJRlpFJWQj/byKRgPCm4WIj4ajQIjqkNTrnPMca7yom\nKYqA\r\n=SIXH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHt7vFTIynjS0aoCV/JXl53ns1c92ckX8RL667B+T1quAiEAhiGscUtJ8T+FjcVchYcyRTVTIxRq+A1R7IuIfbONQCk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0_1619599080848_0.5010999639389182"},"_hasShrinkwrap":false},"1.8.0-canary.317.1dea61635e8caeb592d9eb136da780ce2fcd4704.0":{"name":"@sberdevices/plasma-ui","version":"1.8.0-canary.317.1dea61635e8caeb592d9eb136da780ce2fcd4704.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1dea61635e8caeb592d9eb136da780ce2fcd4704","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.0-canary.317.1dea61635e8caeb592d9eb136da780ce2fcd4704.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-g11yeJ8hUSgK78OrSWJ64BSIjlZwQv1SVummBsHT3yXp9UWYguXSZBrfUWDjJ/uXYbtLgeRnvyXzh84CxkfCnw==","shasum":"7446b8aa990571f9e8526c654d11b74180c9976d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.0-canary.317.1dea61635e8caeb592d9eb136da780ce2fcd4704.0.tgz","fileCount":480,"unpackedSize":1128207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiTgJCRA9TVsSAnZWagAA4hgP/Re8uHa7StI6kB29NsWG\nXIukD5GjSdT7Ys5LVrT/5ByAhnQfrfA4ePIp6BDEvqsuXDfBFu0qkM629jlJ\n8HmW1ZQ6HgKsND9jU0Qqwkj44ZKjZI9awoHoHO6XMbRy+0Hlv83oGSQvVC4m\nonWIQVS/3LGvxPWUtVLll3HDsx/QXJKLDhIuhzfnXsgE/PfTEpv6DifKDdJK\nTmM1b9VhjOH2C4r1zzhp+qHA5Bmgl+ltLa+alCUmp58kCoZ8vN3WkqfjSTUQ\nlOmLe/6/6RvpOusOK6r1OMSuGSc4/gDhtKFXTn3WIzkDOhXrW1T9vGu+QNgS\nzvE0xNakdNS2smHvjrzqTA8rZ9KHDPlYEY7T++WTQxXZYf2HW9BQN3wcHv1J\nqm6VEKEeAjhcfo8MdTCXH8engSBanWIhqubY+Ux7gBHQhhGfAfsdEa7bA6pb\nUhtDnkqzLaK4vSIXlblntKkC8QydxZn4uot31cz4WZG7X9hfIEcdJJZZn6mA\nE1Ni8AA97KegXd9rCW4ni/TJZRKiysB8yr0+61OAn3JbKAE17B9PK5S8MxXT\ncmg9upLIgArjRSXccr81YYzXhTK37RqLy4ktNWEJ5e78B0OgNnx43G3Vzaxt\nikWkpx5XV9aijbZHDEzcQ0HtpfzyCLY18qYSG0R5Zyp479Vf4MucFQsUrO1m\ngbzp\r\n=A9gL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8y/58AZLIWNdKHh1JpO14ph+H3X4k+VJ4lt8nkGKafAiEAy94mCp3FPYJueYCzW4BfILfjVZJxDUTF8fPU9o1JiQE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.0-canary.317.1dea61635e8caeb592d9eb136da780ce2fcd4704.0_1619605512928_0.751006964021306"},"_hasShrinkwrap":false},"1.8.0-canary.317.2cea00f233dbb33801d6b37dbaa774af29f15063.0":{"name":"@sberdevices/plasma-ui","version":"1.8.0-canary.317.2cea00f233dbb33801d6b37dbaa774af29f15063.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2cea00f233dbb33801d6b37dbaa774af29f15063","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.0-canary.317.2cea00f233dbb33801d6b37dbaa774af29f15063.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-i0/aPDZQX7m883ozymwiy3vn1HVodict5B1MRjy+YnS35C43R5DmBdsRIHyzbvesbolvQc0XE6d4uA0VMOvKUA==","shasum":"70480e1f5fee904ace8e4e6fe77b1ee0b7f04eed","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.0-canary.317.2cea00f233dbb33801d6b37dbaa774af29f15063.0.tgz","fileCount":480,"unpackedSize":1128207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiTg/CRA9TVsSAnZWagAA7pgP/0oQxOuMre2KGZeCgKaI\nnjcibDQb16FcRuTj18cbnWgF3T4+dYAi/Ljw7rGSxsdCSg+E7NfKOPrCF7vl\nv9jrYiL8z+QFEM3GF8CQS6MAGpOoE+YK1Fn6zBkj0TVjHDCqqrtNBsX175n7\n3qRQ7X3d3xRXucVThkXUbt4DxwOXDwDYlMS5DAQIw2P7vx42z3M2lmASHPvI\nCvCSKPZmdwpiXtPqmIhz46+2BjD/fN9I4OvCu7/nj9yZs5w+/NtRvaRD1d2A\nKSyFINluDWBNcTJO+aqGMlnBLYj9ARiZxzU6bz58j5UX3faLqAP7G5nwyYUI\nkXJW5366CVxlJQKWTLwCCDPBEoWlPk96+OTJYBVoOwN+LQCPr0wGXsEmz6Lw\nFWfIUOn98nm/d0nhjkn0/6Ilw9GXg589nBoRYT3lvVqA3X38+qar04eWkoDH\nsxFVLmogdLhAeSxh2LkAyrTCZ854sQBJSBxjqhc7AxfoXEc07RdM9pAgONBA\nOItR3oGS5CESuqSfl2fFuomfrG5S3WaCvT32zKYDPTx+XTw+IX6Wtoop0bGZ\nY05ZWsPM2j5fyU0fOIoN53Clm5uO994v6mhV3ZjyHyh4AysuEqCRLsp+LjsA\naB0vh3EmaDtmzr3vW6AUyRUKlzLn+8tSiGRZ/L5NPXVLnSxZT6YILWIvXsE/\n1BHE\r\n=rLsz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEPVIk3MjIpqSGJWIu3efQTgWcCq9sWU2YE8x+6fsreQIgJGftQUXpXEcHHXFTsE81qo0MRWgT0FMO7J1Jc+wVe6c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.0-canary.317.2cea00f233dbb33801d6b37dbaa774af29f15063.0_1619605566727_0.9452888427356807"},"_hasShrinkwrap":false},"1.8.0-canary.317.39bb8d9ac1abecd6b9b5b877685c0f3925eeecd9.0":{"name":"@sberdevices/plasma-ui","version":"1.8.0-canary.317.39bb8d9ac1abecd6b9b5b877685c0f3925eeecd9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"39bb8d9ac1abecd6b9b5b877685c0f3925eeecd9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.0-canary.317.39bb8d9ac1abecd6b9b5b877685c0f3925eeecd9.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-QkVf+E34kQ4FNInuwp1mD0KVCfoP99rlgPUCFKzbKWhNFzJjKueNb41hWU+AexTNSOC3iZr7aMmcbI6erj7xlA==","shasum":"ba87fd71b3501f5cbc90193439898b58d61e81c6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.0-canary.317.39bb8d9ac1abecd6b9b5b877685c0f3925eeecd9.0.tgz","fileCount":480,"unpackedSize":1128211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiVG8CRA9TVsSAnZWagAAIOMP/3JIG/uMN/LjT7tAIHSh\nn5I5yBpZ9Q44xApwMhnKszOgGAiMyYTiilfAbNh8jaTv0snHFoHsvbl32cPS\ng5EBDW1Fxt5vHThNU8O9NWYLLboqlLIj3TCH3qPoE6/OwvbBwmWSKc3t4PqX\ntmSn0UrbHnVJ83cFj6Gg5Y8kP+SLVcx7nkTFRVBANl65+xfVFAw1os/3aLvi\nGH38jHJMPi4Yuuw8TTjZESRZ5b01Ckc/A7G5oxQhzDMv0UcmsKjH3keM+jsJ\nUX/DpeV/NdaCghNeBlE0np7GciT7UYyGvfBXckIO9+rxzhNuk5Qt1Q1FaROz\nCLcFr/UksjiO+DE3vyqrC2Ilhjym5B7WogD9Gpw3tms2qe54+m4UMzZvybCl\nFlK9OTRfHzWnCvVQqWDXyLj4LHGLn6VjXuXyjFd2hy1d34Qb3UFRynF4qRzo\nLB0IMRy/b+xnAKUgQY6BzgSc/lLuWqaTB/NS/ISVcs/uCbZsIoffST/J2akR\n5A78B5EjgueVZLcwqS4EG61on6OuiaHsZK5CithADG4oJIBWtx0Ft9M0HYBc\nvgfSszToE0CZegTo97Xjh63s5herWiyapiiJS6gepU8W6CnJJF3jeLvQdxEC\nj5qxXe99crydG71znp2CAUD7cVoXgO4mOXgoK3Zqo3weIa3VSTd1x4x+7hjU\n2Iu8\r\n=vmtO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHalYn8TfJkv4SUdaEestdTuxwqPbrjTjddJLKMuEZ8AiBuIbk5bL2UfjyYhs6dII0HQZSMZU6VFFwDDUiCiCsZSQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.0-canary.317.39bb8d9ac1abecd6b9b5b877685c0f3925eeecd9.0_1619612091410_0.2043243055176085"},"_hasShrinkwrap":false},"1.8.0-canary.317.a27d388d2a8bc3378224367aa478b99f689dead6.0":{"name":"@sberdevices/plasma-ui","version":"1.8.0-canary.317.a27d388d2a8bc3378224367aa478b99f689dead6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a27d388d2a8bc3378224367aa478b99f689dead6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.0-canary.317.a27d388d2a8bc3378224367aa478b99f689dead6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-rALlNrKezXRKdQPmQ9xPj0ctdQwHeurYcqnfApT+U0UAuDheDDoOAn2dYQ48k2ixB5DCIkJNulvdX8uw92igCA==","shasum":"c82c0abcc013593531a612aa6240b6790e9a7785","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.0-canary.317.a27d388d2a8bc3378224367aa478b99f689dead6.0.tgz","fileCount":480,"unpackedSize":1127786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiVd8CRA9TVsSAnZWagAATlsP/3L5vobzfM8ozLXewlU8\ngevVe+pGn5aAHbqRzf8y8uQdDqXRA/+lO50vzNaxaH1FP65k/Q3E1oO+9Nxb\nD54G2iBOEw+4FBhIc/JcKGm8Uc7X1fOZJCiQ5JUxUOHQoi2t8xX5ZbGnvLzk\ngZmJRWdXVCHWbEWF3yMNwMx3/k8vitz+wTYC8wc9gq2iiCg9Ul7liprZ6tzz\n4KpDSZ8p1hCYwMl8BXvy3Co3s0EkW7jGLL1M+UhVObO/MX+qj8LMDbHTp2gS\n67P6Zmz2llC8WhOt4WdXx/YTLxyJMvvZ6NRChS4dbeTsRlld1ccgznGgkVnp\nSOaAHyb60S1DDDgyqQHPwTxFReJ4J5LnmjfORhdfO68I3M0NKEpdaCo6Yi2E\n4TSni8rIELSJ3kOYehAcVI2G54lMvZx1wUznOMXrpg6YBkQgvsa9Ust92957\nYitqqGt+L01ohXWpk0s1m4DUSvCeZuIRPrC4+02m0dpZPYcUcIxCVR3emxoS\na8v0b0zeZMmFTxPSnaufqyC6TMfwcY2d0SilfJtz+GXlCaVGsBQbpoBGAmcN\ndRFygXq6aLv+o7pad56qtEKNj/uIzP7eFZ4mXYzjew47IecneWWY21rr1Wt+\n8lj2Ej9z8PyOnBeyeRGhK4iZ/fUREBKNCu+mD5u60cwAcuvTG1k0HxSP320k\n9RNm\r\n=newR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkhHslV8rU58Yxmmfo6dEDxXGIb3aeU+6GiyHwIccKHgIgY5UJsOQoX7PGuwqNoqDQ58b7QsIRgdmeIgO+TXf5sLA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.0-canary.317.a27d388d2a8bc3378224367aa478b99f689dead6.0_1619613564341_0.12653350985548295"},"_hasShrinkwrap":false},"1.8.0":{"name":"@sberdevices/plasma-ui","version":"1.8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.0","@sberdevices/plasma-tokens":"1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3ba08139b570cde4668b9abc4a9b0ac92ad58e1d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-PsUWHOuj8REbtMu+FaNd4AJDsYymSFbXBJVrZ3rWEcTORDvFpjvpB4mTc9KW3m3iXe2ZJ4H+XTbbj9Yrxk1Nqg==","shasum":"2c42a058c5b4eb16510ccc8a4c74900424f0eee6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.0.tgz","fileCount":480,"unpackedSize":1127984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiVmgCRA9TVsSAnZWagAAzZUQAIlCHrb08ApecObD49Gt\nwMxPXL0MXkQpQeHfMgqK9bAwvh9Q6BprhsAGbeU7MJID44bq8EukNMOTWmPw\n/uIMfxBW4MKMfIyAJzXs6LSwVnEb/vopTDwSc1ACNcbtU0Cf38TNI8OU+ZrM\nfpxIPgpt4pzXn68C739CoYMycB26C34yt6hhTxd7a8v+g2YvKgC7kb1Ym1gP\nfhOGDYGpa6aJ62EwB4MOSSGIIPNOK2mC1/Gafc/VdV4C20mdKBENHePwPrRf\nf/9G2CYJ6XU2TkJw8gnGMwO6LbC3XFvy8ZyqkFbFKtVoMFHOvvoZ9/a6PqUJ\ndMvS7Ueev/XwZ4a4vN1NBbNC/VjwP+pVfeNstNndhW+0fH04R76cpGJWXy2o\n2EMvvOt4JWoc/s10gQbqo0OwnGFpjhEnzX3QCED8rmP9AFjpkVwzIPh93Rvb\nfXJbcw8FFQH9HUkm4fjcG+UR8cJXyQ5ewp1MoySiwEII4SJmiyaA0vB1p8PO\nmwpis/TXw/qrvqS/ZwziBxDXZS0FqBp9PmH9XOMAtxGjJbIxzuYC7KrQqVCT\noAheOWq7noV/3xZ++YluTh8A5dsbdu8Gc2to7b30K3hm7eErSWrBcz1z1Gvl\nF0qFhJ1s2wpRWEHEXnVjnQOcuCyB4u/mlwUBcpDmcza3dc2xeqU7We1Da+lZ\nLwyP\r\n=1alM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzhykYXMPx0HApT7cGrXPUKAOkIEa/7OQdr2WLQl6fXAiEAmcKe36UQvuV3adCm/M1kptiWcaEXlNmLM4959ED8iV0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.0_1619614111838_0.08458981979987557"},"_hasShrinkwrap":false},"1.8.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0":{"name":"@sberdevices/plasma-ui","version":"1.8.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0","@sberdevices/plasma-tokens":"1.1.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e5b52993a3e8a0e23819e59f5ae5cb236d60abb6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-2esCA9KIlJxR5jcKeFmpOxkyAgnluvq/vxjfEDTSdHqamRL8tk6fWAe3izZOcU2idnE2th+yj1iRKwz6OOe6kg==","shasum":"00937626f2e2e0a81bd13e123454563095b5270d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0.tgz","fileCount":480,"unpackedSize":1128200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgipSwCRA9TVsSAnZWagAABfYP/iYRfWI+XSGZZmE9DWkD\nkteFQCi4jeev503HFcCgsBbn5MLzzE5Lkag76XDAdx0QEOJGmhdTistsu0Z2\nxtJwVfU2+5Zdf+qG4IcUUgu6GvvgwvjHhQ/+SsTWm8XHHVJi5dm4ZuA4sw+H\nnYezhdzPuGbzsPPLWBZZsGiVdvK7nymxzBQEC91mfKwOIfZ6deoHBwa6BM3o\njEy+Tc/FayX8A+R9z49Ouq04WHxal6mvnyXIG6VV/KWOvaHHsmf2Uqq6+w25\nqGta7YfTHYuPg8HMq+adQ4EQ/2hE8rirhjaOyLEVyVjyFHWJ2/MIUxnU6WKS\nGGloc0LaCYNAoEQV1ICmwpFQCtlQff+Q7zrGEnW8H9UsNngPiDh5zZHzJ33C\nOZC54bbCItDfmgC9V5jTNFVgoTjBTHrXnB290J5zs+lJh1YRXGsH2inuviSA\n0e7BNYX84se5Cs0Vy96YhTzLMrPnRI4MJGjXq2SryNwVN0GxEC0sXGaQ8owD\nD/QRJdmbL4LAbMLxjS/Vp7tDMKAzAj/4mHZrkDcJCSREtxsqyC4DYn9kNqtE\nKgNVSYuaLWjLVK/1lXTdP9/9eY5nSAj22EnF11JRpRiikfohJ2ROWdVjY3VA\ns8LhSqFcq9QkKqyD+1g9BiXdE0piUJwtcj+fXeivWScnItNeta8PeXol7GsW\nxRHA\r\n=tQp/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEtbqN9SJceg9IpD2lgXt7SnY4fDHk8KV+w4nKvSpeKAiEAvZyfSg0t9s0lRHnBTDQSLX2XLESnWIIBp/7xL89fdrQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0_1619694768121_0.27860290798432974"},"_hasShrinkwrap":false},"1.8.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0":{"name":"@sberdevices/plasma-ui","version":"1.8.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0","@sberdevices/plasma-tokens":"1.1.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"23f936beed878a0ed569b4f7bac460908f15a2ca","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Tw270/1JMeL0MN2+0yUSykeiJYLkc9DO80zJaHjZAnl2grwgrZK5K5uzea/hnRoGMY5AHEB3nPrwM6pLm9HPVw==","shasum":"baf80a8bece00a03bd73a54ae999f8f0796eecb3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0.tgz","fileCount":480,"unpackedSize":1128200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiqKYCRA9TVsSAnZWagAAECMQAJHiwlMzz4bz0BL6GjpH\nrz6LZ8eSCY/U0p0gcCWEGpZnyxwweHzdsrfbM8mZM9466ZjyD8X80iNr7mGh\n2W3H3Mc7P/MynT4PqubMKmK+qkL+Z4I1jJENh7BwVREr6ubJfejNzvGzZocP\n4MxV6a8PBV0rF+J1S1/e8oqjOjy045kAiFQ2L5DXyvus/8bYc0ENbM3XgYMm\n2Bo0oLUEuHHvE2K/3lkJoBUvgd6G39OfiA+uRvvNoXaqmLp9mgv6cmykUyBu\nL+beqjRh3Ar+G3P5/qt+ZKc7g1RTLGBZZGu8hn1J41QTDahGzblG5Apidl6d\nliFJHFq+uZG3V3V/5TSXEfjwln+2cENbWyI1zsqGmneXNWrvDxqZURuFarBq\n6wfn9fHxNNjkmQkiXWS8tHFr+3XcHIWF8XR4isaF36XfjMEs7Vhjl3Zs9FyS\naeexzXBS2YdMhnFieXZPREsx7ogHIlKUMR2RrNCKQzIY9pE6KZiDiZr+oPlT\niU63XpBKow04xuLu0wSCyUx/LcDJdEH+a6f3njwWcyCHvli7cELA+Y3XAuoY\nsuQqqtZN9VGVfSvxtEc7DrSl2oSsRJ+r/vlGAXbDJ7uc5HvGl9cYG93ishOS\nUd/QFAwqyEw6JaNWTUAmoC5EbS7jScXZLUKDfuRX01ZGAA0ebH/HUl0fh142\nOQ9D\r\n=Pqbx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDEsYcLXU4NhJiUTcfMiy5DSAi1AG2bCz6uqK9QYq+iAIgaC7wEu77Hva3zixPhgdwTTXuCNBPONERC7KPiR69+JQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0_1619698328181_0.0398121459311902"},"_hasShrinkwrap":false},"1.9.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0","@sberdevices/plasma-tokens":"1.2.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ab67cf258bb5015222088fc047e905654c5178c3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-4XvAB7TTCFSR48XJhi/Pd00wwB2lpstqmfLvuPKUCggiF4zWFoQjxeTBVycJskdLltIqtdRZ0Uju+SGXblcdzw==","shasum":"ac14dedd861812bb2d287c1db9a688e59ae14414","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0.tgz","fileCount":480,"unpackedSize":1128146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiqOLCRA9TVsSAnZWagAAo8IP/3aClBLrE8VyyvMRNZ61\nEF5gMKOThlG29VWWtTvW1W5eZ4vVC8dsYuFjnMa4naJQDVCMC8FrZXzPZvyd\nacJgG7cUSlf2/JhkaLaCUJa/FFkyhMOnUW1pGoMfU6mWvpzt6vmNdjIFXKeB\nigTeU5qIAZCES2g48ZxRloV95yrmpO+rjMcNQ6A3+mk6IIpGtBCHNnxGRixI\nquFvGkcpG0ObyEn84v7EXCNiI7R8B6VbtSRfSc9XhfImGKlhwarMus02tBDz\nF6delx0uLQpQwCClcLK5AaUW7nIFcF1n/ygcrrwxQntTgj/7We6CC1H10+9Q\neItUFgsaTCqrzXmp+B5QFvKwZCHmP/OALnf8uPtqDRnnoLsv9ZD4+JwrfvHz\nYFrsdH8RTaIXIi9fGkk7kX5tLhof7yibUePv+DeMUh0eAUaVcjgEhE6ejwaS\ngzAfnJvH3STHEfyPOBrBNb+5uhZkuWi5+h8H8d2T8TwSjXfkeZwyEhvlcy58\na/4uC39DH05/WHl6CaqvQygTr3GmQJM9J62LXDF0q7FMHOm+jubQbUo2BJRc\nKqn+bi6anRkk7cr4sGl0bw9He4VdFsNtoo+KZ+OEEMGCb7fLMnkSW1jnH1GN\nRolL0zv0xblp+ErfYlmpgr9aTT+buOzp6GXoTIhwEGck5xFKOsVHhuoqdjTz\nZSqG\r\n=L+AA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvgT0ulzuLo7etqV5v+kOYpgYIHglB0ItoICJpf2b2HAiEA/weifUnYYB3H35L2liOFuuESw2t1SZ7pTa59jBrQzEk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0_1619698571082_0.34961486897932237"},"_hasShrinkwrap":false},"1.9.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0","@sberdevices/plasma-tokens":"1.2.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"36534ec76bc28bd91d4295b189409e5c99c86513","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3lqj9MEQgQBEQsqLTgE0/OwdRBur6zda/sSMMeDYRjhYP0WSLdY+EUaYtwTxDPfZUQomPcFsrCg7NSmzURKrBQ==","shasum":"178606907feb21f153556d8200c6018acdd57a2b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0.tgz","fileCount":480,"unpackedSize":1128146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisejCRA9TVsSAnZWagAAoFQP/ja8rl6JxTpbjSEolWys\nDpFy5v02Wh5qK60B9cLqZ6BbKv61fKiuM4LwnFtQPK054tT09eLhF0CZbewl\nnwuiIFAtKswTxcQW7oh122dduCT1Q8MPR0FNCdKXZC2x86gdwGI/4r/vFw6u\nbHPK0G9u3eMABjNfE1PozzlFzXKONcOQXHnJiXVzGdBklFnIlpjblmkNycoM\n+8ZLCTnbarqCCSwJa1XZmcTLPocWUMNRjhjJijkKDyWDoR6Sfly07fW5dyjJ\nq/1g19s35d0lY0/x4R/x7V3Pd3A4ChyPfcC/i9cCXTYbzxAH8tsBdV5DqQsG\nJ7MjzndC05/GalL1l2zppqIaHFe5nWEP8yav6P4I83V6Ij/TRdm2FCWI7r+T\ns9NWtx3Ah9aWOlzHSOQDyzzDkXbhtDraDyQLUv6s0X1RsgNebeK7gZ5hjxQc\nf2kPGVSUUCs9HCmp5OicHocpopojGzyOYXEiAIH7GEQ2sw3yFw8EWwRJWPGQ\nxjvyZ4J9GFmDoMzfLXkP5YOzlVcbiYopK9pwk6NGka/m3287oNoB0Vz7gj3K\nWmjDsoZFPGsejWnadVCez3l7OSAvDu2C+E7BxMWh17FBvU1GZUpgvLfvODzV\nl/ra/CFXgZ0Kh/mkau34QhLx1ZTJry2ecU6Ks03LBj9yxEy+g0GuDzjyaOAA\nvGqQ\r\n=U+0o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn8eRH3oFCA+MRLVoq7lpP4RYw5kWxpbXa11k0cSEV2AIhAJKqKFTpsWSPeeaVmz8OBqmK06PDmrkx+8m/lVGSCG1L"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0_1619707810767_0.5298344821930823"},"_hasShrinkwrap":false},"1.9.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0","@sberdevices/plasma-tokens":"1.2.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6dd97a26405020676145327e9d9ec8bab61e8861","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-kbEnOtPw5YRQjk2pFB9a1AOS9/qDEfxse0iN2UpRaVqa7yF2KQ5qHya+8VbaNW9bK0kiog8a3Z0qABH3Fh12pg==","shasum":"ba110fd5a1d7f3cae4b96a8bb5ff4fcbb6ecba03","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0.tgz","fileCount":480,"unpackedSize":1128146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgitKXCRA9TVsSAnZWagAADkcP/Ai5argYjAerBVd2piH3\n8T6o6YBkd4lO1i+UfBwe6iIPfF6J1mS94D+fKzOLJqqpPzYuyffdJVSm9B04\nyqrhQlvmHahSF09iS1fkAdw2xytpGHdJxELpGfAV+DH5Ib4uiFYHOtx5ehbt\n/z183qqB4aQN4kHecF7qau29K7vqa3unCE9FJB0FzxmUsnegOW/WiJUIV7mX\nixX5oCnvxR6NsyfeyXfCypDMgKRC69C6wPe4p5XjDnntT30MFPm35wp4ma+d\nWvtCssuaj9/sBz2BERUVsIZLfP/V6uRFG6qVlDdO4tLHdPtQbsZ512U28/Yn\nPDBW4z98DBrNtEeRAhaw7x7IdSWC1Ngs9Y0qLUSYW7j7Pi4Okdn79W3bqWJL\nvZFTg+o9G+UapGm6nm/vvHhJzNK7SAl/YbG+UpBQyHlHsSJV4SiGX06+mxo/\n7F5L3b0KpIPBDrVwczxU/sinJGwC9mCYmYn4qjtG4EwGnMHEKEbGd5hYrEuP\nZlPz5hzsI9wk9VCpHVpCHF19rvE9dnq2kS0cse0/qUgbGHv/ODiMGs3DXXbX\nCwQxjS7OQsYIVXaPmCrma5cuYSF5FXRfAGcnsMTFMKwdd7iBUYrAnV9BR6eq\ng+hJywOXsVg6w5UCipo5cYLcfMt0dErMPH0JWHx1DovwJd56hhPn80nHPrvB\nrSRF\r\n=Ftsm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFvna1jEzGvluFaeE/pC96wMe2yDlsea0LBdwwM/42DwIhAJieVSvAubuN2Duzu6es2psEeDMxjOqngQ1oMOxYMpJr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0_1619710615175_0.5167306196939736"},"_hasShrinkwrap":false},"1.9.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0","@sberdevices/plasma-tokens":"1.2.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"47e80fe6fbe310a9dc653548825b1c9fdc4b3fff","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DMQespHfkW9FwdoXph05ikMrHaZQ8lR7tGI4HtDvOZiCEO9Z/p6CgzKYOsx3dOcgtllbQgZrkEkCOoe9UFBlCA==","shasum":"07c42f25294efce86280cd016251176f4783ca9c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0.tgz","fileCount":480,"unpackedSize":1128146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi7ESCRA9TVsSAnZWagAA35IP/jmM7OrOOAIoUz1M7ICT\nnqbVMPVTQ1TQTbrMTlGUQwJRqYMkowbSf1VQL+CKPjJQHjLBcSiTkXoZ5jkK\nRbXbmci4X36rwfx6Yob12DNK0higH3t2DmWjuaSZcJV4IyZ7PkKXholJGWEc\nFeE+VhAB+O2Py9VNYTNnjlBaljx/V0OAJBDaIBNKlWkXij6rp8e4u2J3HLjC\ntfBZrNiB3h0oWaws+EMntcrnFF7byE5B7vGX7AdGqu3N63/LrwdAHOMWgBJS\nMlXA4l1Ckq3AgcnYpbPAtAgb5akncmjVwLcWwuYjT+8VMFhf6S+xbMXaOJAb\nW5HneQib9B8VIjClWN61BOeG732TKKdD0v1bbsRrydkmEOReJiw9NbGyPLaW\nmkrvDituIELaz+vhD386VPNiKbTTS8VJwhtB9ActKRgo8GSpc7sRx/2eyP1E\ng+EcjnKAzVWmjkr/D/3dAKbfknCyA3alu+EdUHNwTP4ZwIHW4uH3290PdZr8\nwM2PpT/ZAeZE0/i/f4o3Ae/KCXem9NnoScGHWiNuA75tYuLS70eOc9skPfhs\nMF1+aWmuFGckndonGrOFCT+6bElX2P7GH35IZGCqi19Dw/+Qcsg0XqJlAe3Z\nmWh1hOyEowQlkepYRVN2HP8RFsPCx1OsEjH8dmTiCXnqIv8PYShvh1jl+st2\nNrdY\r\n=8ab8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLhgDBBqswTu3voDFVhpS06YS6POOdL3j8ElkQmEzxHAiBBqp/s4VepKzGw1VvKoPUmkf7KF+TKGZGDgMHvER+sYQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0_1619767570151_0.7567613199955512"},"_hasShrinkwrap":false},"1.8.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0":{"name":"@sberdevices/plasma-ui","version":"1.8.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","@sberdevices/plasma-tokens":"1.1.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4c7dd1a77ec008f9dd655364d25d5d9eb4742a24","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qlTyTW55a86yGtQN0R67HSq069PB+Zm6RrAQ3c5jTK/ZECx41arnZtD1SHu/6kiLWet61bAJFQdAyOty+gra8A==","shasum":"86708e02ee71a8a5bbba764820926300d6734d19","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0.tgz","fileCount":480,"unpackedSize":1128200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi/MQCRA9TVsSAnZWagAAjMQP/A45KBMEFyMzgxNNio+S\n+bChXmd5YYtT8jWn2xaCr8GuSOEedQ9TWmAR2//7t7Sv01oit7ewcNVsPkWv\nA0AZzq+fMixzxwsgrQclz+z7Dog/k5LOEZuBH1lHzbDhbZ6c640VtMhccFe6\nsco+k5bUWj097c4C6iAkuiQn6QvATxP3D2YbWqaiRSG0E35NGwkH0pyLdrwk\nNTCuqwmHGfIF3nOLsbwBZw7oOxQwYd6ge2iHZLDZD6wgmupJTzgfa7W5oc/t\n67TUBXeKFl4Dp2/9+fz2IzJXfaG/TYomC98l8/8g+OOSwBA62P1+86smjQLT\nc+f64tQt/dPxNGbOqc+ZSVPjuz8dMySQW6uEHQoaErKiM7m/dXqiwYkqNDPE\njkzIgXwkcRHT6E+kMS9jCNUPUG07Qlq3zCjYzImdAfXNyP9T3sAUvqnvq1me\nP9LMQwPePhKTriVsjlCZ9whH+fpSuq3DAWqneKX8UJOHMsRW1XwHOGqLzVMm\nKXW5uzNKAeIV+nH9iBQD8QZMKU8QA9gzKCtOHXx+uIP0NFPFywsHCZktC/2I\njo6ZvpEW9g26gPJRb1nfGvAktm9n5CZVvWpvCsSK9/PYuCIJgwHKzhERzb4J\nbGyEI4O4GRgKExxCXW3uajEDI/MDv44WO2EJ/RAax9CTI3wSCCr0osAYogWT\n+InR\r\n=NU/5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/dZ7iHmoszLxYkfpvfEAu+MlBfVj35C/hpOyW8JoTwAiEAvNspsBw5I+8/sMBSZNFCtSwGXvSj2NBb7MgvxwcYwrM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0_1619784464199_0.01372248688550548"},"_hasShrinkwrap":false},"1.9.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","@sberdevices/plasma-tokens":"1.2.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6707fde038271b0f0a045745befb44ef88c38c90","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-LpjzmEYFTmr3R0ukBwQyMkCE1gCLQ6PuCniasMvimyX5+jvt7+z54C2wpyhJ65D/XQmq98bXs2A1x+0S9jtKlg==","shasum":"248c3eef627051c515488629f95e70ae05088e36","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0.tgz","fileCount":480,"unpackedSize":1139793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi/djCRA9TVsSAnZWagAAkqsP/A3pDoZ8tO+/f4oyLqSu\nq9PCMLmzn37xw9HmVms8INfPw2/0wQo/cayIYz2ANbU4F+zC369zRHEVmWsz\nweKQ3jFwvKRGRg/SXMbY+x8JbWzuFuJpNMOuqTBuREq1+y2YXUyYD5nIo8m+\nk4otQhlf+1sEWuKhGFq8LFgt5iN+C/oNS/aT88PoQ2E++4eIo33AOQd380Lt\nukNPCl93TF3FnR/iyqy13CpM395axE5gpNaYBNdbwFmeNQzAptwVtSyRTUwY\nWZjj3s6nDkkoUOZMX9yN2tfhVGj+fKKVYYRTSCRzBkrlieAufBVc0zHdhHjh\nVsx1IMs7SNbagSQ2LhzTwawh65k6N2Y085+eqIM+xhTIRRtRYVxvHbv4YOHD\n/gZMIrUd50gZwEOckR5nBS2Pk0HRpj0E/qFluN7icPCNXYNDn9FIjbkZcskX\nywYXgr6HUMhsczUBVeO27f+Sw1Ttk/DJgCMwjUommP2IMQhJyJrLEBDfvx9+\n4JpgjqOZCrCIqAMtS/OjWJr6/FddjAekyHLlE1lCAbGYeA/894w1yKzkDh4h\nMUFMb479yTAJmmugDniMWWKYCj5e2tr/4j0wSZWPc0cCHJ6ACgkPHfdC4/or\n9dYLSHuWB+7MH2n2koXglKsg2tGfX3ZVb5WE/9YDnR98A2PZ37azB+Fm1Jan\ni05H\r\n=dDkc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQ2NclEsvGER6Bc7HuuWSs08gloeXB9OnFizQlV9AbYAiEAgtzkkQ6MWvhod2JnLxMd9sk8pyQIXHAWzLeD+QKyqsI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0_1619785570783_0.8727742174911919"},"_hasShrinkwrap":false},"1.8.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0":{"name":"@sberdevices/plasma-ui","version":"1.8.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","@sberdevices/plasma-tokens":"1.1.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8596b23bb3e6ac68db248403043331b7c0e3831a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Zb78+t8MG+sT/+ADZaxYQMJwmzO7zPBVAgp5eYXRrZg5TIqY5j9j4v2HhgGSfb71HBe/6se8AHCPsLs98y/61Q==","shasum":"3fb0fd886a6229c1d928b39fa079ee8dd563e6d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0.tgz","fileCount":480,"unpackedSize":1128200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi/fmCRA9TVsSAnZWagAA5MIQAIx+mMvpcZcw66+2+MuX\nScXDulOvSPrSlm2S3zAWruEEYrTZZdpFD8nMCPE+CnTnOHWsrLWR7KZ6mnw9\n7xA7Z79Fbx/jpVCvKtuKWTjsfIC3+8IsCO5ZVYSrgnAxaDbBMKtwQEqTJHKP\n3wLXVERZalLtBqFciTJN7iASEgMt4efIg9dNZePOF/yINMKg/3+dyX6Q2qSN\nXlIfmkfuA19x9vtUvoFK7mmu7kBUPbbvC2QMkuuSOhQmTzl1KSKwWXAsoMsK\nJA+4wed4YPawdIx4lSWnctXoAq5zx5w2i7wnRBIGAr+Y2r7qWdT9L0GiPGoG\nxiyG/l3NOhif8YTZ34lu7exXp5k9ze7jtO9jU632Q9VPPZrEbHHmbRES620E\nKYYmeUl5bC+K96Htc1bsFuUifVcS9pbGuL29z5KkaJr2uCYC3UiAWd15Loyl\nqkfi68VcSp43THn3kZ98NhVtzpOrXY6hTc1D9EcmYlmekoYMXlivVEKOegfl\nHhfN6LK3gM9Jqqz3DYdd1F7g7tf/Tym56XchE/Hb7ucMSL5gcPUS9KkJ5hQW\nTNBYHOqmn8nENiVltzixXSNURPX3wv80eWSbcbgqwZIit3CPr+TPTg54mdGP\nWz3DvGpJTxlEFfFd/lE5C4kQ8HgsSYwGeOUyrim2AX+XJlLuut14zerUMEH8\nQjyr\r\n=pFku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC43Se36Xh5s7cQkqaSIgunUjWVti4OrTNbbM4EvpTcwAiBSW+9m0OWPpDNWr7r7lUjQ8rhvXs4FVkPe0rec7nlX3Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0_1619785702312_0.29195015601685936"},"_hasShrinkwrap":false},"1.8.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0":{"name":"@sberdevices/plasma-ui","version":"1.8.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","@sberdevices/plasma-tokens":"1.1.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fd5dbe0777f88b88971c3a016f77b43e3cefdf78","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-8YxFDmKs9MUkf2cr4kflJJd2pR/m8tD7zdLzRB85AsJo+Caixwpl0sb/nfj7YYghxMlyTWCiljtdt3QDb+B2YA==","shasum":"4c8e9239bed77473668a67cb4c508a7c05ba709c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0.tgz","fileCount":480,"unpackedSize":1108296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjAQECRA9TVsSAnZWagAAmdkP/3L4YSDDBYvl0gOU+aA6\nGfFLgudndInMTrXq3CVhTGVbekJREAWxkjjf1PFHc8AdYc+SXuuhCNBvSih8\ngOdCV8tVmDj1WkiajV6EcNzpUlt6mnHqzWf89SKjtqJP6GwobQAuKEge21GY\noSHr9lwk3QQ8CmYQN3har6P0O8XSBU/sI5ZC3n9chF0M8u/a8vF/vt+NOZrm\nsJXx0tL8qgNvMpz+PsVKtdsYzsx9Yc5N5a/PACK6pPcLYROb/zxDKhsWhL+e\nus1w4Lhhm/QTMN2m/VcWIym9lNgABM92M2L/nWDOGrbyBn+ae/8rA8S/5bPb\nVc+UycdMW9Zhizd/WpdvW8Tt5eY/DWfwTsFx+tSSer+T15D1vlXZV67in8L7\nkdQVUPGWTgDnFoQ2HEjgPZBD4AbvyraJPymOTzQKit5zbUwuwxBphDpD/QQo\ndJiHCEOM3JsXX/+EKKEtUwuqFULg3HCuqwWQTn6WwtRSIPPXu17YbqdWOnqn\nuHpEVEtaG//AMThmZ9lpjEgK8GsLU+PVW4aqwTvDhleTlBqkC89o5NPsyuu9\nIPH4y7plvYoLFIlFZmJf/lEISImsaHL5ZdZ99Bd2Wnyel4edBmxi9EvK12rv\nK0j79IXvv2ymTXn9OwIsrdnsB7mBy41rTQj8CCuPtByaZzZe96buqIdGHhOL\njFet\r\n=eINN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICex1PvaIyCxDSGOvaAiu/ntmvpxdJCB0+V6NKfQFdflAiEA11EiA2OGW9Vemwq5SJXHGWJFswko6FUJzUnAGLLprm8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0_1619788804174_0.6277633390894954"},"_hasShrinkwrap":false},"1.8.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0":{"name":"@sberdevices/plasma-ui","version":"1.8.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","@sberdevices/plasma-tokens":"1.1.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"14732c022b293ef284c6c35a92a6644a0fa0bada","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-w8PVzDFxks7Z/d18f6pnmMta0hmR1vlxu3GdvliPQWZMBafAdqxs4+nndfY2PuXURiQO1JPXx03FV5piqqYYvQ==","shasum":"6a59e31e49a2a45798a1b952f8f0d7ab028515fa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0.tgz","fileCount":480,"unpackedSize":1108281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjEk6CRA9TVsSAnZWagAAnDIP/0s5bZkCI3UObFnWyW0V\nHY3ySUY8RkkYOKjuPzWiQuiFDGCLe+qep4cGe1oP7RKDTcCXK6oVPcI22vQ9\nDAewCVxzCPg5YQ+/yeMdAUXhyadVLh/7YdQ/Q5h0sq8vX8QK8MUCEiarCpLd\nHIr0+j8ifehPTuy78+3VyaldIbocEk3VCmSMObDvR9QSdyt2KzE+g0XHOj9I\nq5RvSrciFRtsL/Qocu7kwvTsDgoj6T6vCgSdRQR3bClHOO9XDeLdzehoMRPg\ntmnIY0HtBGQ3O/TPWc+xcCa/7s0tiGdG5QVmQYnXNVljp8mha2CsbKss8ppO\nIPCGWZuKTVa4kaGNl+4o5LW1us0jrqSPFILt+A/ZoBhk29gvrdo8oPOh1fbS\nP7BxmYGy0lK01nLMy2lJfTvS/b//zaWNGc7HAhxSjtZVIoB/DO3kN6w7tZZc\nOMyflY5BHCxCke92GNOrmPgG5KPwiCFHbddnmqW+HVHgkmv+fTyV0wgwKble\nIMH+7/vUJk2esyII0krLA44rXSD3jV6TsflKXex9ndVbGqQ5AB1otw8gDqtU\nZwITMvdt12OVoXhdWFCcnaCc1vkgcCtsOlH4GC1r6JdDcfknmrSxnicnUBhD\nbSJSNvyotz1rk8QkrcPDC26M1usibCnV0xW66CkDjkeqFs8uWD++FrnUetFS\nNmT7\r\n=I6k8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQD7d3qxJ8MFSBkrQ3ypD/BaGkOCkrbZX2lO38FeJ0vM/gIfa+Uz+qNY7p7we9DGAKs47LrYzcJInnhw0njPhHNdIA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0_1619806521756_0.3765043737389695"},"_hasShrinkwrap":false},"1.9.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","@sberdevices/plasma-tokens":"1.2.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6b063673dcf43ab604ee5c3b14a32ed8e031b176","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-vtz9HQg+AULD9COjNJkuopZgX2tfPPRD+0560OeOHdzs4N+QDu6zX14hsxl2eC0aIZ49jcnYrEH4/Za2XN9UUQ==","shasum":"24b186aafcfe972158cf4d750cda6654d56e298b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0.tgz","fileCount":472,"unpackedSize":1104664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkVeICRA9TVsSAnZWagAAGuYQAJpYrn9WgbKEp0n5s/KY\nW90B/1moVYxjGxabi+laF9GW51JipTHDIMLa9CqX26+wPEi+ni/v1U6LUDH7\nHyNh45ndTR+SU2uC+LCowm7nGEc99FNGQClr49v0uVoZWZ5O3F6kkHY2Kj+u\n33OE/MSikt1d6V/+MPKJ1wMSLavjNtx2QinVmVlpqOS8sGOgKkKYIaYoxzpf\nG6I7BqQCGZNHUzayhhr62TgVM8+fxtN8J7yrLmHYCrG9ZsQIeJyXK7dT13vj\nEeiNU8Q+vroe4tGyCjqxREeXcXmRFWHDB0iNPy9p/bBh0jnM+d4pGY/NBFxl\nX+JqS63dI623nMYJsbWKyY3urQjTad/siCzTGvEr6Uc7C9CYp0M3H56TDDee\nQwdPKGy+ufNpla2HOsvtW0QTKFn3h4dMeXunHt7j3ihrCp74goWSEutYNXcz\n5QU2xY1cSD887yjuOAySXqS2Yt/TsGBQTeaQ5O6shq+kCTx3lcoMXdUTvSV2\nr0WPowBH5sI3MSyE/H1SOS3ce2B28qatfMpeRDWLEJbkAt4CzV3IRNVgvnx5\n4av4Aaz03/ZvdqS1RGndXvZgUUehV/JobfOe9AMg7m4Ej7dHHqRlR5MOoria\nvUhHB3WYUtS6QskuwtPuElXrnd5ATCT9qPy6buIVgpdLNFUtb7jthwm6bCTq\nRXaP\r\n=21nD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqtrptiXiqMKUGjZqJcVYw0T66SQgS4NMfCzmjpM5WEwIgN/UvYrP3jQVFv0lM+BIMTRm43LH+wx5RjRl1UcTxFD4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0_1620137863497_0.4968594606852115"},"_hasShrinkwrap":false},"1.9.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0","@sberdevices/plasma-tokens":"1.2.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"86b5edbdd0534b60f691713e95275a60edf0eabf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3Li6yxpYFh0/v4x+RN7C5+gbXgFgahTGbyufU2eKm1+EZK9C0jndXTAHM+r1nF2q2H06epcVrFiIz/vStPnXzQ==","shasum":"171a4ad4060ebe7a689dad2c0ea3b347045fd7c7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0.tgz","fileCount":480,"unpackedSize":1128146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkWTvCRA9TVsSAnZWagAAKCcQAKRo5YjGvf1q7+6NdUyM\n4b0k4Wf0fPd+0OCi3iQmz+2qBMBZVeLP3PMruTxt84lSWGKbj0T1v/73w2De\n4YltIz6MUXR6D/DyrD9tLoGLkoD/MGDuwVytYwweX0sRMMiqx6tI6Po61RDq\nm+Od9pfrXHy00aysrKgt6vvODzPjIZY5j2LPI3KQqhX9DR8+gTuHZO9T/mqi\nv8xwJKGlxLKgCRSu8A/k/DKzG0A7gdA3AES03NlBWMPQ4ah3zFgakJ1hU1pb\ng77vvjrxMY6uV2u5ffL1A/YUcIpSeanMgrrOu/uqyPhdraDG2fepaOAuvdJq\nuJHWmD8mSAea8glxcLLjbQrtr2emy2P56IjUIAaakfItbcHB6dh4Z7SbVgRd\nofqgH6DvSK5PoPQMTDMqsUyDa4idAsdeOayyt7SW6Ql8niYUAYYF6b3rAFDU\n8tJDELp76BTA6076nwnqEaVOVSHN+5uy9nFal+pHmpkIiMMDQbfzcsTMaMoj\nPIlnryDMgZMWDRo4xz6jhZXNLamUsbUP7N9F8xd+/gAbr1RSDaIU2ZbI49fx\na8HgDo8E4JI5emZgdtDZXiRnULHgdY4nvvyqeUt7jb51y9Ur3h/XUlBM+1w/\nCPVfTSvSwBToPBO0Ev18YbN5/ssUq3Cl2npPaOTzqTvHLUHmu0I7b3UqOkB1\nCn04\r\n=vW37\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/F8fscLVs0dXl0vltFukSUH66BkOzj6JrtGM/esGDdAiEA27f21w8za7j12AWhAeKtvqxqiF5aWvbUVdNmGorTYj0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0_1620141294592_0.8238211476379025"},"_hasShrinkwrap":false},"1.9.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0","@sberdevices/plasma-tokens":"1.2.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b8b5514776d5ae38b112ddcaf73e7b2d829b35ee","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-FgNFyMpc1IwMVkjdaWsDILJ+hFJDXeYarWbxGhUhEbKx2soFwfP+q/irB6SWID0dP1i3uVDJI7wC427x+hTKJg==","shasum":"ea309ff5489d7dffc6aa3a95a378d6cf27c00e20","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0.tgz","fileCount":480,"unpackedSize":1128146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkqd/CRA9TVsSAnZWagAAmSkP/1/BzdqeQPOcuLcI0QnG\nDpfHnMc0Zzddpq9xodDPlzc2bmWIPxiM37lYQ7V/EF32z2hPbmFv84IZdOyl\n/CJQA/bZ6e7txkIenLs622NRkr9zPKtv9jAGJMGjZCdPRCeKDoLQdRovZvMH\nivYN5oKX84QyZPgZ6RR48eDDustGS1zR/Dne1rNvkDYa8oCQHR82hy140hiC\nMXuTX/MtYm9OO++z22XCdW7pB/rvfxoVjoWmpP7cjjZm3ccrzMo7SpP0iX30\nK/O8kBZ0Q0FAg8hOgcYBnSAuflw1lIPBogK9vPSkud+mKvYPFeo4oMmC62tZ\nZLu57oALEvI/k7fiKl+QDRlp0GLr/n6TxVUQV1B2V/0cD7LX4Uw8JTljdzZL\nqKnNx4PnOniAg3/bjYcD6OBIs0VVY8UZMuNA6aIuJvBQMSc4vXY7/FfWfmRX\nK4/EVhePZb+rw3VndRdovQPZ/hV1vMnQPt6r327YUuMTsI1v/4j1h7dgmCo+\nsbEn72gm701Hh7i7AdJ5Uj8NSZKOpbdP1GxXC67fQ3IdwbNNdFEAIao3KamE\n9iYpw2vqCnjqEAcH4PBdNFrDNmTRDH3ad5nBZMJz2KUsoGdceg32VSpB+NJ1\nZ0jKT0wvSp2Fnn4zNJufbTR2d7vkkL9ZTBMbqe6P3vzksTOUFbBpozLxqN1K\nKO/V\r\n=zBni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8pGULPVi98+xyhBLrwFZhorDmGrkJBv/JvodaBbM13AiASokagH/CAyWCdES2Cim0KXtLK0uiKBPHWIz0RYL9fAA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0_1620223871096_0.3702509935475058"},"_hasShrinkwrap":false},"1.8.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0":{"name":"@sberdevices/plasma-ui","version":"1.8.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.5.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.5.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","@sberdevices/plasma-tokens":"1.1.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6be5cc9de361df9628f22ca8a521f0ff899ea73c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.8.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-FnqvrWqpiYDQX17h4K0Q16201rrKZTwI3aqkx9rRk0Ohyx6gvH5+Z6cfilpPIBipdK5FrCEJw51uwNc2ei+CZg==","shasum":"02ef4ee58990c03aded54561df6772c339a96237","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.8.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0.tgz","fileCount":480,"unpackedSize":1108281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk5tLCRA9TVsSAnZWagAAWXwP/0PtT+7b9cYipoe9DW4s\neOE1h72xNefvgc4gFWB0APHDdbvTZbOnBZjDghxfzsf9YrxYfsG8Zq0Ta/CA\nRt8I1got+NNMKK3ithqNYdHVXnp7oVWXyo9MiC+QlEtcQ6D8aHpJy5HU2OCV\nNVsRPbIOY7AYNWBe7587p+hUteA0xGFzTDiVMmalQVPgefl1ibMcEO0CjVf8\nRQVWM87bMsDsXtXiOr6Mg9QyFhevSi4dru+Ah9C8NfpzSLk7mCE2u+u0aeHE\nuRpfvymUQ+06E5vZCge7FNAlH+Vb6ATXKUD6MhbkFeepmAtIEg5p2h+hO6lM\n0DY+GMlD/znmwqSbcxTNH9Z8qYjLWh2pyeUcC9WRA0KmWwemfMcm8a/FP/Pu\noWpYlrD5YMFnbsksaS6xVboUektM1bRxi4cVCfuoiy3+IRo6iljmsacZIhl6\nzsOZjcZkw5MAIDAXHm5KyLRp8WfQ4hyRg9/Pj9GliGU0NsubmjjKNt+kq7Wi\n2SaEpggwTiByyLeH8lKhNNdzp1F7vtWrgQwd6oLmCpwvnaTsDBbUfqB00Ruk\nHjMNLuFrV/A5b9pxeejRpjQpyjlTA/tVI9AFwhpyQ0KZDcTs6M1S7msnkOCw\nN2KmU7maMuVKSnEmwcLlgim7BazP9F7q1pV3R8W1dqrLMG3OAtiBjNR2AXw1\n273V\r\n=u/uH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfZytHZFfCA2G43H0I41LurAfIgt5dv/zmGTd/r1phAAiAlqCT3hwoWX/qZTEkcFB6juUsJ/TUzlmlf4+sEeOrCVw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.8.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0_1620286282467_0.9680375841912732"},"_hasShrinkwrap":false},"1.9.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0","@sberdevices/plasma-tokens":"1.2.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a8e5a5dec0e236c982ef1ab53cf161adf1b33cbd","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-IyMfJNaDtOTovzWXaqLBieLCS/YLhV4tyWqanrGQdxHMW7QqKIXNca2bmfe9zvRe/zmrEvbDa8NJzrNMWAo7bw==","shasum":"efb70b12f9e5ab215443612aa7030ad4f96986fc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0.tgz","fileCount":480,"unpackedSize":1108812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6QRCRA9TVsSAnZWagAA5osP/RiVZg1q9/4gaZd/41/s\nnB8bVCmD2DprFwtvRv8ABScoYoibUPxqH9yY0l95hRRVT0wysIP5j7TJEWHK\nuKcRQ1P8+2s741slYHvhHfQClr3GkHK72odGKcXvskkbKLRMC5HCCS2/Gg+X\n8PZU8hbsg5Kckdr1Bq5YHHh9MwzmMD87GrAtPhYqO4xd6EdDSJUimYOKuh8N\ntuQ9p2rowS4e1QJ1diO5Yp3h8WRduFTxHyStfqEL8/YOzXprFzfMS40cKLQI\nB+qvQ1jScxf2T3327O5yIWYRubmz1VHb9r4txOhrXXJs9DWE0UnPE70udble\nQ6DhH2x2jtbvqbxxwkEYtadnC16WuQgCVJ8A+wSqzky/0LQczelTsrIZTGVp\nujzTFcQ72Bc9yqOnlPWM/oL0uZcspB/XLU/4n7AdMA2EsQxwdYLEh5Pmyh1F\nrp6hUvKe1eJIFcIw0UgpdKGh/GcgJ26C3X2HKi7b/4fV8BpvsCTJSDhPdSlv\niy0maFgoyqVvYwlhi/BZVyGitxh3cfztJqk2xULbAdidrTu+ubLIMO7G0I7r\nql05DYjq9jLRTP2ytHOlwDFLgOx4c7ReFHV1Efqs+3P6YBJwTrTjTA/ivJoq\n8mC86K/jnK18su+S/wzAc67FK99QKIk5uTRhYs56j4iL6NaNe4o4esLTPnFM\nNaDc\r\n=6WnE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGhJOhGsSqIGOmHmxofw+nnls1ZQHL5aU/1g7POHAtYyAiBDS67adR87C0e/eFkAIpB2aeo34OzOlMIkgDGrzYWhfw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0_1620288529004_0.9557978614640963"},"_hasShrinkwrap":false},"1.9.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0":{"name":"@sberdevices/plasma-ui","version":"1.9.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","@sberdevices/plasma-tokens":"1.2.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9519086778041bb35565677afb7a83d1ea0afb5e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-s0MXjHISSLwpUz96hUs88GSQLggEhMde24hod4hcWTW9WGg1K+wv79wMVwzp87zDfasPuRI/R9jf2O2k0bS7rQ==","shasum":"7f1a1f9a61af19836c1a843cc7cfd28df31d7be6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0.tgz","fileCount":480,"unpackedSize":1108281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6SKCRA9TVsSAnZWagAApHsP/jcb31Fm9+VFrHVMa+hZ\nPV/J5PQnkkDYdOWBKSSg7JasXcN9ThyVN6pHGc91xp97xa4tNt7DVNXRurXo\nUGFxN4a3bNfxEgLoWzOEM+O9/DifuM8HQqYhfJ+306moPecBHQae8yWNWIXr\nHZygbZPznNKZbSQijY0ezUxHvuSihbhcvQMNtRQJUfq48YVfKTo/yvQfpHA0\ngmtYdQl6nEgPVBdcFnfmoEHO6W5cnfPOS8b45aURmGUcD/P4Lh93j0FrSVOA\nxVcIHnad5Z7gXL9jBt5fnVYcyGd8YsWJsEiuWLxJ4vMm6/p7ks796RzhOhbH\ng0ZqrfJ9YvzI/U9VPG3vKDpQZNVD32TGFgWb6j4vx8kMzx0PWciZPTXN5hSM\n6xn9U4OfwGZGnX9CLRPESnlhzX9YPZgYjJky80uh+2lQCphhfGT7D3yBwuzU\nQdWrUcLgTGizXyaVlC/ElcmHjyobHrcuXtBvHwq+vvI8cxJ/bDUoYc/CKhXJ\nixNb0H6fvqIxUchdiHaX/zmnZMuWVVO9ZjSl9o7KDKyiJOdmCAJrYz7Cu/UV\nc1CLrtYwrqUoHcsTKh6pRJPKTqR0848l2uTnKVOBdikQ0JTHgWzRi99FovTo\nEen7wosnK29g5bhULMkdALo1v94TTVmLVIXY5ikjPIA3mziQZg8aoxF4uXb7\nbMyp\r\n=wphw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwx7q1RPLruuWOIuRJSstyCfCHXa843IWpXE61iAudjAIhALfUg4TGDbYl1pTkmDtv1LSEP0Sn+m6N9UsrfuuM+1FO"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0_1620288650313_0.6057245552240982"},"_hasShrinkwrap":false},"1.10.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0","@sberdevices/plasma-tokens":"1.3.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6a4f5f1479188533ed161f58e0b59ad6323527e5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Jh8InfhRvuS70eYAX9PhVsNHetGmxzb3sK3j0jhIGP+I0UC4WPEUe9bQe4H8izhhNGaSnwfutkTzlTR4JT9GGw==","shasum":"fea1a0a6d673c93c26aedaa3607ce5de378379f9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0.tgz","fileCount":480,"unpackedSize":1108975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6aQCRA9TVsSAnZWagAAbAEP/jybbpfOy9QJBZ+xy/X4\nkttaTBAXXZju+oQ0J4VAFxPl6YxPOHdxd2NpA9N92bNShdHknWXqft78e2xG\nKn1dBgKV7FtJeROLsOglkxA1vTgwaecgAC5Mf/ZzgwqBUmojHJGseljrsQ2N\ntnuiNt5cc0VZx9sG/nc42gYRQ3ya18si6ercY+c3+2aTjTx0hN8I+RdnvNvg\ncePdVIebI317xmYcMGrUWKn4wgOV0WXeVSHoCFlR0M1EFswkS6VXUWLCs/6W\n10FYpSgNWU1g+P+KaosxAlUGeS+QEvKW7mFXiEBFsVkD7iJxhG6mH4ZcSAUc\nWite7GZXsIkMjeXJNxSVFX0X8muSTr5gsMPzeOdVsWxgEwQiHE+XOGcecd+N\nNie2+ktjM1A2FWv7UH0p+jR0cMGCZRbxojiV0odPoDOKMD2X+AJ0CmFlDOIm\n0fepfvw/BCkpeh93p7XVZrhlQISDgnBVPBLFT8T4uJF7aUBxruhJnDfRVkL3\nrCSez/PsXqASD6olwN5oIHRg5ZpsPeVePcYmXCy5bA8+Gg2cRW+wjIuUku23\nZ7yQW8Rh7vGPceF3fktNtHN4cZQOriu7Sx3T+Pt69TETHXHARSAsElUhTdrP\n4jVD0+UZqMPBFSwx6A8xt4bv09J1QfAFw+5/shim3wLJngIgNbSxVAg27gBv\ncili\r\n=6KP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqTiKj+aLy6xIqzsyWZUXDhirFfA8f/edjBtyGwy+T8AiAfMyaxrfIcA2SZzyvXXZhCEjUcOS9HulCF/NDRsPpMMQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0_1620289168116_0.16972279822193537"},"_hasShrinkwrap":false},"1.9.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0":{"name":"@sberdevices/plasma-ui","version":"1.9.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.6.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0","@sberdevices/plasma-tokens":"1.2.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.9.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-1lCcNFjAxIyxBkR42kdFnAx5EYPTEByKWik6BtqN/Jt/mR7tEazgXTf5Ja9g5SuqN9vPxW141MfCbQiCEyLXXg==","shasum":"566e65c2e6ab10570b8442b534d231034f5110fa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.9.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0.tgz","fileCount":480,"unpackedSize":1109028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6hzCRA9TVsSAnZWagAAGxwQAKPAo1BS0bSEKnB9DVIB\nEY9bS3hX6phSzx16tkLF/KuziUfrQnJbFj88vquwQiy0Cav4D6ngpYYD2OA7\nLUOqkpm+aw8fTu+ltRlMae1ShbPrPHCT3bQ9pii3W6gX5YdW8sw5oPkCUM2S\nWkCdt7YFfQ1ngsyyx2vdfDgol+3hZ0WMt6/wwE0tC4L3Tf95bqDMK4gUCVRS\nRHs4GhUquur/MevLyvLmAf1KUliID1jbvoLwcrOeww28Vioi1JmOHlszlyLA\nX/jzoBW2IuswIU5YFCQR5tDqXR48UINQnxI2eRyW3CMOU+nhFuOFLBY7oLIi\nK6LSPdhVTRYiTpEvT0H67qB+5JbL37CaIruQjI2/uHKzXYP5WWDKb0CPh0pc\n1ElLi7z6Oc/pEQjKxo+8Soo8sJyHdEZ/LbKQGbWm/Wk0TRJDmiEbC1ZTVksl\nMVC+edR33Dra+eG+q0TojaSrGguiAGQa0uomNvOJGb15HQuzm/pMBl+QPPd2\n6k4/ZDyKPvwYmLi/5BkNlWZnQYStsxNdRyA9wILG3dJJoGNWVhLJzy1fFHdi\nwCB2oZf/bakxVkdocaveCNPnMMnduAif8Do15NgJ9CBaChQMegI6HEKNUVbY\nbTia3xrp0FZ1fKI0Vv4Yy93jO1ijaijChtuazAtj3mK9jUFpUOmrFDJPtA+p\nggL1\r\n=TP3G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD47svX4lwaMzu92bGKhJQInABPzIbAakv6kD4Y6h4YSgIgJUbRtjnGPq9y5zoAVMyBHhSm68u5P/UxE0C8g3uxzKE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.9.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0_1620289650681_0.5639585076611815"},"_hasShrinkwrap":false},"1.10.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0","@sberdevices/plasma-tokens":"1.3.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a47b852c1a24191c4fbf8986db3e0824a5c19439","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-YiOnkqy6xZQhQ7DQNMW9j0x8ueH6sRjrgW/FJL11vNS/HUHHqFxB67Lw1iX7Z2gosJnpbo9V4/rNPkE7d1f8lg==","shasum":"e0745fefa6deee42d52bd00b42e139b0bf7cd293","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0.tgz","fileCount":480,"unpackedSize":1120226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk7CdCRA9TVsSAnZWagAAnroP/RW0DwlIVvzAsdU7tKn6\ny4EdwOoWPk7wmwq0rXBEYUPY876vdbohXTdmBh8oECJy13naRSfKirJCkZzX\n7rqI08OouJz/GLonKBnnF44BqAhRdxnsLMNy0/4wbuDKifjuCoaNmLvwZ/oT\npPpwhme8+PWCfevE8P3VVWwnhoFqtC8CCMFOZtZzeKKZPfjnLUwbYwCxPhp6\neXkSazzD+9sDYsgYCF5tB61cOg92iiHz8KOaCPs/2+x5soS9mbIXMd0wMtSa\nAbcMeKd+gJCzUgyuTZ8ddS51wU8eQ+ZHfohlnNkw6ODX3b/MVz7UwerjG3fj\nSxKmcG9T+n1L1UKeXUD1ynyE8ne8UsdWkxr+pF7TwCfFUw0VDa6K8XT1092u\nsVImdC6y7dDjOwrteizkn6Bp3p9DOp5T3hSpoReGlhhg4AbVD0VbkWYTcZYS\n2jgTAYA1zo4+l3eXmpQg1VIAKfOLnAwxOvobVqkCbH7aX7espRVgFccj00Bu\ndpRwg3CZDgHmwN6nTgZ90XOGBzoBBnbmxgXzFEBF5FuU8JTAhlzXfKisRNg4\ng61jaD4EIImaGyqP3cEDiVZ/C7TotR5Z+1HTwLNJl6odQMLWh8RTBPLuuHLT\n4pUNsoG5monlVtMsLKlnL/M2i/4zeubtNAfT2NzFrQIc7qTi5EWN5zZpjFFG\nZ1WM\r\n=UHte\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQOQ58JAeyndCN9ECKjaBvmfVulZqsGlDKgvhc6omjaAiEA3P+g80XhDUGMq9QounojjgPqtWX8imrh2wFNQJz8cvc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0_1620291740700_0.2944720565204859"},"_hasShrinkwrap":false},"1.10.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0","@sberdevices/plasma-tokens":"1.3.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a8bed0e3359a118914fa2e593d9fd4a63133137b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5fnR7cdCcbWbU+GdfCib1DAhZZLK+Y2UMa6XCBcyQlkLjtYBTx2O/28eKWITWtXHMyiVSIWr8Vr/Qv+oNp1O2g==","shasum":"54dc25cb88abfda8420f2c56071dcb2c9449de17","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0.tgz","fileCount":480,"unpackedSize":1120226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglPFOCRA9TVsSAnZWagAAeVoP/jDwiDxXVlCHfwUpA9t9\n3599GKsKeqVHVzTwTv558MkMjKoGCyWg8xshayXzCNlOjqNXMzCJoVNzN4CO\nk6BNbKzyDJ1ax/fFFeqvmWlkI4yub/ajt0cp5rEwMqyt3i7dEo0ZURi5Qi6P\nAsXRUI68xA4o3nN8c2qj37OzwGRnXGmhj4nIzrxQP1aI4eZDaLvj+8zss+iO\nc/XvAMuBj9MNOrbWeQ2vh8QF7BOOWHQ3FvSYElTaVQkGlZ9log0fgViQkQhc\ntmQ0MmyEQbGkTXqtzb976zEkFijMnR85TDkNY0M+GMORgpoot2/BjZtZUUGC\nNJZoEKv1ArqBvDsMha0BQSstRxtgr09I3BGQQcwHu+dJvadExuLoIXG+w149\nv5U5X8mJ/sWJc6/O7COmxPOqeC7JqTFOZFIV8tr0dvyjnTvRa0Z1sID1L+C/\nSOXi2CAIt0zc+f+XYzrnE0zuf0MmmdwWYcLEPeWRJm0JFvoz0o0LnzRDk+nu\nUYYqQKqKy7wBKl3tNeurxPGoH7HQTtb65/HnxguiGC25M7fLGNJgE4DoWRYL\nBA2e5Hzuutbl4V29y9Lyyc78Wv6m1ZXcpT/gkub2t6H1pdA4cwlka+0eBwQQ\nii+zqT9A9MTvpZpb1ZkOzP16dNrVBH7ZoEV4JnbvUC3UC7Lk2pH87QrD7bh4\nCozV\r\n=d8Qc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTevgHLLvlx7Fnvcpfq2SxVH9CPdlqidQDG9ZH2aCgLAiBEBQBp+6yJdzGDxntwoDhtU+sagWythDXR/Bh52iyAbQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0_1620373837558_0.6122627576150843"},"_hasShrinkwrap":false},"1.10.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0","@sberdevices/plasma-tokens":"1.3.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9e57df0010325a0cdc178e8171177be9cbf849e8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-F0TS6ixMs0zqruy9TptEZYJZm/Z/dFtrNhL7RoEeQEhxg2iadPHQkAqgJcwo/Yv4PZcj4Xjw0VIaFQqONPUD7g==","shasum":"c02341bda5531d68082f9e0cb79293adb0a4ea1c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0.tgz","fileCount":480,"unpackedSize":1108975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglSbVCRA9TVsSAnZWagAAcAEP/RXSs90mbMIZqOHnwwCt\ntN0RpErXGrsdDe5HMBUhjeQYjIcT0ar2c1iORWSgYnTli+kCv06ditVepG1U\nmI2nRY9gD5xgKn5OaHgM8HL6PSA2ai4H2n0ThYe0YiQ6WA39Sci2S9mHdmFl\nfaxkoP+ro/sQoOmOU8EKItXbQdpy7TRCUC8J8N2kOfo0VPyMPUS79SY0LaSW\nI+oGpiYOgCObI3PuX5l22pFYDipQQh8NnHXo+i53rVMvU/dJf9IRQBA0IOAi\nIiyvZ7Q2Xn4b7KHpQ8d+7CLywuK8h6mzDRAnk3dygW51Ikoiw8bqtgaJWRc+\nfagMbNUtZ+a3eDXy5zW6OB31QAlPiv1WPxTDfr71jsMdr8jVPFaOe+n+8pgZ\nfs483sEP6ZuUJ1kd6xXUa1/zyoIIZ5v1rexAT1XzcqaLo+Ae8HMojET5B4/f\n/lx4ZUkNM8KeUW6TzVjN985Qyx4RUcz+tXElISWdFTR15GCJL2LjkoLOKNaB\nvEpVjl6F0qPy4lPbqPhutPiB6ec4K4Uy8q35qnDZuiy1tP6w/OvN2VvJQXn8\nlQ7RgrirQHRZTxkx/3M9ef2XTHqnA2X/N4qh04kCWua3N2BCKBOgTi+VoLfR\ndCQxoxIM+GtqnCIr4aFqqUM5VgDZz4bJYH0KECsMN+IKqzO26NoHZDH5iXch\nKmHv\r\n=Q2nB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB0AVl5aA76lQOSej1H77awdpYHD3Mjq1eKnGhNk1cpwIgcdgd1EN40FAJu/0+Fy4QxfdAqsjf4dTomtKJSB/QYpg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0_1620387540746_0.4711727344771648"},"_hasShrinkwrap":false},"1.10.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0","@sberdevices/plasma-tokens":"1.3.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"233711a5862c44bd85ccaca0a5165ecc83b4e195","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-IeuFH7z2e1KAn+/u/rZONeWR/jfKLdt9mEGT9DLnN2tKEX7s9Tjgx+uUWNJfy1S3bJhtuw1y5JKTRTWhf1VROA==","shasum":"07fdc7a78be02c0286054be8da66946579ab5c9e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0.tgz","fileCount":480,"unpackedSize":1108975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglTfNCRA9TVsSAnZWagAALTYP+wYYVz19l8gNYg9iGBuA\nA04sajwXwvOsG9D9HGrmbwNTDMc/vb3i4jS6l1aW5E01Pd9Yadhl2jRwwZxj\nnRN+jXO77kKMvYBhiGF04XT1Z/yS+Yso96C/s4a1P6/2JiFZTvjschVcl2S5\nv6Y9xAVc0WUHrOYhT6YWdoMIULi6qXRD8p+5H2UQoH039OOcTWJLiFUupyj6\nGeCbpeRpDpCS46OcjvnhWdeIY/74lUM8s4oPo5vDK9nZjWo+fIDmAOPdkrch\nwGj06NQG9f7nxva3K5C8cPow2H/wUgTXfBm+Tm3Kw1DZVAhPdwYhauihf6zL\nMoerb2NmqeHHZsbjovG1i9V1GJ62vwdWfh/u7zvJiVBPYrSdd9ZO8HDwUvcS\nstcYXgRfjXchMKa7slR9se7MiVsIwFdppPMxa7I+iD8Yo/9ACTLBYjlQd5Xz\nfhMkL0A0FkPSWHQSnvMQvQQvCfZOmISaHk01nbres4Nolgg/Hfvrbdf7c0Ke\nfMA17GfcJAkF/HdTz9ELcAQMoCaX3cukpSEQeAjB60k+TuxkjWt0+1hoeJzi\nit9uyDP24vQz0TKGERqDEzFkAIqmGMKqO7XoHZ0toE4VBE+xTGZU5DmE7q/F\nAAzil1JeQSb9ldzJfkD/WvixEUFLmsQ7dN1Z1LO+VBkl4Cxxt0Dsj6B3/W4+\nNUoL\r\n=W2Oq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD98zDxDyeoBbfmAyOWdyT4JRjoKlSX76eV80Hz6bk0kAIhAN7KKV6xVR/yIbLd/Yn/QFC0lpsPAYVzQFNDptVlnCNx"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0_1620391884676_0.4605744458324674"},"_hasShrinkwrap":false},"1.10.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0","@sberdevices/plasma-tokens":"1.3.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b4b4553948c05bb942e506b1845755a59c4a0864","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-9ktDZlJv5kTQtLI+LKAEdkazRb/k6g3qYyWX3JM0tPW+nINlkV1Lv+j3Z6Vv0UjC5UMyQJf8Uc4Bx+T03IP3xg==","shasum":"61c64216487b0c628faa38811dc365da72d011ef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0.tgz","fileCount":480,"unpackedSize":1109185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglUDTCRA9TVsSAnZWagAAU7kP/22gxLYrIkUDRow8sNw+\nGpOg26WajVU4Slsj+hyLiZLJ1vmV7rgQI0dl0jc0mdycAfaEF11LBsriPw6v\nkIdbIHiyo9TCadlcVrJoBRRbJXvrygQS7o5X2a4E/a18QXyRf8Bpj1rV1zMo\nzoeSjFfBbK1Ry7AjuiROvr1D6Yqyk7saVlAW+4y7T/uAIDVT9SVWAVMj7k3I\nhd5bp5kz9TFSeGPjTkTZmB0Ow+dUrKBzbMb8yntpkLeoELry4CnTFVfQzWcZ\nX1gba7BT+5om1a5lpaQiOdc+CBk0nGINbw1iRnttlC/B7wLPONPCNe+IakFL\nacoM+jF4XQrcmskq5gy8koMyGVKXpGYnSPV/Pf1zb9G6YLOrDHiIYjKZBJmX\nW/sfoiYILZjxIWY3CFqVKf1lCTLpLHKwyHtfEdoKph+TfwSY8RN+8BzGtBhQ\nnhCt2IH3gaw8OE2H4+PsvcR4bBxT8yzp2SMmh18pd4YPoTs1XX+/FL+nBfVr\nBHeZvTWGLjwHvhvUby7YwiVRkpihfDLc4EBO6sfLuKVv8cK368fwcn1WaaO2\nWMQj9J4D9e9yc2eSHp27myi8pGCaz1SSBpsBEwuvK+FUC5Xmba2xJdgdmG5P\nzQ3va+wqrR3mQodKe1BLofs5fHP8tIS66CS+BmY5guZKZeOA7hZ7ysw/eDz1\n6DKv\r\n=+A2L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvsmn2NiwvsaA4na64eiBJE33FrouFWijd6W8NJI35tAiBsfq+uN9qBKdQcVv5ae6lu4nGfuteGDDippXi/4tFWLg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0_1620394194609_0.24248061588192393"},"_hasShrinkwrap":false},"1.10.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0","@sberdevices/plasma-tokens":"1.3.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"21d16ef749db95645c6e854c4cab16b1f0b3a6b3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-6+8tzjxpmSe0VzV0swk7UPbRK/AvaAdTNgQAJ0VSc2UutS3JX6xGiXGUg0rmBbpHHF4cpKOYwlnpwhOTGZwIQw==","shasum":"63cdd077348fed39ab20c339992b2414d2ff1653","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0.tgz","fileCount":480,"unpackedSize":1109029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVowCRA9TVsSAnZWagAALo4P/3hRcoURabfjL3RtXsr9\nuV0IupKgmi2yQC2hU3kThq0QBdB70FygMD6Xlj6DqksyfiknGnvTglN6kEzn\nMT/7qixdMO8yX57wC/H7y9IiASbTF0S2lqscJPPKw7QQPbsuGcU8A7VKFtJ4\nQQ/HttlNNhD/xOVclcWJRt2nZE/vHHbt3nEIInF2z97nU540ajr1YLgd+AIn\nl6vCtj3qMr4H7zReL9qABVkv0KDrSuB9cr+xmmA5J3Np9+KRFcC4g38x7Lxs\nfcFU8h9++gkj0zj/NOIPpEWcxN1JFdwuV8M5Mhr03fGSeNMGBNayrfXEZ94+\no0QbJtDW8g9mqM5IublJDvapK0WX6FB4oz8PZlcPIjnrBVgNtSpaQEmGODMB\niE99NCqqi6ADC598gtWdrBCZruCxYndAgBj3TG08cVMT2vbMvZ6Q5rsQwpt5\nx9/a5umrYe35kd1OqVRM5AJd91M+xyU6vfO7ka/KSmOMY3NZbVNXsTln2ZHr\nnv67jawCAr1wYcO7Oa4coS414yNzv2FoEw2OjKWcg0rzlKCtGbmTAxo4ZBmo\nM1p1L2IKbk3MLOmEag8Ulz+5vn11gwLPzFNVYjc6qZNKz3jgIcfinYwl1hdo\nVOC4MiK9Gq7Kq/olaxVk6cly+rG4MzloE5IfoUio2gvIKkW/bG4bzfBqpUH/\nxm2O\r\n=75NL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5DlUiDCD3ql3ztYhSzc6otTQjjUpSEQux69dTiuJ8BAiEA3Uhgi2/K4wDGBwHHIEz9WKJw8lA9amlCBJvVrEJsWb8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0_1620400688019_0.5489265053216212"},"_hasShrinkwrap":false},"1.10.0":{"name":"@sberdevices/plasma-ui","version":"1.10.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2069bed4a21559f397d1aaf8923b4d654301d272","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3WWLrsQgek6qbjrGi9gRE/Y/cIXkJSu/9cimMPmNMnooD8nASM630DBtblwyRT1Yn37uVjDOJ44P5K4kwRIHtw==","shasum":"874bc2a61b67e04fc5cee77f96e88fc332344d62","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.0.tgz","fileCount":480,"unpackedSize":1109268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglWPGCRA9TVsSAnZWagAABJYP/2Utd2n+1JNWadM6xwrD\nTGnxEOVC+DgVA+le3kbm5A5v9LbLvtJe3kXrNuVDcap/45TWQSLkvT6PP3fb\nD3AcYZ0bOB8al7xswrpWEHWN2WbSfWGscEwOWyfyz1rQCNqFdnuTaYcV+U6g\ni90xILXMGmuPLQP2MlAOnkpDys1nHlADrZHfSgX4UCau+K/qIhMPpiqOHhCf\nH3hQFhClyjup2Z4WqyoOo/mpuG9yMbn8BL1UInU/NKXVom3PqhdF+ijLmMCj\nSfWmRagIDUzrZcKrrABOq4kWtiwefepXXNDbK5b7P6I1rCraFC3IHffps/5L\nWcQ4qzx/0RVeg9seR2USwzGtAXNFXpWpyJEfNldHmpADYZNHJ79xz0u0i1uj\n4NKcqc913bX7CoNfKxjC0NQe6hWwD7hpvN06y6dl1lyO5GEW0yBART16DwoZ\nLROYqBpgYl2QZXmcRtE6/S1xEf7omqPlNUk7iadrJ8O4en+ZrkJ8/eefc1pS\n7lmu1DTNtuS8I+RGin5QlQI28lJluHS35SyUx2zf9A3sA3RUUXjR7i6x4ntG\nvXs8mTKoypFsueskcxw1g9vw3NDGjNDDtyf/t1fQdgM6yoUhN2N/FDG5F2QW\n+jQbNV8wIoGhbq2KcNVguhtFZ+sqffa2NOkWNZ/ib53PDm/qayVmIGmhLBNW\n37sf\r\n=hAch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFibI9uQolEMvPtsHf2Fayu50ObDNO1P4oJEU8fCszIOAiAjoTo+2oT6E7J89ex2CUSY7bp47ZQQ+yX3ixCE6TiuPQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.0_1620403141595_0.27106221974754363"},"_hasShrinkwrap":false},"1.11.0-canary.339.5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30.0":{"name":"@sberdevices/plasma-ui","version":"1.11.0-canary.339.5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.0-canary.339.5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.11.0-canary.339.5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-seWIqf5CpPooTFBKaoAkmOvQZp7Yw2xqh026zirYNEHloQF/GJs6gL3aVQhbm/hgRihFL3A4UASyMNc0ZwPtmA==","shasum":"2f1a6395218329d79aac8b9be7a00e638766dce8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.11.0-canary.339.5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30.0.tgz","fileCount":480,"unpackedSize":1109376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmkIsCRA9TVsSAnZWagAAcd8QAIvAKKve+iGMwMLPLJu0\nR2IObcjx2HqrRaTHqcF/6oNRc+6MNXX9REZA5edx6vC40iRIISQrAohIHztc\n+ad7S7xjvaDfSPSyIOhjGeRqKB7gQB8EASTtEDoKvKFYRYQPwC5o+JTtclmE\nlbKkC2ig1OiUf0c7Ej46NA4GaqffK6Upp61xXDPBN5OfCE0lP9F4r97VL2a3\nNddgwh3O4I7BLu9y0LRsDgcv2yqH+liHORYu3hdqBDl/nvzP/tUgyYuhYxhQ\nE9ffNsCs+7dWQ3m1iJ5bpMTb3TQmYQ9QD2U9dn3pATHTgzeYP4pwM1TC7rmx\nOV597o2NFjikt4veA5DQ42up1BDEfpHOyk8BbS03UhOD5k2j2wnDiDrbsf+G\nUkRQh+Ligtu08uWU7Ep4usgwFUaZcra+4bJOmM1l+rvqa08IaM0au1MbkVPs\nAyjgELEVGsLGd8w9y+ZOJCIgRuX8bTIXKO+wJ50UHiaWiNwCmJe/RZnzZ3sr\nvbvY6hVGxUXblSIKSlogLijKdVaJtGIDnh5Lvr/WgA5x/b3YO5br0ZQ6nmWd\ngzaYp8uPwlhHUzBx1Kn9kCf127fkDjHnn5fYYMJ10RGkqHr0B/dxQT7croE7\nI9NRW3DUzoAzXYkLHFqzwiM4K1ZC3mHS9pXDko5NJ/uc4FNtRkYYJmzhmWZK\nRI3b\r\n=iiuU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDckDl5ixYamy7zHLNAo/hKFJFkmHyVXaM16/p3tn+ZdgIhAOwgf2RAtyk34vMwtwQsKLZKW4bXkWoFkGCcVOXy1Th+"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.11.0-canary.339.5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30.0_1620722219984_0.9732611605507295"},"_hasShrinkwrap":false},"1.10.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0":{"name":"@sberdevices/plasma-ui","version":"1.10.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b5550ce058eb80d30a856ae32bfcb6f29be50ea9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-mazkSegHa+Y6Aa1XRfInDpFH7TQDYK+zaSo5y+l1LrC6uFL5LWwSapljYBFJckhivP9OEmz9Zrx5WkycqaBknQ==","shasum":"ee5e8960d6edd459517670aea25f531e29f30625","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0.tgz","fileCount":480,"unpackedSize":1109430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmkYyCRA9TVsSAnZWagAAsQ4P/RfAkyyjyYIpYV/7Km1O\nSg/ZVthUik/NQjx7hTEmnel5Nu+h2afQerki4RAyZKm7vriR+GziPpqY+XNC\nz+MGNLM/Nh4zy22IlsELQliW/RfHfJ7qOZ62k7Js6g9Mz7L/R3WkNsEsJ2kk\n0nUlZ1+llyeXeI/lLsT3KLVKj50EZ0OHOLVkLnftZVVByBpexT/JGaKo4b+t\nFyTiwsDKjCmjZRxHR7aDsbg4n6of7NNbQHw5CMsshJWFXSJDkYsqxd3Lh4CT\nWfXRJcxsjcsrvlx1C9RX0c7AQAZRnt76I6oYEz7yKchzrFN7tRqlP5Dvaq6P\nAb3QHyTWujVHwCAUfWf794EKCpJ5Q4fExn33fO+MMSeB2IZ6mRQvuBr5zs0J\nfpQxN5GgLoq8RoB7/K0JaTKiN5krSxoNegbLBpKf2Qae3IFftuV4NecmlUhQ\niF2IAqKOQiNm3+a9uAyLmYY5TWtWwZ9AWfir15+gxaB8dHGuqrm6ulvm/b0r\nTPp/dsQCNPkWhF5z7AsxYphu+IsB9I38kWkyQFN6EQKqED/6I+v0lS3K+10s\nClZgEPM+XfYUe24L4SNiLoXoOaVsv0RuDfc6LLFXkBlTeopfSk2j926wpIUh\nfvVPN4bt1jbIQYXNzaMjFbDq9QbPRl2Efrw784IutBpJTEbdIZmgb5NgD2rC\nUr6C\r\n=E6ei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE65mOcRsuw9HZQbwxVx3KopTb5660Z2dHzSS9SY9Z45AiBYxdyb76f/w5R386wMgWVbdA4kBfxx5sudn2dQJVKTYw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0_1620723250415_0.9028579522766111"},"_hasShrinkwrap":false},"1.10.1-canary.349.c2837811ab88f5c3faa8963d3130c4138a075e81.0":{"name":"@sberdevices/plasma-ui","version":"1.10.1-canary.349.c2837811ab88f5c3faa8963d3130c4138a075e81.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.1-canary.349.c2837811ab88f5c3faa8963d3130c4138a075e81.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c2837811ab88f5c3faa8963d3130c4138a075e81","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.1-canary.349.c2837811ab88f5c3faa8963d3130c4138a075e81.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-yO1Fs7OzKER/LMkwEV3G0xBejydnNqnUOi4cVMgn4PtIJEzGFBzv0Js3LpkAXu3TLxRFnmetTS5pJFu9Zr63Pw==","shasum":"de4fc703e6d81e1d05410057b35158dd593adc49","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.1-canary.349.c2837811ab88f5c3faa8963d3130c4138a075e81.0.tgz","fileCount":480,"unpackedSize":1109337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmk91CRA9TVsSAnZWagAAr9IP/2/VW7wmETmN99qe7PBW\nG6WSudqJh60rjpoyn24sQOpc43NoGnFwxmo60BeDKZSQQ3zbpnN/I+8CeNAz\nUtLxLcfcu/J/OKxPevSVa3MgqoykWjKK+iek2RWrD86v34U4Hl5jJJ1KoNbu\nQa7aFQIv1F2WpCLH5BqXtVPpf9KqDjlMxBrHZENfBGFU/15bYhy9Pw63ycSH\nx/WD5nTH/QfL+jSXusaO3roTNNCcGpMHg5m5c29qrXYuT46Yn7raZtyJkoAt\nNQJniV3EeLwEPtBI3j2uc2/rVrEh/kXeMBgAd3wX7r7RdIZILxZaQXL0dPOp\nhoA9/XX/09cFpLv6s/pVxJZxXgWWkwR4xUdOcO2QHHIv6L2hN7frAnfCRHCc\ns0zWBJJLMvckCOFi/AWf0d7wcgGDWR5zuiaJMlRl+ZWKQXOkJHNDJEBrOmk5\n4qMBmKVaBx9FQQBArbrA3EybhqTar/3E/WvuZQ14w4uyhqbfTae5FH3SsuhX\nl+FyB/BtlplzunJUAS3kWuxNzYrwiB2U6yBK8OFdpfcRhqI0lHKK1/3pSWhB\nwYwhys+sj4aCln5lbwPSlADfnFTGhYBdwU9UsHWzOE/EytgWkjB02io0ZdkM\n0aaejec7KcA82jDxTLK0RIXF8sTibQq/eywFb1QypAjTR0QXTUYGuUE879Tn\n4kEV\r\n=YN0j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxLY3dWwmukZh6gjCR4vBfj9UBblP3aqP2Ord5DoOjoAiEAuINI12YwVJ2gtd/jkLrJv9JtmA+ejQoRKZMFeCfHAwA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.1-canary.349.c2837811ab88f5c3faa8963d3130c4138a075e81.0_1620725620557_0.9188335155568905"},"_hasShrinkwrap":false},"1.11.0-canary.339.b61fbb1573796e1b24f0ed82ee219d18f7a58347.0":{"name":"@sberdevices/plasma-ui","version":"1.11.0-canary.339.b61fbb1573796e1b24f0ed82ee219d18f7a58347.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.0-canary.339.b61fbb1573796e1b24f0ed82ee219d18f7a58347.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b61fbb1573796e1b24f0ed82ee219d18f7a58347","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.11.0-canary.339.b61fbb1573796e1b24f0ed82ee219d18f7a58347.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-esnC1OtQqIp+OOqB80c/LzQzlGcngAIaIk0NI+JGMxzJKIZAemEh3zkXWpM0co4kVh/ST0/HD5fFmuMXoAXrcQ==","shasum":"ccb741cc6acecd6aad7bcfaa4c38b58ac5bfcbeb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.11.0-canary.339.b61fbb1573796e1b24f0ed82ee219d18f7a58347.0.tgz","fileCount":480,"unpackedSize":1109376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmmDBCRA9TVsSAnZWagAAm08P/3ifYjHeNDjkOToSULYI\nZkfqbUxy8rJerWcW/lr5WCUbn6/4Stlfx/Nx4KtyF3lcpPAhE72tvWAVxryq\nYIoH/2IIiPEqLX4QjChHVtY7A4N34wwCTS15Ot9d5UOKmSyIkf2GG7eGBCc6\naxHNhew2hZvjNH3D3d0h+G/F2krZaj7FevrBwUbuM4ePswHSE60tNm5MFCdT\nSjyKNboXysD3Ywy/KQ7SfqJc2L5tvHdM8AwmwIU8/rVm0XxR2znlKbfYy9x+\neL1JRctL7I4CYNMGDCiQ/hmHgYd3xel+fYQpdUuf/FaIlSXXLnxTWYiCbhSG\nws0uVzk5umTY6VRDpV+l3sOgr2FLJ6dwQJETBvwU2z63OMROZl9RkgeQlchy\nyiSt88K9u4mXn+j0M6elgTQC+G3BKmHq/Q5pI8bYIcov1MvqN153RXvbuAq0\nGG735OAty07NHMB96iA79avh4pS0Wzfnxpd+iKLXQQ5ihfMnYOCVvm/dhow3\neODKjRTJ15PVb8l3ciWEtg0RQUvuXlTbZ/kOtzyTLgDx6jcMNsd09p+bUArD\nAG0D9n9hDor6cWk+TLlTTNNmTAOsfZUMNlA4SkNeeDyXYIL2+hx05O/DW9hG\niXZpyveOONheOxom2ZMK30hdMN9ihHWeYahXaEhAFDVM2yvy7T++9AkBT7Xo\npPco\r\n=YmU0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQwuYs2cPzKEzphDBKDccSB2lY5XJbRDi3PI8z7fCVmAiEAyfhPWC96jNAw+Jb+yD/ZTCZp5XcK9OIx3IGlPutSRGg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.11.0-canary.339.b61fbb1573796e1b24f0ed82ee219d18f7a58347.0_1620730048644_0.6714093337064464"},"_hasShrinkwrap":false},"1.11.0":{"name":"@sberdevices/plasma-ui","version":"1.11.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"73aab9d351890af81390eb5d0e89cbb6c8f8f740","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.11.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-gynscpAWERMKgU29NZrv8vSbH7nVDVxFGDU40sjv3Tt8jpvPOux9TPcWZ5iaDZ/EEcpK38UsQBa3xXBbkubRUQ==","shasum":"15628bc07cad0981338ba99e961b371f9f2d7e0c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.11.0.tgz","fileCount":480,"unpackedSize":1109498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmmReCRA9TVsSAnZWagAA81wP/22pHNQp+66023s/ovi6\n27Guk/qND+ycEm5fXmJjrcKnhlkxyljzWTpUsfPrv7woJisqx1Efx2xNZuRF\nLvPMiimSEH43Lqty6N9JgS+/njDYSFIPzDBbK3uUPtkD2oUg4v1RvmsuaFW3\nh4Ybi+f+2GUNwS+6vc1j4HCXyB0/cXERzhOUWdOSo4hP9O+2ccIRDa3GH7Jc\nxnn+uk4AFoJWflgajzfXniYDPxJIQGyGdPDYwNC2GLMDJ8n8rc7HtO0zmswx\nh4tmgpCa51vC6Qmz3YorBgvKssA80lKMDX3us5RCYbOfTg3xKoZ441ugTWIt\nqIVkZCgGabtugRpwFK1uYzSf4TkTYpzbM2CuHyUwkqWnKDVQIPgf8OBTZcE9\nUkZ5hrFu8TgGwA3A/3ITuu/XWdp+ydk8dwVzyI5Z7lLFKsYaxQ4+is508NDa\nbj3de/u6PcQ0abxVquTpUcu+iplDUpQJ12Hti5Gh1daQA+XPxMf54WEmuL6d\n81iqBr/PErBEIePyPxOM5kAqcQuc6hHo2yMTehsNVXwqNDgwRRANBabSFdox\nNiVGxhov2WHlbxk4QbO5jfTShRWqRY+BZRI0p15FFJS0pKzJJDcSY7T7CzZe\npFDKWcfONNTSe5/aL9HboWocz3Y91xd6ajtwEwSc2eEQhCXXioiuCVplJJMk\nR1+Q\r\n=0E2B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCKRur59ZZSLpDb8OKbx9E68ZpH3tYHL+r0TrvMq0BSAiEAhDlQu75MDyFszTnBbSH7END5ya4oLByM4fOIZylj6GY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.11.0_1620730973892_0.04848541292488573"},"_hasShrinkwrap":false},"1.10.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0":{"name":"@sberdevices/plasma-ui","version":"1.10.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.7.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3ed84edf649e77ecbc722fd60aa4429ee0138d81","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.10.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-4PQfL2yTdMngMVNEGqJXmxIMtinUz9s74GzSxr0by8QfWfCx1F6tpXaQmYFnGGMliZhPcIQSUz7J4lAssHjx6A==","shasum":"934d389a11558dd6e34f46c32d40fe063ca51775","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.10.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0.tgz","fileCount":480,"unpackedSize":1109430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmmX9CRA9TVsSAnZWagAAWhkP/1RHyqDA9Po22RCNtwA3\nE+V9Ce2t8G0gxKShI2Tg+ocTaXpxU8nD1x/iNRAevV580AZQ6ExLgHOCmCVM\nQJCS+qWH6ahwb4TVtdETdqnI57OGTzsdONuQfnvY6oqXCbvfKBXEKPLxLaea\njQnaej8El8DE0GSzKSgmKgOW8fMpwILwPZDVl+CSmungwcgdQBb94Z6S0oqq\n9qQL9LNFQ9V8e2jwAyeW9eDyPSgMU2pzuxKJAn64oStr0KbeOfwCGB8bV26J\nRC+EW5mEL6O3PVOkHVIqTo8DvwMNT6iifmy7Ykfos+4ReUWHh6Qp5lUM09Th\nn5Wpi4gm+T8hVCzSbzqlWOpl/qULVSfARHwfKaZgiu6ltZoWKgxiYI9DZXzg\nd93FEfRGv8BIfSaTdBBPMg5E7TFxv17hk0WeqxMJ183R9Wp2kniLekptVzHo\npmqdth7v07pNd4o1O2G8+ZMLYaLnZCNZ/qA50ZUDgLIlTzGTw6ngVRKvSfxC\nOQSbWZ8cXor134Q8nZReayyptRuKjdz3A7HC66wmisFUzTOW8saKQNGQDqvT\n1N8VwZnLZm6hlNrcyaxpkcnG3xysrXp+OS3uoesb/tct0WBa9VgTdggldSX7\nPlLXr4Hykm+AgIr2M939BJKBrmy9NtLjuKdm5bUqEuqDgVTjERrEGXbGVjpH\n47ze\r\n=VwZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8N4hbXRCj+uDC40v3YMfBPc55LbEhu7XqZ0v3ZqExhwIhAJ+ENoTJ68Af9/zO7YJfC+a4OYVmqwE60ox2KlTRQ2LT"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.10.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0_1620731389256_0.17697846856373944"},"_hasShrinkwrap":false},"1.11.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0":{"name":"@sberdevices/plasma-ui","version":"1.11.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0dd483493fce1bcc1910ca01e17091718e41311d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.11.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Iz8n0biXoX+z4ounT2zec67/M7G54qBd3EFc3hjvmsz3M5n9H4LpMcRAVro+U6GPbuKj5edr5FVpLvlf/TwYJg==","shasum":"ad4447af005c1e57731ea8f6b8c454c4a7766d2a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.11.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0.tgz","fileCount":480,"unpackedSize":1109660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmmZhCRA9TVsSAnZWagAAsooP/ice2a5MpyizX1yieAMA\nbI257DRRxyeih2QrgpcgrIAxZxZcT6qcajQYkg4Kjw633Tc/7Uyo4vR05qE2\n3Fv8KJJPCDgt3qKVBbRglFNW9fF1wvIETC5PO0EVJA30LCi6f+ZIPf8H5hck\na1SMbXEk3J2CprG5BWyyF/+iEvX3whEvYIIMoCF5T437bEJqzNv4aNol69Nu\ndtuPY8Hse0ppiyyqIKHHhzfouc0YVNBwRrgveAQSpoGBrqSDhoaBzbelGOwB\nag3aq6ioOf2BTn/Y/nbfQvlG8DxJqi6C5OwBREjpgbsLpA/E/ztxnhoU36Bu\n4OiafnTD9WaYEJN4rCefOSsUW1QCnckvVfJqYp8/AQDBOoxcB9IeXz7xgiBn\nEmGjcAD45AkWksWzS9qe16aZkg4Kop510FqR1zfQyhPmbmev7WxgRPniU5Ic\nr6S53CjG2i4mapfbbDfL010mWCVBBsi5DXUw/7tLTnAApyxo5QMJCbt+45AN\nY2TA62O2JYXw9CdpW9q8h/zkWCvGGIbFvc7H3Tw9ppWV87Y5Ak0o4Vs9swlT\nHjW0rFpbTktPXExBcbttG3TMdw1Wd+b2DMq9CsB2nN4W1MwuNK2U3zHPTk5U\nYrktUKyj6uJNs1tlBSVTuGowpShypWMzFi54s/fz8JqxUxPcH6jdMdnKk/Ws\ni4vQ\r\n=ego5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZSMpxdraBT3Et+E1r01c01siR2C2vtwBpyxFXmFnREAiBz4LOBP7Z4o6L9e0d/Gh5qcbab0sjduMxdoocJifqqMQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.11.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0_1620731488718_0.5029305848359535"},"_hasShrinkwrap":false},"1.11.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0":{"name":"@sberdevices/plasma-ui","version":"1.11.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.11.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-pMH159kL/y4M5JKQq82NrCtO87POZg80770xPDtZQ8iQdSETBu5kcVLm8zM/twDL8ZtQtwgs8YWmJ+N1dK27jA==","shasum":"25ded5bb530af18796d505c70109a6c62f50f037","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.11.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0.tgz","fileCount":480,"unpackedSize":1109660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmmbJCRA9TVsSAnZWagAA5PYP/1KXzZWFiyiTYlmT4H+M\nTj4CRLMJya9jrqL+9rqhVSSR/OKqKE0l0fhZW/vOw8TvjprP3AsRN2Hs8HMK\n7QcAtTZ+VyYrwuDsXlZnhX17sbWvUw3wTawa8cWjvucyzYkJ0idahgNQ+Ubc\nxUkZUd7ozvfkxiOjQbkdoC3kBpMabnamHbfDjWXQTCzMLL3o58E3xKUvbdM/\n2beTTjAg/YRGUiJkXoo8k8bWVln8yM3x7KrUbgeAUVI1NhpnmmqZvsuUj8Gt\n0+l0IVQnDwsQGZo+f0YZ5AkM2q/6PB8iqSoi5d1jcRU/6610dS3Rm/9J7kDI\nHYLPftbiVgX1WYqLteSJXDo5ep7LPnCVpadm76WKz4xK0n0e069VQweHNKh3\nnP1jyJ6UZrfsWdG5MfLXTCJfHVomLngrV/l6UKFlDQSj+x2iHgqqn26vZ21N\nqh8FpioRN3FVfptJeQSfTyHXvNXsRsOGQEnHcCp2BFyK1PbedoKD0tGV2B9R\na7dnIN0sB2tuZz9CPZEBa8WgkwSXgcTv2aRjETZaUWDTXKka58gIwHzUs0WD\njzc98H5dPAHDXQ1W1BieZZdkcYiiM9oOnMq+D+tgZbhR5FU58gfAkasXFlmr\nu1NEiE0gegAiSClAXnAGD8aVzNDTA/k3TL12OWOOeCkvno/LwtBbmoMeQJXz\nJl1o\r\n=IJdW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCcPFe2o/d6GIi85SkRqB0K0SJFvu5lohI5YSXmcsUEfwIfCdB9w8PhDSEdy40fpyzppG3tjtlf7Rr8/O/RSbhlLA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.11.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0_1620731592451_0.1937289606626682"},"_hasShrinkwrap":false},"1.11.1-canary.349.b1d16f2ae52817e4132c952c20e729acde25898c.0":{"name":"@sberdevices/plasma-ui","version":"1.11.1-canary.349.b1d16f2ae52817e4132c952c20e729acde25898c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b1d16f2ae52817e4132c952c20e729acde25898c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.11.1-canary.349.b1d16f2ae52817e4132c952c20e729acde25898c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ibutdxpirXh+oU+oGV12JWvvv9IG0RExaIdKB07rcIMeMOiQoI5pugas5V4R8nPKLvuGwEvQ6u8uNHdAK4KCUw==","shasum":"31ad762d88a73fa3ee34dd5bf4b5940275fd9fe4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.11.1-canary.349.b1d16f2ae52817e4132c952c20e729acde25898c.0.tgz","fileCount":480,"unpackedSize":1109513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmnDrCRA9TVsSAnZWagAA/DIP+QHsjqiBTTRte3RMhEPX\n2ONwXL4yyluakLQJir/SkAm8l3BngK2lprxhd4xs+6MnFu8V0+mz9qu30OpH\nu4QTnLI+AtRmUD24ya2lKKtWaWKOBepV2775vF1OwZejepMKj/zoe1CnkAe4\n/llPs8Fx/775F+Q1GZT/ZEpEJR1nNWlk8IvQHatBhhpn/o8iipMuo8IC7r2F\njEh09tBn0qP9ZwW3ztopQR7uWOyIfwcpfOqUqHe+GLhHaCEKe+zYMNfNcMZk\nMx5IdGHmRjrgLU4/bOD8/M1Rh1WSlWcmiEPeddYU/hX9sidAwDZa09tkkYSa\npQ6o4knykOXysnmW5mO7m6JvPM7NcN/Z+Vq8AR+di1ybN0E8SVizpExRPvXG\n/8QBX9OcHXQ2D2EVir30PbBEW2/guATbQlBllK1rEC9U1CNpdM5ucXFzEo9Q\nSVO+EFcJLrw9ax9cGAc0pKbnqP2YVLHSNnGcDs+M+oZV+BUG32rnMycK5kx2\n0hHYfye6p4xONJPuoroyoGrDQk1CHysoHI1eP9ifhOcHWd6BaayxmDKE5YMs\njDpIPYVkbt6ZLXAB1wL4S4I9wa/1rp29paoV1bJdV5dbdIvch9G4Lfb1dmpx\n7E6m5u6AzvZGROjdcWt1r1CNrN1PD+qAHhBEghBCCG8lx9H8snuTEn+0TDL/\nFPYs\r\n=Zl4x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA/AwpW3o14XD7fwBVahcOWmtlR7VeiDz6kLkEdchI9wIgIT6q6Zf/xiSOE440F2iIBplgpjKbCOV+m0JnYFa1Tqw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.11.1-canary.349.b1d16f2ae52817e4132c952c20e729acde25898c.0_1620734187240_0.2869837274762592"},"_hasShrinkwrap":false},"1.12.0-canary.345.177107cdf02381a8c1b2bffbc1f205e03dbca791.0":{"name":"@sberdevices/plasma-ui","version":"1.12.0-canary.345.177107cdf02381a8c1b2bffbc1f205e03dbca791.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"^1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.0","@sberdevices/plasma-tokens":"1.3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"177107cdf02381a8c1b2bffbc1f205e03dbca791","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.0-canary.345.177107cdf02381a8c1b2bffbc1f205e03dbca791.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-424LzrsgSVK64GQeeOgCrLTo0bIJhenHbzUrlImdQw24OGepSc8y2B5qIuyk7V6K3FpX/2xvm1Y8u1/D7Zi4VA==","shasum":"faa82f8c5747d022927f1f3e04f5ba7f3c364039","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.0-canary.345.177107cdf02381a8c1b2bffbc1f205e03dbca791.0.tgz","fileCount":480,"unpackedSize":1109552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgms4uCRA9TVsSAnZWagAAY5UQAJXfyqR8epb398TebbfA\npSnp+GDApWr2riF7W5zrkGIi/holD/CSXjsjwDX/G2ztFm4xwGFq1u8jWDBo\n3rtoBOW/JDPO1YQvE2wSkh2RlsBInyUl4UwJ8i5Bhvv1eEXsdqlD3tAlmnvT\n0Iw5wfa2x4Yjm2EEndLKOilDJ63kfxQhGu4of6/QRDuLR9RNperfyI5jMnYW\n3iSV3jgcgIh25M5PQz2xiNbR3SFrlftqfQcwSb4FmMVz5EAOEPB6OxC1kFO7\nCBcyZi4Cbor3lVrLHP4QP4pg0aLTAXMSoDyQEThuv0cSJBZ96Ifep2clqWRM\n9Cg0UmNuKaBnhV6Gp0YpmJ/Ud+6B9iYwekFSoAOGl1k3xlkKxIubNxM1SHJt\n9QXQy/8awo9M0M9/+O5pmimc3bLhbKZyUJj3FY6ltmdsPvxLdpDapbJqlUUa\nuNRMaE4+m1wIslyD8YQ0INCC/Rhutk6uttgFu9MkwAqlv7McoXVYzifyqbeH\nFTaqhu36CPjnjbPxk4IuyS1nbYYPkPljKn6Xpd/nFzM1z8rHj7fWq51PNoH+\nWemx7wf8fD7YZMUX2Zb6vgPIoASKc0JZAGRMUUGi2EE4ww23BuajQTWbM//U\nhu/wkX9mHkTNOuMzC0i/4VeY0S99EUDmA2yBRK3XeXqEcQOB3PAYGhKRw/Xo\ntW0E\r\n=6fki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyiGI6FW9DBf0lv0NpUr7xmpp4VbVGyzkhPnSYcXzhRAiEAi86aGBwJWd1QN4d6vTsNOFoDFloy9h7JFl1cjB1oTUc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.0-canary.345.177107cdf02381a8c1b2bffbc1f205e03dbca791.0_1620758062376_0.5911055508206462"},"_hasShrinkwrap":false},"1.12.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0":{"name":"@sberdevices/plasma-ui","version":"1.12.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"95a85b3f7a9e8f9350fe09239b0e22e943fd52dd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-70nvBUcMp//nraX40k1tmjZisdRZ3/63DZhE3yp7Fk24cCMSZgk5khnPlw7GqGY4XvQSr0FOHoF/e2ZpCv2oYA==","shasum":"8693674cc84a6828675e97e1f3039cac231aae84","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0.tgz","fileCount":480,"unpackedSize":1109662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm6cuCRA9TVsSAnZWagAA530P+wevkIaq/t+YQpGcmbTk\n1Gt8xmi0AwqbtYds1h6AKVxpYv+Hoa3u4iAh9SJAu3IGx9BMk5tUuHdf7ADs\ngvyqfcZVEv53zzuz0tiVZsT15q7V8DldC5XLAwn3/3VC1lfSDiqaPQ/NdVlk\n5nW5AqXQKZ4SREd6TJMOWoeGvq2Wb6mR3DEVURpf/++K0hI6lCtIWBG3IfhK\n6DomlPBglZ/8lwEUXaxWzSQ3GNW+73zhaJqEzGjvRtDtmHq81DK+VPM2qcct\nNYO5sT+ec0HQdtg/T5kRluMuuX7p5u+uZ1D5qD+rAvX5wxdFrX/kRTXVA9oD\njq/0/3YXysJoBdWyvgm60/I+S/g+l2TnAHgnvNUcWVUtE+QPf3JycT3tKxEP\n5hjCotUdAeKXWmPGs+iFyvA7QLcx1vGktk33TM4XU8FNwkW5bFHjgHIbiK87\n4TClcR5rbcLFUuy7fPHxQxRUJLpUxWwLQgFRRO+QOwjb+vcSaIADVO2CIgZu\n6s1vebc+jF9RQ7AdmtEeFg1tc471KNz5oQLbU9rgHUzM6MGyg/zgzPy/X/M3\nwD/v6V1HcpmQroJUUQtqq3ogugY9unqRqoRn+fHtP1DEtgIYC3KMh0ifkvEM\niqarYPHmja+P4V6yRJuKzcklsnz9h/e3jKLzvD1SQnJLuyOlyyVFTGjZg1Fc\n2e51\r\n=KufH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXl6EmBrWrTQdP0FkfQU/oh94gKkRfbNxUGjUFUWezcAiB/U6jiUEXkq6GmacFrre8WUnFZeRB7wm95+QTeka0vsw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0_1620813613678_0.017128600659466198"},"_hasShrinkwrap":false},"1.11.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0":{"name":"@sberdevices/plasma-ui","version":"1.11.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.7.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.8.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.11.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-BzeFkpBu24ETI9NFS1i5rwIVASXzL9FC2kyJ0hD+z1+Mgh5fC748dpUq58G3swuRC1iU2BwSAswVh4r8oyVZ9A==","shasum":"de6dbc5fad93f04eaee91af065164cf55a4b0a45","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.11.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0.tgz","fileCount":480,"unpackedSize":1109623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm6+HCRA9TVsSAnZWagAAph8P+gM02dulauZasmXyiiHJ\nUEc+uomj6hHu2rWLfsfPspXPnOrMiH59QsvW8JxsXD+ecAbvoFto2mPzc3Zc\nPa3NqTn5sS/6G+9o00FsofAMf6kzq0vrTBrFfZOcnv2oA2AOYWXJcEPY8C03\nNoZhqID9ob5wJFdxynBqQ3izv7y1lkAmjOkZPp28FzbYR6iJ1Tw14ksbsjHz\nDxuFdYIRMbgMJsowkwE2cAWRY291hYALM64FtZZ0MlT/dm9tkyqHF0aCXbm/\nRt7mNgxH6/zjlXX7bBh4A07jE0O+7d74qYYoziGIVSXGqX6flZM7OnjRN4cc\nX1E9NfgrNXRQSVTiuuM58JlWSNelBiwuJogONOmidxX9HoVUZhMeNQ1bsYhg\naZsLCU6PMza0ohE47ye92iiX5Q0cMCRuRYxxRtWENy/oRDT/wLidpWTXnyuj\nYesxtW/FheTbHFSPKJrQHR0AQ4dxVudS52oStQArN3n6AEsSef0TqluHCGuL\n1OgKMeIfCmDJy9e5GVbHSuSVdHHzWRoeRqLWIGpVbGf7IZ69IzMdndTOY60X\n6bU+Y3tM5hXhl7zhhoTjUwE5tq9MqxVAevFjfY3EDL6Uc93FgMasnfSbwzPQ\nQogFue+LkQHCkUeebQJ0SKi4CFtTWYh8NKiSY/D/8RiDVOXCMMHsxVPgV/Ya\nkVrz\r\n=G6Ho\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+UtRe6DWrw2frzF5TVOJ5SdwORwAhsn+ZBgkyXNIFiQIhANoX1B7THnUwX60orjWQUL2PtqKu3l0T2cbXG6qGjRar"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.11.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0_1620815750756_0.7778821397538729"},"_hasShrinkwrap":false},"1.12.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0":{"name":"@sberdevices/plasma-ui","version":"1.12.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8970aad6e516e29b68bdac5778296dc829214c52","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-CjbLUJvI00Jbz52dr+3u4Gv3zUhjo/YROjhCYUPErDN17uCEiYj0Cq4oYWakt1eCfYkanqL887uqNl7+L8GQqA==","shasum":"2c49880a537667a4fb18cf46397904757ab89782","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0.tgz","fileCount":480,"unpackedSize":1109860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm+tZCRA9TVsSAnZWagAA0kkQAJZz8rzfJWNsOspKGye2\n5C+c34JRQl3sFSDNQU0a7mXksQyORc1MdUQFfwvknp7U285OYZ9BRxgXWwCJ\nxxyVMJnIPN4CuGhPJ7zPofZ0QuTV1tcAJDdW94NuNLa1Nz2Czt9J7KVybpES\n0b8+fTS1tKI9fjO+Xp4a+bB0tTliWFL6hRTv9tSQw5lXedkRYEXs5MoCPetA\nzoK1xL4eyZS8oMvVUCcXUW4I0bCn+c7j1ZS5xX36wCoWof0/39DDekXP/H6y\nKjeFCcikkDOISZcQCh2ZdWvXkaaP2kJ9J4hY8+/Xs0g+ClmxDe0xCtp6MGqn\n1HrD5atbUvzL3ESn0karMPMWl6FivSshR/zV0qitwtZHy6vR3H0OzQsT44mC\nH0YgbDWms8C1kiKgjyaNVmE4axTNCmx2pIc9UaC1Ryxx9HmjoEUKVGvAqkiy\nc+9yLkE3s29WFM96eQ7ibhSSE06+mUaC8zqfJytgqL38tFwA6RQglWIrzSXr\ngOpe/zPFAnXG0FkmMCdifq7ci8T3rKVCDHgZBNSooZBKUSnYZ1DSb/WIlGAk\nbP2Z1/3LN0VLCR7j6E0RkKm/G6vK38HtfFnwCRa9107E6quY8Om8/bIaL8yJ\npsqie4tOybqtNyrs2xzVk0acqhdHN5zHV8A6NN519uRNEbe0Q0nikFFrJ6pe\ndzSZ\r\n=tlHy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgOOTe+5QHHT9Iet+/Xe1NN/jKcnv39BYmNUO5JoRurgIgFvLE6PwTtkaFNGB0Ws6Pp5Way0kaMrvUa50erJ4ycdw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0_1620831064950_0.2365861254369288"},"_hasShrinkwrap":false},"1.12.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0":{"name":"@sberdevices/plasma-ui","version":"1.12.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8a7d3b55974acb75670da92cbc6f1cd27574c837","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Kd/dMtTjb1cVRH2nHVD+yleBOcZDZi1SSkG66grAW72Hfc/JMbrMqpPmRGXCpimr14f44bUra9tNl25bxLStpQ==","shasum":"feee11e661e822d65396b1e7bd55b4bcd635d89d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0.tgz","fileCount":480,"unpackedSize":1109860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnNPxCRA9TVsSAnZWagAAArMQAItEjUNFzr+ud5joxT1Y\nFQ1q8XKolM4rd6F3C1VpWeqJOAT2XxVDP2IWL/NnHCyMcs1UYT7snQGi5hcp\nGexIQ1mZhpcZmL18xv6bJ2YV42+8O1MpioyY+xfh5kmgigXeTJRSorbl5KPt\n0xSINf7u+1xzSH+eNvyM46rUahDe2/yJRINDx4at8gN4dr+S3cgoOrJBTUeb\nRp2ynph8H4MNKJIiLzoL2xdily1Lt2+7G9KGFStk/B27sdtX+mviRCbj/60F\nWF7Fap1lrL/oXIwUmgAlZ6EIgDETP/1UH6HvV72CkJGpA2smOL02jQprFbM7\ni90y7dYiwXe3J2jPtwRTI2Gcd7UjrAzcPJkIIvZjsF1MyrQYlQHicHmQTGOn\nr6FKElnmVV+axPBL3qACI5Z8WqZu5NKaaqgemDvmyniqP9P/G9u3N7R1Irxs\n0ziuBk5IsDVvV/BylWdgWutVbCdHd0AarLjgc+7zUTLVQfGut1+vew0V5De3\nfdCBB9Ac+1ShSzxZV5zLskNZKKfBGEcBBHz701TLmCAWJALK+Bk8feDxRmBy\n4AUtiYzaxvLlUbMKY2YYihh+c5vXr7NkPngZH7IuSBI7ayyLMFqhebQ4yal7\nIqilPYKZx40ov3iKOq5mMymbnDaxRyVkhRVmj4dhXGMOjAbQBlE226zf/G1h\n8uM6\r\n=Ppuk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvgnNa8Avz+BU6qDCuTE/aa4UM+tUXlwSSApXcVI2SugIgKorTvQqSF6niTArUKTKDeVm0ThRRU7AdUSaBAh5zxGQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0_1620890609258_0.6589993230368352"},"_hasShrinkwrap":false},"1.12.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0":{"name":"@sberdevices/plasma-ui","version":"1.12.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1413cd02f0eb5734c4a83abd5f725f2b0eb132ed","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VM4vbKgIVdGmlpvawl9QignNh8IAoEMNZYEaRGqOYUrSHzNeLYrjbTQVURDKjWxuuDRKV2vwXsC+yiHZQjjh1Q==","shasum":"dbd9f9f30e467e7281e84c3900bead079597338a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0.tgz","fileCount":480,"unpackedSize":1109860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnNS3CRA9TVsSAnZWagAAzskP/39P8qjuptrArfZyUUWq\nqTEcmLN80vEvRcRjqR85F23oOjaUugRlSOjwF3LuNh9Gkxw0nc3ZCUlxm4cm\n9/zXMsD+AkJ3wPKicFBJnATSqWztNiElCie8mhLKzkbyXxJORHpqm88qqkFQ\nV0CmQq5PHz9iXw1DMTUng6G0s8eCSxoGpLPDaRIDuA/L9cwkwkRfd9ZBM/j4\n275kJ+720ZFcOUpMugKy1+iFDNYeQ3GTIDMLwNWryhHuLGkZqEW0WHdNEy8j\nh/11Eno/ldYDR3ZLdQzKjYR3mUqVc8P+g1DadpFhR/X/pGS+XF2dqNoFSwdX\nsqvEF3Kxsat6wf+Mh7IPcGV46dBY/DEz4yQ/gAphQzUtdQvBXF5JimQNPQB9\nSoqH+uqmo89Y5wg8Oc5fGoF93iiqPl1cvzM1FqGXd7vXTCDwUGmvOcgxf0HC\n85mv+tk+GxoyPgS6dAuTIRY/e/XMbPM5IpM85B2tvVcBf7r5q3BZjf17rGsy\n4UAhOw7gElrJIkkVPQVvscfffyDhlsZz39rHpO6vxSREecg+w64Xm8BmuLQl\nMNay8E/e5RAFjkZ0MdMCWbJnJg6v9awUJAZCaiA0faHdIRO6QGrD9X+J8jHT\no2/jbTLODBmRnQ1FxAjto++ESd2FBxiVjIBSXxo1v6XFWH/FeWygdfUhlhm4\nq2It\r\n=mPM7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS+U3ZygemOihKdBfR38oMIXtawes/X8+okkwTx8tX8wIgZjLN5cRli6O3amvafsWwB1BTPFFo3s+dtMk+PyZgEnM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0_1620890806642_0.43622859521511614"},"_hasShrinkwrap":false},"1.12.0":{"name":"@sberdevices/plasma-ui","version":"1.12.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"637dc8e774918094ed71f2c2e387186d11c07b93","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-TKokfXPCOlxoXW/R5Y6EU8fE0p5KDCa6Zgf4l96hNlUHTeHJtAyz7uf/Fa8sk1s0SCkMrDIrQevyUZSMZju0Og==","shasum":"9e4f4489f3b0f111521610df88fd76ac24c7174a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.0.tgz","fileCount":480,"unpackedSize":1110480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnNjlCRA9TVsSAnZWagAAc8EQAKGVLYEdqIAER9GpTxDO\nWg3rpNTIT8a27HFGFU2C6+3aq+bBtMzBnXDavuCQl796AwssX2L/EgeD6YWT\nG/Gv1eMkJaVfjs0xPY11jkV3EeSobin0v1qV5wrX3FhGRTKf1g/N761yCCYz\nf32K1zkJIACen06TTtOIcW9AfVTXs5W0Jp5RnXUC3wyt9vVoH96yhztzCY/T\n0HKkC6srgusnbI8B5RIcIgD8Ok7pt9V22y+cYhrUOFxPhVZ0tOX5N4Xe7UVW\nlbutaxlqcrlhEBYKwBWTjobpM5RfpO72wIgi73JQZXmqsryxagnUnC9srTT/\nEiPOHVFRCSH1shtSuP8twJG7xMGCaJkS4HKzSYQpA/HaEQYOZ+nsgAubtzLo\nwfg7g1JwxpGKcUjdj1B4o43Z+aPgvwROIbwhprHWdsnZKFK3+CZBLlcSvcjj\n1JCKtiSI1EEyEeLopX5/8LJvHpyp3DjLISe+SYcxELLiKdwwM2IMze+xyHoC\nnD18RWANUkjOQaHJSN1J5PNZvN1fG4Xm0dBo+mrDAi4Rg4Y2YQr5ihbD3tJh\nTQSuqAAO9Zy+8eKEKAIKkipXEL5afUl8OapQPNYvr0n3K2MUlDGwgWPsQmc+\ncjUha1rhlt9Cdx6lJDSq5Qbanx+nW2HhY7xXnh1MVA+sZtypH65GXsHvgkGj\nBuAF\r\n=exZ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnmrpDlDdYyhm5nt9i40nLZUADcIf5JKHDpp4YFQDXTAiB8bI7IeHpxt60OxfnvgdfKXr3UkaPqUud/lT9bckVQjw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.0_1620891877219_0.24240305065096468"},"_hasShrinkwrap":false},"1.12.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0":{"name":"@sberdevices/plasma-ui","version":"1.12.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9270f125b9dd28154c9c834059ddc45a1903ae29","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DuQl4pNg4Ys8uOxNExibWf47LSkiH/dOGpe9hzQWq/HAco66xe90bl6BvCE9J5e9Wdtp/3xVsvN6c2DL1i1u8Q==","shasum":"ec8acbb657336e68fc468ea680ba42c848b68ef8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0.tgz","fileCount":480,"unpackedSize":1110642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnRn2CRA9TVsSAnZWagAAu40P/RR4oyfiIyw04TQNy5M3\ni6wndZaGb9ewVuhAB/CXCyqlTGH/wGJUz4hdxTzG23vDuw3czfEzA0mjYC3R\nxPyjyZYC5wd7jOP2Vf7phfmPH8k74u3q8lV0ZSRyUtDXiPUZ+S4Py2ZdAp0Z\n/bvQuLYXmOWYdLCVgV5EIjkX+HchzazYNfC4Aq87VoaD3O3jwdhb2x3UHGhx\njboc2KaqVRqzl0ncoR8gycrrgwXk34XHsO+ffEsPHRq8XPnSdWbT7hO/TEUI\n2GbUDv8DXNfHoh6cKuMrxOZlVFHBErgvpLJaxygiPX8tyinufyrdTNxbc5bF\n+rFsshHEJWhA4wbuBWSYKDo4T1sEKj8Nguf8i16ZO8tl7/tZ48Fqwdf3VZQQ\nElzSXoObNtABvn5G+g0SB/iVRthLOin9AGo+SPibwU+FLEiEHbIjjV3/VI3f\n57UgkFvrDAS5iDpKZvHt60gEdbhc/wgQ15qy7X+0flsoPGcAf07PrLrrCVVE\nayog6hl/cO/0KbyL63xQx5j5FE8x/FiI8YN0BEgvtqjmXrIrq+YxudPQP6k2\nRUF8vTB25B9+1wgwKeAWp0yYATM+7IQXTM0UCti7uePlKNNg/cP7MQNQrt3M\nbmQunMVHNBJok8M4wQje1e/ztyJCKT2xaQMhXFC6WPwxYe/bMnZ4AWBvq6do\nTv6Q\r\n=AJEK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrPjSWpswIyjaoT7ijmka4Jel6HhO7Hifc6PceE3oTiAIhALA+SofuCnglUNKczCVzgWYjsEar6F1/y4+ai57pRqaz"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0_1620908533549_0.24424599358772392"},"_hasShrinkwrap":false},"1.12.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0":{"name":"@sberdevices/plasma-ui","version":"1.12.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4ebcfc2b129ac844739540ef8df0dafd302969d4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-wuLgb/uP/Eh+69YTUXDRoS7nQcUSlHUz4UCxVpTYPxRgCDhnITZqoG2qJlqEI8713AAb2QLi4UVFFs4kzuLNcQ==","shasum":"bb7ddf95d912b5157a07b4d9adfa515c77ef8822","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0.tgz","fileCount":468,"unpackedSize":1007398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU5mCRA9TVsSAnZWagAACWEQAIBf3qLr4/6GeFP3VIOi\nm8u3ScBwY8rYfLnSvK8YTys7qOZTcCxlgGm7H1IIwEUQhCvh+T3G5yNS7OH1\nZK/dYEb3iitx+Zh/NRaVpmEW0YN4nPhASukJOKr1E5fZtPDC7sOR/mgJbQKG\nRWEP9RtaWkdufvut/sFLsKplxqOaiB+0qHqZqjee+80JkmUXWWOHi9DErPW4\ngFet3DlwsNQVoQaW+FDHRFw3+9aBr/wQL9OptcjhVSHewbX58OBkTuhR8vKd\nJ5mr01KyDCw6/ytP19HFv4JgkLM+k0XPZSkvkYb9geiZy+6580ymJ/AI9lle\nfdaIE1R7XHg8L7dME/DCuGeAxTY8i+h9G59Ix1yfYTLr7lPFP3QgfF3GCQQ9\n7zkL1g8ii7zoLQX4UyMc8tFLbMxZDlDj2cZHdlJv+/kYpU4kJU7BPKBMUphE\nNA7so7UW37LdPd/A5R4asQbbyFAxydnjQAQlamGjLgQxO5cMR9g6N5LJ8tyP\nYJB0QDODOIHXpXhNyk/9W8CkyqVk5oHqD/BnY2e/SJWz6Von81bOwSW+syJa\nzpkr+Mo2d/d7Vm8sPn/eos+Ndr/UXTHliRCrj0csDAoHlPzZvysQhBzVIhcd\n76yzrYmTNrrWKViS9MEYu9RxtuM4wPqEaPc+5TMCBpskjfgASEf3oqJhT61d\nPJzi\r\n=FT89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBItd3X87sVK1WSHg/Dg7W/bUbjrwU86XvsKX2iud7hBAiEA5UPvyskZP1vnhcnngGvdI8he/A01uuIOE2IsgG+dLjg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0_1620921957909_0.13930629784217285"},"_hasShrinkwrap":false},"1.13.0-canary.345.b791016d8f2a7dddb0f899b48089fc3d5cd65b60.0":{"name":"@sberdevices/plasma-ui","version":"1.13.0-canary.345.b791016d8f2a7dddb0f899b48089fc3d5cd65b60.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.0-canary.345.b791016d8f2a7dddb0f899b48089fc3d5cd65b60.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b791016d8f2a7dddb0f899b48089fc3d5cd65b60","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.0-canary.345.b791016d8f2a7dddb0f899b48089fc3d5cd65b60.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Dn43/AkBkBwO9Bay+rKu9Dr6KWwWn7+V4GV9S2SUQOJWenb/BOsYa7gq65H2fzbaEBIqOsmh8bZD6ztHHS5zKQ==","shasum":"5b45caa704147e03c0b38964fb687efb33f63457","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.0-canary.345.b791016d8f2a7dddb0f899b48089fc3d5cd65b60.0.tgz","fileCount":480,"unpackedSize":1110589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnZAPCRA9TVsSAnZWagAA2RMP/3iauN4cGRJgCVICX/k4\ns52eQttW/z94WuWXb+XAarLRHI4s0yljZ8eidmHTGna8vN1NrQ+83auWrLbn\n5CzrBCzB9h5+f0DYHUbxw91xyev/dOmLHgA9WpfuN5tOtiXOG6TjYKij+m0+\nnO8H0Lu3dr/XrZRAZ7hAna/4nC/nbBjKheXZo8nf+otWMcolgFRRL2OPlEdy\nMHb6cWLTV8ZlhkAhFqbdpGaqJ0qn5IaWRpuxFNfIizMh+lXfSpRFV3iW3kg2\nxJkOYXU8GNTa61NWgmi9kohdQTeUGpFeGN2qNO/ZyFibm6DsNWETjBBfs45i\nJqMqfZ7CNGfEF+V18bL98azzE7NODoyZLqKP7mmHRSNyhWjFOXFoihAEUA1I\nkatfWeoVcjBT5cDH5ixgAKzEpSUicF2qNCWOLVKhW7hdOdb0kTeBE0E6OzH+\nH+TmNMBHBR595DcHyE7byeQJFUfq2VT/FJeq06BUNmUOJ9il5UyK3vb1yV8X\nr6Dg+i7/+HkUk9dqddbQhPhdx05bHmzuwpsSetd6cUj+vBXoPO1w/G73bGnv\nyaGZKsT3sgtuGD2VS0SUiwfaIwWOMRuuKKLwea/jHxEhzTP7ou5bETzkI5Ni\ntzGyPevc8niBMICTujCkwE/N4+si8FP6fiV9n/450dlpVK4yIMzh+vr7CKBC\nph0A\r\n=pdKZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7p+1MLPWKFw+QG3kCSsknZFqvn8sVrLpztaBaZxCLagIhAIFgxQpL0dpPWYOit/c6k35IpMtnxuYEhBhhTa/gUejb"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.0-canary.345.b791016d8f2a7dddb0f899b48089fc3d5cd65b60.0_1620938767106_0.11865574620777619"},"_hasShrinkwrap":false},"1.12.1-canary.390.8fc198806a7d0196c2257e7e4532e57d9e8aa694.0":{"name":"@sberdevices/plasma-ui","version":"1.12.1-canary.390.8fc198806a7d0196c2257e7e4532e57d9e8aa694.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.9.1-canary.390.8fc198806a7d0196c2257e7e4532e57d9e8aa694.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8fc198806a7d0196c2257e7e4532e57d9e8aa694","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.12.1-canary.390.8fc198806a7d0196c2257e7e4532e57d9e8aa694.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-NyKOb9CsB7zn74M04mkphFUpPvJpaEF3aBR/XGPxh9OpRHWCAhy1o43ymi6G1gF9JjCe6OiZ1mkug1PSy6GA9w==","shasum":"9621a1ecf3f9633d0cf5e6f716bb0e34827ed2f3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.12.1-canary.390.8fc198806a7d0196c2257e7e4532e57d9e8aa694.0.tgz","fileCount":480,"unpackedSize":1110695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnZXrCRA9TVsSAnZWagAAEuYQAJOkxj1MwLuW9tlmnfLW\n2Ki2gQcaKpuBaf3PNC8RxVKbX3u82e8+TpcxpvryHJAcz0g/Hsw1+ivAMVKx\nlYV/2n7Ps6Spqn0NptzWpeLkYazwfnaHRmhZnARMlVulbtAUzJnZRWSQINIx\nj710TU+UZ7J/ZtdPXy42zEluPr3rhYQqMi2wJQaO3dgkZJFMETgEiqQZBxgz\nJn5duka0cE2x3fShHubxeDUDn4pnKK3UrY3aTQFpmfqE5fRvyEd05Ey53oaU\njMjPn6EExUmnBtDJI+RsOeSLX5kkTjLnqVtR9MhQA245Ioj6PEh/q96+qG7G\nGZY6nhuukyzN+ZzhGxOnwPXlyg6meO6enLzkwQ6Iv2xV2kfShuix3Xppfl4y\n+/nXmSY3RRPuHomEu+7VGvHTqjJV5iRFUZfYSfjwlsd5f98yUxVcNlWV6/lE\nshMWMbqi/aWQ2I57+sL+wi1+mwqUoeuRkYKYsoSbV3Y7holxL0FovsjEv2oc\nDXPD4sI41t0sXgQn2BrNt+Sq4hdYupZ08cLXhn5Ej+Dc9St0U53fZgaO4oLW\nUAR1eC/3nB2/rTBPJfuatM3yXl/GF5yhWGrgZ89N5vkcjcdmY8h8O3o5Hzpf\n0N3bsGFZpjJEKi3oY129lqL5UvrxeHc7nA8mp4XkuPXMYc7Zv/ShWXaHNKtO\n+A3K\r\n=62hP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLyCXPNTJkdpf5i2bmqNcfk+FKnRDmD8gFsC6GBT+yjAiEAwBxrycOYojf47+RZFoqnodOP5TmklATURTrp9MWr0m4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.12.1-canary.390.8fc198806a7d0196c2257e7e4532e57d9e8aa694.0_1620940267061_0.24173100829594718"},"_hasShrinkwrap":false},"1.13.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0":{"name":"@sberdevices/plasma-ui","version":"1.13.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"83746a9ff463793f15a6bd4da5d46063b44b1a0a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Q2dOfGcfyauFQXMXXd8xZH9UxSqhseXp1E43WFPXUgYU5yWj9K/GAUBtMqzU7g9El3i+nTqKVnl21VNxZOerlA==","shasum":"092ea7eb515aca7bb880c960ef088b3c35873600","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0.tgz","fileCount":472,"unpackedSize":1087084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnkcDCRA9TVsSAnZWagAACGAP/3q2UnHOy2Vh2ROnkM4Y\nMq/SitEmxixdABucaFA9k8Uv/Ot+iySuIG9nZV5tB68ckXRgqLbkHC7fpU+I\nKOkfF4UnI979ixuXOHZ2PFcBjoCGnhJIdk4FeVS5Pok5XVnBqgy6M6uj6Rr/\nIKGi4foCE1Xh5hUPy6Ud3rywdXI9YgFEZ+3W+jy4tShQosht7BQWYlMSuK+2\nmbSWn/YvRyEeLw7WtRGNE3S2yIwAYmCIEUpomXuOySMYh5Ww4Iz/gvew0bWY\nL+Ja4RpeKAvML7HMQaxtBf8dyAbeGQ2eEaLnFC2O1fPaV+Toe24bgecesOdA\nmzVMMsLzMX51SzTSHiFQCXb3IPqmsuOI9KXHwSeO+5BrtkAuXhuYMiFnYjIV\nUHpzc25KRYdCbY87FrBkVtysxm5ljdScaEAwrUQvzaMoMG3LpREIbPbscyzG\nDmwj/bT0tNrIrvkUrr7+QXNEuQLNktJA3Qg/k8uIa5TL1BMrsS20M5CSTBVK\n1eREEOILn8HtRlN3npo3uuK3+GqXZ/edDfKyfS6P9GKCwvm/3tdQEu0bIOpf\n/P8qWzabVo55hhmrJ8Fh1szSl4ToohVCsVCkYLdRJY283HkjDIP2zba6kN7q\nSmPX/2YOXh5LBtvpH3hkLu9sVuxjkOG4jL5fi72JJjKdMqn/gytzb4gYYGor\nBUH4\r\n=3bdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbZsmBQMUNyQhsu86AFPPtaTEziNKiUyNmCiz8mMF/9gIgThCPuhMSNkmAoBNxd4g7itrR/oO4EGzK17hLtUVXTzE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0_1620985603290_0.35256760226157957"},"_hasShrinkwrap":false},"1.13.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0":{"name":"@sberdevices/plasma-ui","version":"1.13.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ea5d756c419ca6b11afc912df87d8716491ecca2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-sacD9QYIt9bPc71qpMk5iOhRc2yRI2x0BteqKaPvYGd3d9/tqkHaG/XhozqMujnC6XI7Jro503F9OqdgjSRC8g==","shasum":"45e6ceed1e726d57f6d0c5a8b8a355b49926d155","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0.tgz","fileCount":480,"unpackedSize":1109333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnlImCRA9TVsSAnZWagAAgBkP/1Qr/XHUWGIB6pm+2hAB\nXMTLZL7vEN/sfUIJ1WCaoC+7cKBb4yXcogJX2axctJ+vlRK3fRCX7YMw8UUc\n26xKJn5Yo/YDmKn1NICibTKYSIbUZmkFoxyvL6uwSW79JfOI/hjRbxJho6TR\nTERCMzr5sW52tEHwkCosGrjimyNeLB1POFDJ+L9EJi8lLb96+nRaf3OB6GzC\n1RON+Oyr5qqx8jewxiZFzyUcKdswTX4jEjQ8bPlt7p44bXgEzS0unXgPr38o\nGKTBI8+VX7NNhQixZoo6HZONAtI0MvZxgXgVI2RKYcx23xEY2NJ0YJmKm3Ow\n+rEa2iADSqs/le8iWGeid6F/FxLAUOyTVwAbuUmH9MPLnObcEcOXMzcRfLeA\nCs9ydCVw80iS7wI86yA3RgBPYI9Z5RkT5WIsg4y2IrpXgKfA0No+fZotvxYc\n1BA+riQgD/I3RW2VkNEJgP4ymymyoqnUtf/70uF74paY0ZQ7RR/BkLueBbvi\n/UeLfumVoktQA7tenlKcftmtE3mIIwUkWZZgCD7LrvRpB80aey3DsqKkIgyh\nouraulHGGzmlMUildYZP/hsjJwHqaTLbANV24diGcMqEpCTe4Xbb6HDKi3ZY\nKC7OEUEKc3m8szhCP1nENzYGkqvqZqplZUNKsrWXsSHedbIYWNfYBxR/gYzK\nVBJu\r\n=EIbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUsocovqSBcdRAYeXJxlac/tG3/p++kRhzTlZyZ4YdLAiAs/rfU6ZxAhOteEz1+9yJsRp/C5/rdsKFhdPLkdqPrgQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0_1620988453981_0.4836039032994748"},"_hasShrinkwrap":false},"1.13.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0":{"name":"@sberdevices/plasma-ui","version":"1.13.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"abf8b53bd4c34f1cb42d5413e09226dd4d803822","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-rOYl9A7BEbTdGE0FOU1IiwiWf5OlF2kEdHLecP11hhb4yXPJDMZoERkL7fcdznadhUKqtdRwSZMqCdRuLmt6Bg==","shasum":"51a7d4d20777bc177e57a8a345abeb1530ed1489","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0.tgz","fileCount":472,"unpackedSize":1087084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnlQwCRA9TVsSAnZWagAAp0MQAITyjLVgQLZaTa2Yvc7H\ndfEk0RENeTTqVvwVv8ADnlat4MQ1mXGW1BfPLSTcWTFkH6JnJ0FBQQbD+N8D\nOX3Ry2r98EchuRpRKhii97073+1VojS7tGxj9dQxijo07pBizv6uEPkw7s6X\n3jBvaxmzY0ZZnhQaJhA9h8+g/p2QOzjaeCIRvFoVWPBvp5Z/ZqGAYHcJou/C\nvpACUrWK0uuLtVD3x7qjQu9IYfzNyW1FPQUVsQvwCf2S6bnMwIfnRp0PoRRf\nkoAg2Y5IDY0xPZnt8rVXFNza6voWRj+UP1wanW1HBSMKib43GrDpb4sq6Bdy\nsqaElZhuXcxamJznklYhWb5kFCxJH5UDdFfRC7D8XHNsuT3foqpfcq21h+Lj\nMZfHHf3nhQPjUb6WAq8HHiz+HEwNz3yyVSLTdUmsPwys10/vY6HWyndJkbTM\nZaPGyiqGrFN4lB70YlCrBTDud8yvXFCzCQN9K0jH+m1wpiPFNp4RI92MdXQq\nEyYD9WLlGiqjtbM++a2PcyJgVNha15athd32Xn51drKQsWRN3oaHEqtNKS3g\nkvoz5EisATi5Lt969VcXlxoJ8uZIb7bNAcU0tybRors4GTK8PFWtvoQyxt2y\neXA7gRofKQ27n/bkTvU/a//gEihWhLZ5WbDnsApLA+QIczj7pTZUdUEEE5aL\nXDV1\r\n=R6y7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9f/DhJZCxjCrvQyPPlVrReCv2FgDeYPCHrSBHXyQM9AiBtEk/seKBx1s1eVh9/JBlj8DuM0rY+hwd4EQLjIDbiVw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0_1620988976275_0.7950239391702509"},"_hasShrinkwrap":false},"1.13.0":{"name":"@sberdevices/plasma-ui","version":"1.13.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b7fb19523164c2ef42cd1d38afb0f1a00945f704","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-V8/ZbXXqnYuzYvSzWZstJ6cmpAb2ujVIRWo78yiUzAn0fIBLDsUa/7cZOHScCmhDyNj0SE7VwqxuUwKKmOPyLA==","shasum":"c158224f11cfae59f87e33ff86f724ca258b8da1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.0.tgz","fileCount":480,"unpackedSize":1110711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnmW3CRA9TVsSAnZWagAAp1AP/iRUfd8Lt/Ppjwst/+A1\nNvxUOPttqen/IpysVZh1guaVtrJwIaNsyCoq7k7YBZCPVNejcophEy3KEe1M\nAAS7tllL9PjKmN6BzrUrgnQAFwZH8knv3rpOS+ZnDS9fpXloU8i2E1SCnEnv\n3b5+oZdrH/4dDA2GRl3et7+qazW/9By4VGf/3atm0PXoQUlEORNkzo542//Q\nVBPPadzKvOpeBP19BZFGDkLaY5qRAODz8OYCuH+QJ8RYnz4hWTmDT4UPRlol\nPXBiO9hPx5E4yCJn6stGrOvuIiQw8iX8F0gW4OtvO7f6khnGcdUiKuy/aFiE\nQOxn+LfJYgmGByBEDo2oA1L/1HTBMEmiyTqaset4mYQ6CvekmLEVvBSfDzzN\nr0/NmX2ZfIvafnloKtAaFYeGhyJIkR+duwwFykl1uR2TcmvrkBcHB+HEaaHD\nWAtL6oGLtOXn7KX5E+F/7CtntC7PVxd7y6go0cok3q7IWtHLwnGqGnL+VK6q\n7quu0pXdr3v0AEtRHJYb2tXHW0B5Zxck/Oy7vOK7q8hSIIHoDYBMSmWEwie0\nN1gQtj8vudA4rFGTRR+c+zT39ncDR13b3pWS7opIxwKD4LlR47hpxrzPwWmB\n+1j0qEaw05tt+TOJPagExBRtb0E2jmWmdhTe6EctjPdjwYOnbmCRJUfpPmS6\nLhRu\r\n=F5Fm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCCZwjfsKgk22NArz/q5zbltLhJIF0P+COyMqrB5fd/gIgbZo0UZvlAbu8SM1rmURueUSBy2quj0QGPK7tF/GFk4k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.0_1620993462947_0.3552060093184375"},"_hasShrinkwrap":false},"1.13.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0":{"name":"@sberdevices/plasma-ui","version":"1.13.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"20a5743f4dcb094daf0da912d99e341c923db556","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-IANixyA+zFmaB9gBMguGIiya07cfyyeg+6cWmtVRdZLOtZsyjQXkkCN2o9IfDi8jtL7zkemwfiJoJQiS41fZXA==","shasum":"426c1689b2e3f408b2154031b4d65e42de1a59db","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0.tgz","fileCount":468,"unpackedSize":1008649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnn6fCRA9TVsSAnZWagAAhR8QAI4lbhZb63/Czyes4O93\nm956Fl7ZVLTUBncopEQwBjGVJd3St/YDQ5BdiKPuYEMW2IOrOQLXeajLcGlL\npm+S6XeTQ31baBHhqt9x2mwx8L0kDhGooqoB+Vnq8L5eHuMSpc65viVhQSgH\nqLu5VN49CAgFjARhzaaagFqTc4LQIJFt4oUM8W709cj7/VmN8qGip/RCphxE\nyBvW2VBhO4wmQEylES7N/GrSpuwx7yMPhm3HrXKxEcdsQz4tveXYTMc6F2Vc\n2Gc3M37N7GynB6XhukmjTmKFauIhyNzs128WK6x/hMkD2DyPagaKyCQWI/kP\n2mne9V3XTlYyxa4ZKj0H40qE5JNZBFeEh9JDVKZHk3IsTr7S2/hf8/onl84v\nuiBgjXvKhKvZ3i2JIk+2us3C/lyxsazlTDEPEU7KmNDfsWTTwAVQkknZdJM4\nu/nH41AlWGxJBfqA1N6kC5IEw7WoH2q2nwjc6oPBsi0toGCa4Z6i8lVurNA+\npWM1WWm0a5dZfGBjBXcu98NxxfC/89x4X/di7xbbbwcDJLMvz7bbOrq88oYr\nZcDEROfHbwdDWzXgVUnHbk9TxSkuVqepES27myW7dDAoikVc+RrpKKrOIWPz\nS+HUXJzpbP40cA7A3FdM9FWsB3zf0804dRYvhNb0seq1b9Ws37x8hh0MED7f\nA298\r\n=vdpN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/Ad8uyOUpLG0VdLWlnYFFVOvxK2I3p2fuCDCzAsiP1AiBe6lyKsdKxXxB9yvPHPchFndGAJBall3roUauKYD4Fpw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0_1620999838831_0.14861920317341082"},"_hasShrinkwrap":false},"1.13.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0":{"name":"@sberdevices/plasma-ui","version":"1.13.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9bea8d5887624dd294d16560437d28a599b5af41","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-bkbxJp6ezB3lP0AEjr7bhLCdguxH7xVymUSiAP2Yr8NflabsFwWUMYVUofNhSF8BiI/CallzKyDjVnR39RObSA==","shasum":"92ddaec1712077bf28c6e1248fd4472d2d901190","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0.tgz","fileCount":468,"unpackedSize":1008649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnn7RCRA9TVsSAnZWagAAaWgP/3kQLp2FHS1oScFtmnBG\n2shaLaeqeEI/vt3adt2Hrz99amfUgZ4U0Fuu9BP0mS0lAkniWaxbxzBf3fbu\nJIsvYEXV3LwtLpdrhEv50rWlIoZeVRsYNbnw2XA0COiW0rnVem+/mPvWIQqd\nqoxWNXRKoQIyTzTpfaETdFREUcdENCRudSta2Yjn//Ng/5rFwI86A7z1EMCh\nczCE5stLYO4pc/zWM2Ty+nJQgy+nHNaOhwbxcGUjLR/v3O9M5KmGSiizfBpo\nAsmJONifkYKQc0Z+UqGjnqxY5bisspOSvqbrk2YdM5oryvvYKvEPlw9nryxq\nmYo+IuSRPz2AHPyLzxDTf2IpU5hhMKJIekMoa3LBTKs4H2twzzLaqhB9Cl+8\nPmr2VTxsq57iYWUC6BJxOZe15mK162D9VVtdrHDtqagbbBxXB3Gg9rQhQ0+m\nr6YyBTzSK8/JplRnlJ4Xx5F+IMraozjsICHqa9jugzcf9fr0Bl0bPl0LHxkI\nVqNE+kD0wnPDqbOEa1RtHY0fk7AaoqXMNOiWpc/SjWAlFj8wHiqrJyBDvCT8\ncQ2ZQ8BastvOCvFB15BpR34Zzr2+bIZvfBcJ4GjYAYrmI81lweR3BmJVRCc0\n98qVYLoaGrN5uvfuQj2Ql+Yn2I2oLOaets8EZ545UI/wxp5QFTs9394KCfPG\nZRXQ\r\n=pEDw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdYBQz7WZxGG9x4Ei4ugNWZ7OvK1a4XUr0auS9iPnDtAiEAvZYX7ERG2UzyHWJBGi+QjmpLm8hkUmXFfHLoiEPjXjI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0_1620999889316_0.05785631763737009"},"_hasShrinkwrap":false},"1.14.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0":{"name":"@sberdevices/plasma-ui","version":"1.14.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1161d8f32421b2fa2a86ded14223bca9b1e22916","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DgZ/05/h9U025T/A1w3Z3y4VBJejW4AmzWsILwKPfkjXWqekmtBlVEVCvYdw/EnZgh4/R3jOo56C5DhGAhMvDg==","shasum":"63ff0f37469a49ef94940e35a20846c2d424f601","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0.tgz","fileCount":480,"unpackedSize":1110512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnoy+CRA9TVsSAnZWagAAXsYP/RU0KXPXxMlyfdtkT1/m\n8uzNxQFfilN1HpAPUBi0qjyka2xyal/g539t39MWeVnRMtRFkjpsriEw/Sdk\nEqRc3IqKAFT6DUrfE7/ueVdpwAKtYAzcvWCt2XTECn5yb3l4svLfU/T2Gxxh\nz7be2V42NUEgL53kd3Xm5qoAlBRXXlW+yhAkblQgIRPwOm3r4q3F1Ri45ipb\nuJgqjzAYakWxFpwCuKCP6uYYafIF3zgPDQ2N00/GKEye5t52I/ZMvysyrCQD\n82zZ0lRX++0cV6GGTj9TEL+JTgoKUIISdSRhJiU4BD2w3oAg/5G3t+6pMLPj\nHPB2TyOnJJBwswHlFcbqed/B+hP4J7I/PH+PM12KLTlKAKtcLu/C46mcy7uP\nJHZMnVz+htEX81FVBA6q4TstJG5fghcuwf/5CXMkta8MGtcpSFcLSvZnZuAw\n3eQsDQNI0Gj/f7qHtUpCYIsGrD2mM1uUG/Zo/PjSmx46RFZ+d3deLOl091+d\nOU554rSJLejDkVIQfF+l2PgNLJmzp2rZ/6SYwcOr5b7b4B/v9GeUB2IxZhzw\nVRHft9E77mO4NEcaPDKvMpxFFkz6pbtlAHX9T+xAPfWn3ggdNQRTVH+uzjbU\n+KRAV2HzeHRYYyFNSH7NhQ956gps3y2mbLon15qT9W1E6/Cf3zT/lhiMrPaw\nmRr3\r\n=sz/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuKK7F17DzQG7a22FCTp3g1GQcBPMUNfytSeWGpL1MOAiAA7YSs86Iby3h4uS3HH1arvdgMJ9OQoPe7dbwU35R1cQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0_1621003454140_0.7037428571128903"},"_hasShrinkwrap":false},"1.14.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0":{"name":"@sberdevices/plasma-ui","version":"1.14.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"59a62ba7d3391da0e8602618635fe81d7f80b895","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-evLYC4OTGWrFTt/bxDRFx6PCnb8JZ76YrvU2xu747ajsa/TBBCbTc90HDTsMh50o/WxVXgZF8w+Bn6vq/wP1nw==","shasum":"50431edf89a1bf2e69dc55ea30525c1acd9e7a5b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0.tgz","fileCount":472,"unpackedSize":1087314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnpv6CRA9TVsSAnZWagAAiDoP/0NkJQPE24tXw64gGrd3\niIYUEbwqr6/maBnOSVveTqM4mqviqaHJiE/sG1pJvJaW54Bc/5T0tZUK6yLi\nQDwS0rjrBO0Iz+PCct3ZBpkvSnkmaLAF1mtJw8Ebms/P7OxfI2F9TrfRBkgY\nbJQYKFYOYvmm1tNQjZkD1wmPs6wA7cUPdFISvf35pPjXhz21k1KxXZtKkEwf\ncE5UyybpJm416llKMi4JlhjZ5MovGwUl6Rw2mURL+BUsTsOevhy2FEJyqyij\nYCzl7Ahdm7gkufq0Sg4Qx05WnRiPvzGo6XIy4BD63AeLOcjZahtWptsx//7D\n+CAnG3irO3IfA2bVv2PCkk0R6MzEhO2MrEEMQtgMEbsMeoc2/trXiOzQ1YQc\nNihLh8oJZRf8bOJ2O7GKiKMOwM1UiFk5bL1SWegLFaJfsIhmCDYTZYAkSa1x\nAKUNpRn7aT3ztket8bB314RB1MqcteMU/v/fyUvzw5H9axkX5k+7n3bCbYBp\nbN0QOArV8cbcuXs7thkDlQftbG7rzxuR5unQHAP+DCWsAu7H/z8t8zlmeN7W\nPROi/ElZyblTnwi+AoSZ8ak3DWMUWsS5QSbItQsTGCBrVXTVh4p8ruLnGFVf\n1zinKHp1uZhSKkcSJocOAKMHRkB0FNsstBLa+fqxPcWhU7CyaAOJmum01XYo\nyaLL\r\n=p4jw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdQJGsq5eW0xDwBxey4IFK4fYDubuR5AM+DgNg8tamugIhAPWf0NQDloxac3bJWVllOG5mR0NAfFTqm1SBrE3PczBe"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0_1621007354321_0.11690901261644071"},"_hasShrinkwrap":false},"1.13.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0":{"name":"@sberdevices/plasma-ui","version":"1.13.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.8.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.10.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c748228579e1f229faa4b6913818459824e3939d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.13.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-MEH+eIU4aw60g0LaEzSfim+g3YZHgHNX8oQHkAfPUicOaV3AhbhnCKeWzHMOv3kQjD+BFTt55cSLCgbj4OdyQw==","shasum":"a4f3238dab7375337965a9a5e14b6e24dd14e10b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.13.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0.tgz","fileCount":480,"unpackedSize":1110873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgn4asCRA9TVsSAnZWagAA9DIP+wb7qdkff7ZczvM/4keQ\nVQ2Zchramo7DCxOyXYCY40Yk+zVLptH4/A4Dt++rPpnzXlXcti8iNbNQZUXj\njvOXZNqazdoDIx4HldSWoSo19Rtz46Pm8ncFnhX/Ldh46FjiNWe2nCJvM8i6\nsfPHIX64loAjVgWfdN19rCOaQrQRwUe08ejvgdajh6kEbry6oTTi3OrIHO69\nDuyHXZqywVXxt6hwgVqagSItMkj1Pfd8gZ9I44HKK8Gqkovoke4YzsgZYGNq\n+j1iyZwE9itHcvyYeVaj5civaj2o6+enV8DsKWkNaXgnKbWBz656DcogUNBJ\nG4Y5wwWqIEMEXwxTsJ0If7HfSXvxAuHuX2MNU+ClMKZcbA+iVJ1Io23515aJ\nxxVLaZ/J04mUpa+56cvZZG2YULXbnBYcVjyV7HobIUdxwAZZh74PxznfFuJh\nes9/8ElV4Vp4/u94valapTXKL2PYHS80LkKbdwFR4J/qnEbtH8lmLGs4CwE+\nif/Xp4+WGgRfre3ZXe4CDqhFoG6BeyCAiaiWcr751xGmLrOknRs4OTbCxDG3\nghA5Ej3FNGt0mMMvyNtDZRxjTqiot55TVvDjSbc1eY7z1xQi5zo9Qj8b/xdg\nqe+jBjZFNPf/u+x1dIc421qGdliQZQhOw5HaYkbkXRgEr/3y7qosCohXH5/l\nUhXP\r\n=1G1k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs6RqmuQUhzsN93s4g4QQf/lIuM/Cm6vEZXKut2DKcxAIhALF2AmfgBpM+8oZqSGlqUIPmSF7fmJSIGtr16NAz91qy"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.13.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0_1621067435458_0.4961412164290482"},"_hasShrinkwrap":false},"1.14.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0":{"name":"@sberdevices/plasma-ui","version":"1.14.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"38037debb077846c0ac5e9c7df74ff399bdd743e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-BSuGAsKbE8CfLODo02laMlTMQaqyiVj+SKhKtHN5FqnD+1JVcNs17Oa3B6rCvnLK+EGGKyfMVIIx4D1SMhA2fQ==","shasum":"ba986dac8c01603507a14ac69506e352c3c81882","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0.tgz","fileCount":472,"unpackedSize":1087314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoiIqCRA9TVsSAnZWagAArjEP/2hmR15gLB4SSSALQdEU\nvLuYx3ykmwe/k7M3b1rj9Ge/jUeMjbcpS5tLGJ7M4+pPNmC78iIf3/MXLCcS\nSbSKe3CAGwyGu4UlorTsxT/0fDIXF3es5X8wQAHlLfarfRwH1YypoIArquv1\nahOrvqfdZNbAsTFgcz0PQck5oGD2Zips92Ksa+UIL2i8agaTB6xFTJ5vKQlC\n4g9SlH5RooWOlXbpbJ6RdYVJkLG/UpPGb3bTEdiplca0N5NFcp+UTbD+9XpH\nEka0mBNA3Vt8KmNZuW4vyC/Ji5ByokP9Gm17c0s2QxMX/nbucNITeE+W/Gt/\nLE+Fh0RiKZF7WexyYpwA5W0zZ+3EDFQ0av6EjcQOMhlG6TwOCeQoj45dv2fT\nIQG4uh5UDRgWDgBv+NlRyofoZzP+mX0madvI/FDjw+M0OfcJmmL3+rv0hsOk\n9FHfUGY6LjexqfFAVH8DGkpJ/GrVLXCZf1IkwHF/cekQ637Clo+y+IsjrzaL\nIp9yd7tzrpbHauBXnIvUPKQQDTZHavOfW/QZ8U4I4ZjeVmVvo0+xChss8MJJ\n+JmjH6wEz7fMz4srwE1WbDdzzwdwboZbjrNAN8KljjkztA812F3JMtGlDkX8\nwKJqr1cTFm+m5IS1SnDhZRY7/MglWTcOqJSyGtS6dt2zcQ95/x7zO4D3GGjq\nWSSo\r\n=aHeN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCewatBJ4tTaU7+4DaPr2GY1dCt5dHo3Vd1SMYdYkTFWwIhAKG0tqf74IMsDU84DDVB8nqThpGUPWbFJrQ5PR0YxvsN"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0_1621238314297_0.365637765861085"},"_hasShrinkwrap":false},"1.14.0":{"name":"@sberdevices/plasma-ui","version":"1.14.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f20c974f9e394026eab09db59ba3c47913eb2946","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-WXU9g9pJ8ahPxtJuVqk6UcN9tTVWPVAP0i5cPRN++UqJDECMCWT3/wdaUCfwsj5QM2WWt/lDojIXs1WWuChe+g==","shasum":"8d02b8fbf074dd002e97d11dfa1916eac68e6f32","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.0.tgz","fileCount":472,"unpackedSize":1087562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoiWSCRA9TVsSAnZWagAAZ34P/jOLVWAgNwL2ZRmzaY1K\nsrnOyraSlOot0AU5yGr22b8ThfztqIJqB90/LX3Gd7VOYUUBPvcGOyyMx2Vi\nIAXazYc6RfqbYczizQXkjr2Ea7VaR3kCh1Qt98PkbKdtkKgtbFwwi68RhBJV\ndNqcZcVBFqbjHrjLgFkRkJu0llnjVeBGpsFfSJ0fix/Ho/O8lJAI7di6pvsd\neMQgjo+50as8ULiAlFzXO7opEuMVzZ+QNO1HzT+pKEhHSZUkk9jKF7sUkhkl\neHsoZRDrFUBIl9Imo78ADQ59FqPKx75St/0wx2x8vYeFcT2cdDZ7hSuvY0+0\noLZNm78c/brp2uulke3NwDdI7c1dafw4HKB8xmuKu90T4+gOeLdn4gP6ssWF\nTybeLUxV2LdKZLk2/WyPqJTZ0juhwwMVqhs/GRU8ioyIxXZHt7YOf7j3MmSF\nkDcac2xwdc/250tqdiR91wKhzLWf2/a/Xlv/PMqTz9dIVsMXun93DlsmfmOI\n1M9d46fzD9PNGRfgQx5wh++plZZNRYBr7COmxZBxzwqtpgz/juq6lrzE6Xio\nfgj/vAISa8lqW7Keqc0t623TH7/N9N5uFCVsoHu5jfbpP/BCkE/7aohQunjP\ndLaCR5EEuAoFyVjgSZZ+INx98R7rLjbFkcDAosYhQNLWZphlK+lySv22gVtB\nXU6e\r\n=YHwl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzcaocFMNygFGex038zjuwMcvbIvZr2rds9jofXCDXuwIgH8agic5B0gTmhect5oev/w4f6hVi002blkTZjlfh5Ys="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.0_1621239185938_0.905740736612646"},"_hasShrinkwrap":false},"1.14.1-canary.390.4505d17bcb1c7106d53cd6147a365674286e243b.0":{"name":"@sberdevices/plasma-ui","version":"1.14.1-canary.390.4505d17bcb1c7106d53cd6147a365674286e243b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4505d17bcb1c7106d53cd6147a365674286e243b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.1-canary.390.4505d17bcb1c7106d53cd6147a365674286e243b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-vYYEL98f9pazYaMe8gZ0kRroujeGza+caGDaUYZArLNAgxPpYX6WP0zfBOncqfqUmExJO4ediBB59+L2Tu4Q9g==","shasum":"3cf7da03a37b489e3709deba3c3c7c9bc6941926","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.1-canary.390.4505d17bcb1c7106d53cd6147a365674286e243b.0.tgz","fileCount":472,"unpackedSize":1087447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoicpCRA9TVsSAnZWagAAuLcP/Rn3lBe8DvUNHlBEhltR\nMMCsE/qJenQzg7ubfWDtBITmbFLbfwa/Hf/uRJ0kJaFBzLW3JEFxIPXCbZNE\n+g9igIxMEveQBg0kEkmllU8zdKQhFr+j/Z2QQ+7WPKcn5gl7iNZCWXUVnJ+i\nZe0Q2bUKo8kxBtoMCcVc7iuD26j+Nnv2Z9nWNJakqIoHViHMVVfFRNsJEpx0\n0bx4CzO2qGQduDh0AyUh4jiqFIqOhNcG+Kcsjdg5jM9Fl+n3nnmHfzGZn6x9\nEbVKE0ap+LnDZ1jkjzaVl5rq+Az291M3/HaDoHVhMuxD2DmCfvXNkyNM4ZKN\nTut0s6pgzIGhUjyGEBFTEHFKZe/A9enxBUZwgyXnQy3eFFXLTIyJX2Dp0enR\nAhqEx7Qfy5KdH6qXQEGzkZPHOhoUwZ1LMobPh0sujRCgIChqKRSWa5PCrwe5\nZOWFowfycth/5aBBPkc/ndVI2QO7D4G4qkgKCG25T3mN9eATh3Z9tru8tm61\nfIA+QicJGB3+tmVjIgwZFr5jyv5pHaE2DF2GQLzu8xwp3Wd8w4NO23ktKWx6\n30LkGNEpsSAORRszrpp/4/qIqsfuOYC6mxRLAbjIFxklK5LH+zVQM8HWNw7/\nga2FLMx2TLb6nt9o98VqYCpPuRkdnTfKyvj5T1XdNUHuYomMZBIUzzFcLruT\nJD9h\r\n=oOe9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTdLnCTuqRrDVd0hzXjPbFvUVHAXxV0PC40nyLo6FVTAIgAf67l3R71W3OomO5dRQ7387Sf2S0VjUokcQSs42EjT4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.1-canary.390.4505d17bcb1c7106d53cd6147a365674286e243b.0_1621239592459_0.1093837715718089"},"_hasShrinkwrap":false},"1.15.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"69a5fd2a954cbb12c381552bf38e3b5b7467ab69","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-PMSNXECn9OuXXGqm66yMwze9QDtWOh7EbALvMT2h8N1v08cdlYxyHpZr7W41OhHBpMG9B1VnKGKTWAE7dWH33A==","shasum":"14a79f424d65f841c5b9206304376aaf6d4f85b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0.tgz","fileCount":460,"unpackedSize":994824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgojS4CRA9TVsSAnZWagAAinsP/35zgbcuMMRIunZ3npEv\n7DjtuewlmM+inPF7Rsq39qcNU13wE38Sjyc9jLH1ibHvzMRhIv2ZK7gzHkDy\nCG9ulIuxukNujvFZyS+2csJ8zQaWFY2btmbqwXR32DjndPOzF+nFu5Mz4dKs\nysAXFl42WPnHROysH1AjxsEc06Mezv1938gNCgN4myFuJT8wA5UhGw2gY2/5\n5UQW5Ppm1Mb0czbhWT6BrlRPww0HaWeey2+mSozX5sFyNkLCJsq2KG/Js0iq\ngYBuqOMvgtpTVw1O/1U3+M6iUzppNKKacANf7440KXAQuZtZcO/aU6kuyvoQ\nBuutXRCJrXw2Qy/bqYt9fjjQiF/SiwOBj575ULZuLvynl6KYyIlcUlnNCkP2\nHNkrkj6iTOh66IzYoeUAw4TR++SnrPjh7P7c9uaiYC0el+5QbTdrGXv4BTD4\nQU7bIHrPD1NZm4EOW9BBeBZ477ZUv83udagChK7hRmDQwSIIDtlie0fgS+GS\n4oYiyYdy7ab3BQ4hYWi4fujJd8bhCV9HCytOQ/MrOS7rGUdX0UCryUGKD2Gc\nri4+qDqH0f2Bf2PMZV6VTYLcfLtwHSdI07lzKTPQbrSOjF2Qk9IsLm3dT6lK\ns6ip2g/qjLLh5U4eS2cpf2q7f8oKlz+6CowS+uMFMHI/KvWbrES+8pki639g\n4OkR\r\n=5twJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5C9v/REmhU6p93r0nIhp4pz/CQn01fChT3Wteb+4A/AiEAveeJIaZV/ShXJQHtRdXEVskmttJDAc4B5Ixf5jhGqXw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0_1621243063479_0.5077687224184722"},"_hasShrinkwrap":false},"1.14.1-canary.390.881265e8ce9ea18778d05548637b92a4b4e1824b.0":{"name":"@sberdevices/plasma-ui","version":"1.14.1-canary.390.881265e8ce9ea18778d05548637b92a4b4e1824b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.1-canary.390.881265e8ce9ea18778d05548637b92a4b4e1824b.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"881265e8ce9ea18778d05548637b92a4b4e1824b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.1-canary.390.881265e8ce9ea18778d05548637b92a4b4e1824b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-xi6a9u83jQscRyCLpID37MmAazkx2kOQiEmJOIaIJC59JTybu0T0SNn/fp9z8mAdj4yt1atA3/mgkDhbYGXdXg==","shasum":"54365a8e78e6bda790b8c631db38ed988524ed4d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.1-canary.390.881265e8ce9ea18778d05548637b92a4b4e1824b.0.tgz","fileCount":472,"unpackedSize":1087501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgojU/CRA9TVsSAnZWagAA1zkP/3ZrSTvRyO78S/7E1oCD\no4yhylpWsrpu2yhhD3fKcX+VBP8IstobD/ak4Srrepz0a8rxdJiF7pXrAuCD\nY5vPdaxy0v1NtsXLaHcdzHsFeLn8pW+0lsmOGAv5MYSs27BLdmO/zB9Fzok6\nK6UPSQcwDtxJlQ7SeNK5czotJ0jsQOzNg9UtSxyjLONfycxVXHG6FiyNqC93\nG+P/mvMLoIe9un0OZueyryGe9GTuixxyZaAZBFvE779viUEYZbQRx4N0P/LR\n9YVFSe7Dd7uy8pvIlT4ecejLhDzTF36wAbqfaye1UAvIX9L68uDnRwTb+Wi5\nVfRVClY/cTu4O6L3EfhTX0lqAGT9138miGN0hJnxvnsVyTkfPNZBd1hh7Uum\nwfrzTu1crl2aoe5gc9eTrjz9sZ9rgOmdr5+C3C340WsqkAnm318z0UKAexV+\npfw5Hp18sEt3Qzv7MTOH7JnJn6sxrwnvL3CjbqG76XeZny92piss/uQ9VpqS\nW1dqc5b83mrIdzHXCmPNMo/o7Zx4Wynb92r86B4xq7DhigCV8TtFINcI6rQC\n7Lw3EAmzZHY0agahVQBHFa6MDZCSuh+9sWAK8mS9CpG26R3SyDx3X8crCtKg\nF3GUwaQbZS+EcuZYBYZHp4cweT2gKexCakolyeL03hvptRFT0FpMORNn/mXX\nWwyU\r\n=UJOV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCziY0fbBX6ZSZEgF2unaOtrBfkSR8z7SYMx+tzQJSyRAIgXQYwe3kcSVurb/wcB84iUDbnGre38KeKkgwfFHAWCB8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.1-canary.390.881265e8ce9ea18778d05548637b92a4b4e1824b.0_1621243199175_0.7753914145790184"},"_hasShrinkwrap":false},"1.14.1":{"name":"@sberdevices/plasma-ui","version":"1.14.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.1","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7873ece584a2eca8911e01f46760d0f2f2960b02","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-6X5VhaUMRNpTpZgUohQ9mm6RsisMY8Ke/Hn0Qh7Jjgw0dZyPuQMIBC5w/yvw0nDm+vpoEbD5gjxppebZ7g7iVA==","shasum":"b568028733aa9eea04ddc1432bcd947a883fc218","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.1.tgz","fileCount":472,"unpackedSize":1087823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgojeyCRA9TVsSAnZWagAAb2gQAJfabt8rbB+Nk1tJi6mg\noMAE1PgglFWbPT5EUCt6Ja6YDx79oOsD7YH8hcahIZ3pplyqvS6vtcwQTkZS\nQPo7pSIkAvfmqo+XYCf8yNCiYbUQuFfg7dpngiPFZCz+gQnR3La9nafg4msh\nHSyj0Aby0BBB29RLbYHA8OizPmEV1SAVWFcpfsQCem4Jz0MPO726tfOtBrJH\nqrOWe8PNUBi+FLb3Ac3L5g5qzsXczQIB6tPN0wAqHjMSgPG6ZRsXbVQF9pVV\nD5p1o9wyBpkV/5qr6EvMoS9qb7+3uviYucYURYk62UR7q6rCDcaLavpZ42hm\n+DjfHlWQ6qbXYgABoMwZxcpeiuFvdsuqCi05RaDpUCOfGZcqjmBYwU4xXH/u\n9O3PeFUn2c9HST/VI990DgtbQz4T8KLaG8nCyFYfEM/DPiQ5L1nOAMGB8L5j\nuX00hS8pxSiDEgzQBdDgmMzMKrtlwSN3l+pr9snzayT7XDB8qOnGwdhAC3qX\nSblusC1KNtkIJ/bC2qDCfoRspLI5a1UCDZoK10iUvX+YoCqKbGR+EXIPakUT\ncY7yptptOW/P5QaIViYTp14VHaq8FNls5upECB7j9vm0M+REChcRVrehBUoM\n0AKC47XHbnvVecbLvj32EnH7ncc7T3xOz/mzqtbVYBz/CAwPhkiuMhFP/Tga\nIA6d\r\n=0pMm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJAsZ5+9y0JOdKhyNzP8HpO2sFudRoi+HxwFvHFVVTIAiBe8fG26dQciKzMrMNZxDVCoLITOP4yv8CwBXvaX3MUdg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.1_1621243826004_0.5840854062746974"},"_hasShrinkwrap":false},"1.15.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7a0c53f391af5eef11307a04e5aaeea0203cd21b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-wLlVuzaCyQdZk26ougUo5CFiKywj+CKmWmJl3By4iI9WNCKj4ykOAVMyryg78ntqhxWKZpJALYTuTyTOUiXWhw==","shasum":"12e9e36bf60413453752ba92ce52ac0713a3b573","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0.tgz","fileCount":460,"unpackedSize":994993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgomPUCRA9TVsSAnZWagAAm8cP/iRPQpHZpxNN+JGL3bSx\n8FM/sgub6LPQGsMhZsBrXir1DwA70AJQCEw7HQQKXaa/FPxWh39Zw+EjTTdb\n0CKeHNlOCjTkuDGRy6v5NlfXODGgWXTL7VJ4tsKIg4NR/5CORNpQQwXngBIU\n2WrJoAhinGcUtanGF8+yYMNcvHZvtzGZY/JrjDVuFlcIMGq0ZlSrAkMJs+YV\nxq5Qh+NeOJxZffeYFYIxaN1LbXHldqF12R08TaQXBn4QDndOjvFXJPsXfpVq\nQRuaIC8JZ0NTv1kAjTQeyPIjYutvAYO39DWSvycuZNY5IiYiDWUrCtoVlKRe\npCpEboNpi/kNbdO+XD32T2nqUHALlBcRUJRwO+0+XEIGMm3iOnAhA66r2nfn\nnhZH+IqMpU32yK7n8aj1m8bFReAlmnOJ7T5UezN6Gu9plq7eRrKQH+U45O6a\nuJ/ERxF1Ona17jIBFW5MhD+LL8qmjHRtEn0xwkOLN/J8YB8WVUPeAs0owkjr\n0uR9F9pXCWOdjhtVE8q1wuTEXvvZDUFkli9+3NEb0mH7pPUG5isiJhFowcoq\nfaFnHlbAjsHvMK2bDU28pd2pOx2K2obUn9UVBSCi7eqXY5Aj7PMoHrD3yEyy\nOm14AApiAMRYuSiD+iWHzs7qM0qwP9xp7G3Y5aKKwA4KBBtChS4386SSF/+S\nvxXG\r\n=jNjR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5EDzH2aitJXmzRUFHdgsqIJq+Ood/wkXAt2Z6jJ+VRAIhAIgGrjLsoFhuGfScWDLGKLCLnABw+MGKWRh4d2hbgRzO"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0_1621255123769_0.037900264418294194"},"_hasShrinkwrap":false},"1.15.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3ffd374983a23837737a1ae8329269b7318868ab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-OUD6bllikdLWokoUoFAlnYn+wIJ9vA7ruEomqoQIno+B+I4GgNJylR2ym1RC1QKdhkCJ4BWZgOf2o0UYALJBpw==","shasum":"a8422539dfc6326a1b7ad7a89e1edd1cc801fb60","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0.tgz","fileCount":460,"unpackedSize":997462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo6IQCRA9TVsSAnZWagAAxeQP/3uw30u2AraFknBBcOTa\nHIF2mLxcZkY8oIKrfWF4sIPICzLwTmyvika8qsH3o9t3ywVyZAWciwPrObnF\n+XUmsR4OgWVXOx5T9qfJKNLSjwkSyPiKrPxkfkXxU181BRa1DtFG32HU8lUS\nxk7wDxVFqDWWCBx3AF9+/ihydtuDFZ/htkmHgvglH4nXDBP3xgjhLvyDoDQn\nJ4dYKLiamflPCrGiYA1dd5CfFKEemsaDTztHUWbVb4226VdDJ89scnT5bsnM\nI+ykJEXmhg9ydqHyhlbfHixhew99r57mvkpYG8YwT/kiOf8jNyjHVn018h5a\nONvul2A8iwsBNTbnZqe0IGhdMge0V9+Swrz2/z/XN5OwhX+T4XHaWHNeUVmo\nROBUQdlB63XqwTE73Eu8CFeh+ilLJvutlRx8xTWoCrdb2lYGqkbUPmG7ctXC\nGfHN5fDnJYL7fLd/0RhoV7Ht6XYAdVkf/kTwFU1YHgQ8FbRd0fSyxYXLuix0\nR7CPhcY6GKiWwf495QSYqjar8itYFLHmZyRYKGY0rO01ofF8s59mUR7qiJMV\nrpHqznxBm0IM1a7c2nHxkWsZYfc23vVFwFS2MBG2HpQsMsmXhyzXCd/8nBT9\negmfyTA/UuPbAbyLdqk/94GSxk8ZZTVjnFRHpYWakBb4stN590/vSUW9qPeW\nWr7g\r\n=wdeq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTtCuW5MU7y4fuUcPC2cKjuROThX/OvVyzdW+8z0mqQwIhAO4+Bb5mwhbMv52XEkOg2HPBpaUmrXUBJ/8w11ut4Tfr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0_1621336591592_0.1330795551971835"},"_hasShrinkwrap":false},"1.14.2-canary.397.dcf495d72910c1f765e27a86bf249396b1038ca2.0":{"name":"@sberdevices/plasma-ui","version":"1.14.2-canary.397.dcf495d72910c1f765e27a86bf249396b1038ca2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.1","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dcf495d72910c1f765e27a86bf249396b1038ca2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.2-canary.397.dcf495d72910c1f765e27a86bf249396b1038ca2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-eT6Ks3A4Yz83D3tl7hxCsL4ZN1mQdnvqwUGtkhOB3gWfItfvrppmTZtPjnmRLg26BvGHBXlNM5nEjwGae2mzeA==","shasum":"7d815fbf8a8873fb525ceb44c384ac4aa37f23d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.2-canary.397.dcf495d72910c1f765e27a86bf249396b1038ca2.0.tgz","fileCount":472,"unpackedSize":1087877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo612CRA9TVsSAnZWagAAXEsQAI8UfbrlOaUcWhsrWziv\nYqDi9OwaYAJQ2ojPJgOELZ2/TS9EwF1828ThLvI6UkcB/qLYCN0bCVPTf+pB\nvF9Z1e4JVx/cYPKZng5nBpgJgDXXD0lHMqsUkoKdzjXsR9Qp9KdyiTvT7vAh\nA/9jd5Z/F0mvwD56aJwoD7PkZLrhVKiFvWAE+41A+o2VOHTcAVsoXP+G9jBV\n65t8MNEWwlW9170VpoFiR4oWogP0/7lhoRIN5xqCVVlBHRcJh5JDvIwezoPQ\nksi5m/KJb0z2HzRAqbBQdL8yOTNkun4vrWtixQGs3DDa0H+l2qeBzvqVDlH2\n7WVe8akaE2/TN4JBq7ZhxGS6be9dBvw1S2MOvGkTmloJybinLQTacu4085Gg\nu1I7PTMOaAcyM93hAjbeRvXehtuc/I/wa1E/XQDewDrgm6wlx9bUdHzJ02tw\nTY9UN+XafEFzvQmS9E2dkkWlIYVwMc0pquy84ZhL1aOEaz8xEdAKmAk8Ugzz\nKbAZpxFX1p0mICFbdKeAOL6tan9wBEiYb82KS7ARSsen1MN3p09PcKvawxDL\nlNacDXeCKCQ6q7yZuU+o8AF9i/t7NtH2YhJnqBUGdRHbQ+YkAIshOhmbf2pg\nS7d6hi/diiAXIzIxgZ8jSreHKLM2F/vN6fKzKYuYniQUbBKtk8HuMf1ecSfC\ndxUD\r\n=aLJ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBA9JlFUEicknw10eQE5ByDxuGveu5s+1oLvJGpgwJCAiAOJVn+/KutecLlLiHBJT4f5x+iVQitsVGeyo1GS1ap2A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.2-canary.397.dcf495d72910c1f765e27a86bf249396b1038ca2.0_1621339509791_0.5738450773215449"},"_hasShrinkwrap":false},"1.15.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c89859d690fd70d19f75b1ef9882136bce2883f2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-53cPpcxtCU7Cbe0O40mKZdvsBDw46UEJ4VGyfyqqGXEJ8JbQ0Mm/Jsqc3GRwAuMB+TN8B8jo83EeZJ/+CH3vVQ==","shasum":"ec849dd1b983cc11d97d12771673c43fa5e3688a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0.tgz","fileCount":472,"unpackedSize":1093756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo9v5CRA9TVsSAnZWagAATxoP/j/062FoauueTYvwmgZB\nXLvaEsrmtcr9HzZ6wcgNYTt5MTRnAuPCDMFbPLEAtNiMB9zI/z8MD58tv7E1\nRlAXMgdAq2DA+b3mFcBtmXC6lZ+ij+kVitY2MU9Cu0SdW/Od2f/dZ902pAbw\nq+o/DqKdt37sKExBBS/O7dacJE1HxSvU1z4tMjdPPS/yfnlyo5fNvm2MkviG\nhkgz9GrPa8xf24qEe4s8tQmcsTyLwpmM7aiE6CjNGzZNoFFQ5diakvOLctvK\nXDcwtUL8hzqCEWXKGEljwr1BY5CHxoxTIA5Ur8UiYWRiKIIve2If+v1a5huf\noOyUo8bJ9O8B75hhCNoNJ8ITEsLWRFikdH2dbQAY3t3NhJ852CI3BUBWKwYI\nAUOfjnf+23QFbJL+Oy2j8mWaegI0QIR5+bmVvv/V5FXwVhqBoMLkdTq08k2/\ndWa3H37d18n/K8UdAteveMZuIULGzLt9pGJ19ylx3MAWl2loppJY6pw9AQbB\n3lTMMB582MN8znym/a5gz6am6buGfoAfqvtgfPoHR3MzOHe54LCnlKcWijVl\n/pSzMgD3F/s5XmJ6J2Cs2R+GbLIyUOs8V8SihukvX0ylIcy0Hbl6JVhur/Eg\nPJomE12rhwXMqk5teneapWcoQhAjVVJ0YWbZZEMenE1kVaTGh9G2FduoWJYa\ntYgO\r\n=fhwz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvpwtwW+e1x7gUQvCl1dxcjY3OF6TyB9qTOT1y1FJH/AiEAw7Jp8DpQkUCotpI/p4r/Hdp8T3s8g2G29GhaVbwTQKU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0_1621351416573_0.3109523945954469"},"_hasShrinkwrap":false},"1.14.2":{"name":"@sberdevices/plasma-ui","version":"1.14.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.11.1","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"170f03e9f6314d4a745997b08483d84da3919b46","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.14.2","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VSJT18ea+bToaQK/+9hd6cxHkDQWr2oEBdMJDIkJlnmreHdB6Zqo/tgWhpqt4MK7FYhfQ1M/DxgTweyih8Z77A==","shasum":"5742c4e30a375097e52626a96c5c89d2b7063202","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.14.2.tgz","fileCount":472,"unpackedSize":1088053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo+2vCRA9TVsSAnZWagAAMNYP/jN+9wkjuwHUY97QVyJt\nrYclJxLmRL7d8uqDKyhLA4B93sSYmBMXEut1uI1st/lssXpI5LycqNeJVC1S\nTz8qYIFB9RJMbU6cwNq4eG6KmmlQ1p9GrOUFJ9waEXMrubpGhMAUZQIOGats\n3GFf84YF27DyGRke8mgtBmkU60DUcO0T0LxtV8MwbzSaH4FDReD57ZhCOc6h\njg6TJVw6Wx28CcAmgpOeQ60vzScAFIStnnvSRTX/lhpRGFXMhEx6fPLVbBtf\nleyiGjCd2r2UwIqM/A9uZ5qqroNMaQ+th2H873+0zb2SVqat77xkompVRxBf\nMsG9NQt/yklsp+jTZWHp1fmkDsJCtaoFDJlq6uJXvCDfM2XTVMAzaWpTddtl\nkbGHBRVzCZAzLTSpHOGzPqKYb5e7ep8iDNCzIVvNlz2PHgcp8r1vyE83qfcQ\nuXGD4kOseNs4ZSXUrmZ76zd6K1o64Q8gXl6eX6PvXF9AuFW+PM/sWCCt779H\nJ/b//6f7M5rVTTK44RjgSWbDsWbXnuCqzLAVu8IyMUegktJLgKUTGpaJkQj3\ny5fnCVjLxU4SyzkcB2yw2Y3QhnQHwHVVE7vTw2ONj+cwHv6jSCFe8QwpBlWU\nIa7k6t4zOO1I9+ax5eWNtlhkCf9YwA5BgK8CxdA33/J7fFnc6l5dOlWKZM1z\nQRJK\r\n=sVXK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkF9LvJuN+Kn79Xg0FfLOpgmbjuO7HsqephFFgvDPBiQIhAK9UNQr9LV23XGmUXHc8xK9LzSOxzE6giqdEV7BMRavq"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.14.2_1621355951154_0.16718144844438343"},"_hasShrinkwrap":false},"1.15.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"415ec0944bfc6b6ef3390d545e05b8e9a0adb17f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-82dd/4mU8Uj+jGKDTazs9HQ1sKW/SOFTRCF4Q6xGLJB0W31ghBUsdLYZxQriAOJ34uG6HR/yRU7nwzKsiZbmKw==","shasum":"0d6922d1116210011f63ace8b27a9ffb0f3246e9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0.tgz","fileCount":472,"unpackedSize":1087642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpgq2CRA9TVsSAnZWagAAoCIP/1I3IYeruS/LycyfAdiL\ntth/gyjDju9/3Whd+oqYjTSl50JQ1fNHRPkrP+UPhsJVY98SoklcuV1JjMQf\nuusNMAl0ZY5WEKCWPZm4uGJPhkJwHlVboMDv02/g2/Lm9I+cGI66pCJ1yR27\ncfFEyArBbFRMOfAegnIapknoCJ7DNalZWyUyfHXMvT0rhLSKxZ6lNiIPLj5O\nklxzxdXVcJZ/Y7xSANJo3VhN65OE2og2VQTd7IxuhIh2KKDB1m+YXtCXw3Iy\n7IyKKCrjdXlFz05tlpHMlbzqc9zFjUG+SbCZ7fwooEVC7iDKL8c4hXSnvmW8\nJ6Cqd/2KJDfH4jKJ1ZPTA6I1021vSN0tfy+DXCo56CqjlDWGk8nvF8NCWTSA\nhHdqFvkcEt8N4dWMk8ipOeo3EPmQ6pthpLHQ1b1WSInCnZ6AqJRxWSWlJ9HH\nd6MEPfJ8MplK2liouBprFnvG5jeTWW4vNB4roFCFpLxl56zt5K1NR+e8TOXe\nyPbaf2C7G/dOKcfSAeJ/Ck7AIr+4PFM27mkGJZzArd2vIl/C+UBLPwVDcVaE\n+cHduJCNCA3YjPca6qX4os0tfqvSrEnIzD5IjLYhqfVKRWyMtg7MtR+Cn5xl\nK3GIcl3xOlYcjin327bhEZCnWsa8lyaJ3IgFyjv4zgY3AdK63bEbmgCiFQnw\n/Esk\r\n=mCvk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLW60jwImMTgFYGXp4ZzDCeFViZ8AQFaeLi3OoCkVaiQIgbaS7psdu4Z25jVHP/w5dykbfFGkb9yPno+/7wDX9I70="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0_1621494453933_0.8648431472231526"},"_hasShrinkwrap":false},"1.15.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dcfb1a47f60ab48e4b3580fce83d5b6716484bab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-a40IE79Ase9QdKBRD8+XfeWtTTKtZvwT4jkRKDtCTZugypvDyN6sc4Gtn3HWTh7UcawJo8KD2QzWL2w0IKLj7g==","shasum":"50031e506879efe847015800abbeb5770ee229b4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0.tgz","fileCount":472,"unpackedSize":1087642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgph0TCRA9TVsSAnZWagAAZoQP/3RIwPUzX4uM8JGkb78n\nsrnS2zcNwuCZPaVXG9W0e9LkU2jPoSHET8oHfBusX2Y5xxlsE6GAIsQLWQub\nO7oHYDmN0rMsVK0i0yMDDiM+OEhscLqf5Mmk5bhRQcFGTilBCQV+JbNNZIsd\nG5rBTs2ZtVk7k8QUZ0B0lngfcWEnQCmIfnprOy1gl0svBDFI7YY2Kk/S2Y2N\nxe1g52DS5O7IxAwUZrfRoZF7neliQnCUUD0w0v5muDHJ+t4FBovoN8nIrM2h\ndIO5ggcI4+PNh6orrMwwx4RWHNOxYhNyPBH1mCvnFrKU0jvcvMqMjVlyroOO\na3yq9VccxXUHuVdnrI7T9/29vAcc3sxwfAzbx6GoyRyXfdnOUR6ZTknRwrcf\na/r9T4xVnnLw89dARcok6atPyXe5rNjWcCnHezfUrYxdUdQEf5Hf0b9HB6BE\nkn8hyXF0XvCwOZobXh5KDajaUYD9w/fNAwwGF3hfo6Xd7t0kWWVA+t/cZgHz\ntiG7mRpqsL0Q2z6QN3ePwk2rrQeZ7Iv3pWUPcU57tUwYIP6uI1wgFgVQFeND\nvY3CoYY0plh1hQOfhEQI4GTQF45tCmxYXkrvAWZpWUwU5Cqj9fD6Hd9vt/Je\nZU5fIxnFpHu0IDvs0gB1Kx/e1Xfcc5rcjXkKcS/V7R+c6jqb5RtRkLd2vW+i\n1tJp\r\n=oln1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCslMycORlAdyIgKWQVd876Z3rs5i3rh2FvMsj4Ow1D6QIhAJxS2vcDtJdZoDp1YVfFrYruIYlpt0lalEH5OLPyEneD"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0_1621499154637_0.8526104223390683"},"_hasShrinkwrap":false},"1.15.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c8b41726ecc0cfe888352b77a51bb7756a7ef91b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-T2/NjsuPRPFDhZBD2cIonDWekiIX9lyf1t9nBXcjdKBP+xKxKtGVtJSwRcfVNSETQY47cpEgSL7/4eaoTv0MAw==","shasum":"c8617b07872275182b2cfc102af6bea432e11c5a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0.tgz","fileCount":472,"unpackedSize":1087642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpidgCRA9TVsSAnZWagAA42IP/ikUyJ9MdPykwiIFAgjn\no1O55+LSKHPiFU0dYOLXJtAQqpaIf1+MPQH9vtWLfa3WkdIPuVBQ25qkyMYy\njp86ZGLiFNTuamuDjs7qgYguH/PRahALKroYCd7M8hblB/MLeTnvgG+RaPZf\nURyvzxG/JvUpwAk7KGUq8SS1YVzOzlF0/OBYyjpUNGz5LsE5XRE1TpVOiXZC\n9zVvC7yfFyXVVbm7xgz1IhlkQxMUA0zlXxfDEiBbzh03nHNnkG00arFMb/V1\nlCVVP7VOlwnrQZXsgVY//bC4VfGIhGzsqMdA7jdsW0MhNeBYi6OaAjZDA8Ot\n26fl5crHmnI2Dvmqw8EvtnP0O7kqJfUoZQJoNq8K4U/KNlRpVPhyi43C8KiY\nvLtWLRqdF32jcHTwEBe1Ir5M2hCaqxTUJw8L6SQ7XBt+X6cNtFX7ADMg/CKZ\noFRzYEiGY31o21wBc4KTSgx/FSl/ozG2PPKbnpleYcwCHrdKN2W1aQc5zGX2\nv1oPQ/F/2y71YDRi95mR6ZwKNQp2tp+C5JjQdRAzmCK/Fy1TDy8bUkN+YCxG\nkYGGSFGqzSF12kAXfywm2jmU+eAEcUiei1VuLjw5y/+mFXQlhjooZuWl5cKt\nBgvzS1m2AY4amB7lQ7Jbu4wE8quP0OYkvLfJk2p9tg22tHDyi/+apajn5S4e\njbO+\r\n=6RN/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8x5nNIyXKKymh6tUeqZeBnQVzit4AELUs/2QVMhBlfAiAgWLTpeNVpxCpigK+jps7aA+sR2kBpsPPosJ4K4JJUYQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0_1621501791910_0.4800149173383148"},"_hasShrinkwrap":false},"1.15.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"33949e9d2b88418023ebb2d65c97ea95131510c3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-s3QK2lhTrBZ9PAq+r+3Stc0yJyNgwBX5wWRGJXb3BIdFJ/gxNUn8sZrAWKesmR/vj2QsS4TGAKUZzM0hzHuUeA==","shasum":"9474a99bc0115205e06b860f45ad2a4708654226","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0.tgz","fileCount":460,"unpackedSize":997692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpi17CRA9TVsSAnZWagAA7ZAP/jMNrFQf+pXpWtgY0Weo\nciw3+3a/VOh8gwTLAmGMw/95N8jdA3NBjOD9AjUPjtjvdL/Wuhut+arAl8/X\n4l2O7L/nrWbkA4BvyaFPfmaAyUWZ2FPVyGuMdCmESAC2POMdDljXYq7606cP\nU6l9KW706J+B9waR/o8oOQybQLHKqU1JIEoN6B+Dt/y3RRRL1eUI97CEzLNP\niM8mkn7x/ZeeZGAPa+dtQ+1g7b3zDZOEvQhFB/XSOdgVSDSyhYTV85nM1Qn7\nvsmnCOmH5dTX7kqL7k8LsW3icW/V5dYadmoGoR6l8ZrQqYilClTqJgho4WIg\nB/HnpJ4WJwuhFn0+/AsRk6tlB/SKnHEqVlRpCJEQ/ofU+afKtb8dZOrTG4t/\nhTnRyr1or1hYGRQ1oktIXaOU/xNJi81OrUhey8u/lxIP5/P8AlLfT9H2zWnZ\nzw/2K725ZneMp/w8DANpZpgCCne7CUNUp1b+ChO385kXP3Km573hVkXMmvvB\nzUQ3CDbC3ZtRKPqca3AGJhki1V7200IpWIsLP8ZHNMv/uG6DAC4KZNb7d952\nZADzBBJM5R5M6oXnPIwuNguB97d20BWQyRk6BtzHmlYin1T/W6yY/lWxjYrD\nxmVBrfSPZsVq2LR7QjBuZD6pvpshQc49R4lmpBFbSgR3I8zr4C2JZgmbwhSX\naFLc\r\n=I8Wk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAUrhaAkuhdWRmphSCcLX00ZikKO1xTtd4y/jVYWKC2AiAtp/cz1nl/KuhotycrXyWiZX3AgfBGG+ydsRbw0Kc9bg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0_1621503355098_0.18535611818111986"},"_hasShrinkwrap":false},"1.15.0":{"name":"@sberdevices/plasma-ui","version":"1.15.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d30fcbaa120772c24518dd5c720e06ad34a429e2","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-/B2OxAlvT1PfZUbTcL16mhzNxBni8zG7i+GvMpCO2WEuW0Fhb2LFoy3G1g8G53PJammtjYEF8cTq/+NCHVX+6Q==","shasum":"313b1d9ef90d48ad3a90a6e3ebb5ff3aef734bf3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.0.tgz","fileCount":460,"unpackedSize":998342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpjyhCRA9TVsSAnZWagAARpwP/R/XhUiCq9CmmE3w8J8v\nzdyenciqwcHrHQe4wYgTOM1owkVgbnis4GIB2k3uXGiVAIffPdJGisRCEApz\nrTLBgPZMfQ3CHJ75kxRr1wz0xmMOHF8urx/2Ulp/5Xrt4UsLNcFTeG9edCkM\nLELQsbvAOQ1BUllpLcTbZ9OXzk4AfGEvSEGKJuWOpiQm5Sv69+dzIsbMkC5h\n5ZuxMEbA7SLEei3EyKjox5Lxat7JTBafDmEa/4Ej7QFnJE+u7kwNN2HR4184\nZibHaval+rPJrJr7f4GaHQ0V83WrJNXN27Q++ch5E+q3VG3flGUcifdqIcPV\nuEBvX2fRptdRcenAgMpZSltQ5BahwwycM413HxU0wzfImaCV2yeCUkLDhZWw\nFIThJGGZDuTnt6Lwfv5jkLywWAvNYqA5gDr01McNHIV+7ZQbePwji5HF39gK\n2gusWTU2rausb25165Ixa0rJ4y4fnBKU5t7w3Mpr34/kxT0udNUGfCZvVvez\nFOL8lIQA1MIsu0s0BkB8MVnWbYmExGZfU9b7b87L6RTczrSn1vDlteF3QT7a\n0BZTmXHdYKyXNtq+Ixz7xjcPQREXv20QlY8daqYBMug4EvIaqsQ4JTA8aBcm\nGcdxILz6R0Gaj7S/EGbX7JWDSPUpBIOVDw/TRh1K70iEUo2MEeSC3NrRY2iD\n45IY\r\n=exVU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDT8BR8jbagK8pCzuyemtk531KZ6W4wg7zg3+KnUoVkQIgWJIT6Z7t46DPrIY2BBrDQw1JjQhDNaDTUSFmyruNuA8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.0_1621507232821_0.2129360849855697"},"_hasShrinkwrap":false},"1.15.1-canary.403.3e29f29a1fb2610546f622584becc78d3b3bde11.0":{"name":"@sberdevices/plasma-ui","version":"1.15.1-canary.403.3e29f29a1fb2610546f622584becc78d3b3bde11.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.1-canary.403.3e29f29a1fb2610546f622584becc78d3b3bde11.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3e29f29a1fb2610546f622584becc78d3b3bde11","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.1-canary.403.3e29f29a1fb2610546f622584becc78d3b3bde11.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Cjhnxlaa3EsNZTtN0u2cnhSZkysllTLwCSoBauHtmpGPm8d0/dfvYjk7jnVm29HtsyyWf9YhI0Sl2YGDeC4uKA==","shasum":"fcd6a604890334eccb239d83c952fe4962d02509","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.1-canary.403.3e29f29a1fb2610546f622584becc78d3b3bde11.0.tgz","fileCount":460,"unpackedSize":999012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgplLXCRA9TVsSAnZWagAAZfkQAKFO3QxuoKzCGenu9rNC\nq4xlGFGJ8OYcw12t8zvr7zsdIKo59i4k6fArUdYHpZz56YfYrJtI5RH0UTUh\n6N2j4+l+P+pfX9ZuWCFHlBggmxK0iKp/nAO5J0j5m1+0ooY7SUvBnY0cLvKB\nBT4Y8CmrGKpwhojyYm2A+82wY/iJDQj5f1lD9NTUUWrl8TTXvd+KS7Dtsjt4\nICTRTh7BoO++rJW6QIMHlq8lkkRlOm0qqoKXDxC11tk8PkhA3cBue1I/G1kg\nu+X93PQzus97qjOqxQiJiZ2U9Yp+pRATAS2udywB9VWb+zhysKhWQKc66QAl\n4UAvNfe59MDci9M/uwjhyQDyf2+JYEYEL9546fnpCpm8WyoSqSm73lGFl/pZ\nMTspM17i97CraKnWepEyMSZkd3c87XnYIymMt0CfqqLxHMBmUUuH1EYPOEIC\ncALoTBOh4AOYfBD7rE6lnIYXrHnszn9x/LfL8lk8C9w+pWsCLhDUo+Tf3l+I\nzrszCCZcqBGNtvtPKTmmP2P+p8jAtuucw4S1CWW1IxgFX6YCH0rX88U7surV\nUaccYxM8otT7VdhjgO5wuD1jElTC1Q5fn8eGZlPKEW2Zqi97PcfZGqysHo/4\nlAQ0ZuXyJt7iO8QnmzhzYI8Mzj0F0JkYEEwAU2wo2IAR/Y5LPyfDYlZJY30c\nq6Hs\r\n=lS22\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt4TudkvprOBEHnHgxNKDNoadgvLGDL83MkG2PTmC4UQIgIegi38UEB+s08BzRhr5SKyQFDETqetl0lUZAsdpocCk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.1-canary.403.3e29f29a1fb2610546f622584becc78d3b3bde11.0_1621512919270_0.8150655002491092"},"_hasShrinkwrap":false},"1.15.1":{"name":"@sberdevices/plasma-ui","version":"1.15.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.1","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9f57c6b546fa1e7e97581911e5dcc90458e323d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-MuCCh0qWIIRFHpFjDN8GCSc091g26V6f3QH3yn0q/4d8wDz0MjyWotMfMGWcB6ErLk4V7xMee8z3NOcZ2PJwwA==","shasum":"6b9205287562b90acc1ab1383fa20ec4c3eca82f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.1.tgz","fileCount":460,"unpackedSize":999355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgplzLCRA9TVsSAnZWagAAK+EQAIUsNUlk3j6DpsWCEkO/\nammKhhev++yD8z9Hg+9/t0zuQVEJR+dB2642O97UxJhjvTU/6Lpb5tuWvuOc\nhJAD2hFxee6p55Xo2Izl9ern2ojSHZSM1wCLOm6h/yEneqJlmXrjZkUCtMtn\nW/lrRM/irbT+7lxagicJJDwYczcqsQNr6JEPkZEtJMuquJDVhc0e8B3/L9PD\nefohXN0lx/yDhdDfwV5bH6D8/5WPJ/Aw+/zobuxGnYdOCduOO4Xn0VTMejr0\nvkkuGCeI2WyHjXYiqrGztyk9uOT/sBIDrF4eHNdwJx0IJ4SmvrJ9ruCbP7Re\nB/ZPbs3PbL5oIL7wS8fHKvFBRVzS1Mg7veBLKAme38R9oicgL7Qo49CtOKE5\nEUYc6ZTTfOvQIHQdvVJJjvF68gOHuoskfmQR5bC0sLGNhIPVXImSBnvyPZ7z\nQRWj2PBj+qrwMRwgJe0QYvhk7nlrjqcS85IAalQ0EL6RZxVL2yznvvU+JMYM\n4dFJ3pfcAlWAiuXsjSXxxyfP6p+li+CHr61G4Fg++EHZG/t77J3BbUuKxdur\ndCtwH9CtR6Ypx1apYZKRRbZfQ1jqhvsmd1IUznZEJhq9EYZApkKgbUAJht3O\nbUNfHn83kifxwXaX24AGrXRQBk6EtFR7HFMrheWpzO8FvRD4LLVY2Hbz1t+s\n/c9L\r\n=wZzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2AZTdrolns2sjvsKGzBoCMy5cBtRzx//yk25Tb5rUSAiA+OaqlSndyqJpWWWwytmfzDSmX5/Su8jGlibV5K3qaow=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.1_1621515466762_0.36136453056223106"},"_hasShrinkwrap":false},"1.15.2-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0":{"name":"@sberdevices/plasma-ui","version":"1.15.2-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.1-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.2-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bd840650358c7a5c132641bbfa5b82f43ce7b794","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.2-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-J+Hr/NO4bG5LjEnNUDjUtaArGP31BTAU8ZlaIB16/Ta2qTCbBuK7O6zA38aaAGBLSWU5tujxshIOdGbQ2JTYug==","shasum":"8a1185aec4ee6357b2bd1f69a95c0fdbdff4739a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.2-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0.tgz","fileCount":460,"unpackedSize":999517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpssfCRA9TVsSAnZWagAAbXYP/i6nQ6wahK2gIW6erW5d\nvExj7pgury7ij04XgRe6EbM7SsmvVY8Bnf3QPYFQV9nFejjZnqTmUVBKflBU\nX/XtgEH77l6m+IsYZ5Z3+mk3pdD8WGF/3NlxaT+7Rd75O0AU5PWix+fp5oLm\nZ+hqnT87PaWU5nGoRFfdHZw/o+FPbjvTp6/dF/i+kfoyBbNWBfIjrikwxgZv\n0APhQBUChVpMkBsqW5U9oe4BZEhq/AKcoPQeL/9q1CZY1ElOCYBjhCtnKPOG\nw0NbggrnH08izYhsjjQ4Fs+q2ixhN0cVMixyW2LTuNCUYyfWlqq3DCrlRyb/\n6W11Y+0S04YHrI8CUkQOeDxDry0gBx9U5OYHBD4kLGbBVNd1gS1UY6uya/7U\nQBNCEayPDyWhnNG2qtLhI7WjdseHZ1WTXubDWVe1nWNZjujIq1XwneTKtMyg\nAPEsWvg/nDSzqhhHxsU8sTEjSIyv75PtMttL+K0aDKOIKxpVe6D6KmipJFSw\nwQw4aGZxNqhWGC2IpmXOWzPMnqLK3gMX0Moyzu/lOh+6Tucs2oOuDv7YfrZR\nmunhSkuVk80sCFVV5Td8jaV8ViTMYcYk1Epqsa1X+FoD2vitxKocZxZASJ8A\nfH0PKEmORhxa2PJa/dOUaap6k8gCNF6UUF9DNHDYFWrUEPpyrQejPItod2oI\naWnZ\r\n=kMKC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQdVuxOpJYEfSAhepvn4QtaETXM/FyzvmfPN10Yci8AAiEA61dIrfiTODmOI0OoxY0XPfBzsY8rd4dlAADmbXdWTa8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.2-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0_1621543710557_0.5975553786867607"},"_hasShrinkwrap":false},"1.16.0-canary.412.0afbb316d2c166196e83ef26dfffe7a32fdd9093.0":{"name":"@sberdevices/plasma-ui","version":"1.16.0-canary.412.0afbb316d2c166196e83ef26dfffe7a32fdd9093.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.13.0-canary.412.0afbb316d2c166196e83ef26dfffe7a32fdd9093.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0afbb316d2c166196e83ef26dfffe7a32fdd9093","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.16.0-canary.412.0afbb316d2c166196e83ef26dfffe7a32fdd9093.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-g4+m+TKEp8U1mkl/UgcUmvYrnYbB7rJo/K07MkMLyXSgI3J+kD6Hfd/D6BCWL1TZxAJHQjiT6v4X5w5jBEdULQ==","shasum":"940bdd473bbc566868c438214cb90e5b90ae3a76","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.16.0-canary.412.0afbb316d2c166196e83ef26dfffe7a32fdd9093.0.tgz","fileCount":460,"unpackedSize":999463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrjbACRA9TVsSAnZWagAA0msP/0hFJw0IAMqepoH+y35k\nmmQ8U0dz6QrXrxiRM5OC74gnkZAmPLzxq6OuHg0DjRoQnA34lp1jqLEAjPn4\n0gfUgXhc1SVjPD7FLlNrjx3ZoFcs62A6S/aiDutkL+ZlUcJIqYNm5qEydku8\nUmGpLEiCeiB7qYsjXpelyn7SlmbboH3SpemVuU22tSQXVpJdzfyWY+n7BzqR\nNDRz9OBot2QRtC/PWg81wmtuYyVZc2IlZmy0msnABJ1fXddudjtnkYarnX3D\nkueAEhekWNdlhDGgg3wHtpEZDUPpt/4bT79nU7780kd2Hk8aXfmNiYTbaM9v\nCpelRJULxD5Vlu+3bacn2uj9ky5vZ837yBpc34aqvI6QAkujGMuSr0TVsjm5\nxwNJMdpMSqUAvSKRp02q3mp4e7lhNOjYHuMDk3vMNo8sztazon89eCrWY1Bx\nqhw5c/5P/XjUqzlQq6Dc971aHDdpJib8kP0KJMjXENNaa9cK6Ub9BzrOZQcX\nsTYspEFoK2/oUsC69U/KZYl9T3Ciwfp/zm1V2hbQZc1befKZnf3buChtO/pE\nUP4sw4iPBtmO9t6DAOG+lhNvInWMkZKyEtX5lp3ExLOXNQlHvnZH2jkjm0B0\nE/dmr1VRs7pah1sIy23ygMa7584j0moeab9XBXgujthbbD7/RIZdKqjVniCa\naldj\r\n=drsL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjB9JEdAEDSZrUIVyuMfTZHyxqQeBkfWjJ3dKpPujzvwIhAKiiXYxVWGlaW101RMnT9nwwv+SqPP1r8ftcw5Dh6GtQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.16.0-canary.412.0afbb316d2c166196e83ef26dfffe7a32fdd9093.0_1622030016342_0.44717992318009747"},"_hasShrinkwrap":false},"1.15.2-canary.418.667487955769794721e76e57048b5c43492c3a3a.0":{"name":"@sberdevices/plasma-ui","version":"1.15.2-canary.418.667487955769794721e76e57048b5c43492c3a3a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.2-canary.418.667487955769794721e76e57048b5c43492c3a3a.0","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"667487955769794721e76e57048b5c43492c3a3a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.2-canary.418.667487955769794721e76e57048b5c43492c3a3a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-7OaI31F3gH6DKgF66yr172qLFFH6ms+rDWmckNa9/Wba6NIcgLH7GZeyB92YFafppKIMM3vPncO96IplP1Z/Pg==","shasum":"d4e376c1816f0702c36061c14acdc2f617791f28","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.2-canary.418.667487955769794721e76e57048b5c43492c3a3a.0.tgz","fileCount":460,"unpackedSize":999463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsPStCRA9TVsSAnZWagAAL7EP/RALsgRzPLXNpjUAABbV\no2sIQtgMVdW2rceet9xx6BCN07/bdO3msGgE29vnZcSrnntP2AbfbjOzofYE\nweCVSj7mij4VbFG2dT2iqVKcDyEM3sZ1X9S+WgP/VzmpyRx+2sShbs5ylt6N\nG+dhAPOHPvYcCpVIYF6K/FYyulSsPLVackbnaDG/anQTe6uBffYEDRbjbTFV\n7p4hPEXrbTuqkXFkCHfzQHtqWRzZiBaNImWP7wMWtV2uryuDcDbd8BOlPM6N\nuxZCwnwBXnvjE9CCdXho3U5iJpg5qigNRQQbZA+n4JU8RDnsut6SMH530vQm\nbRasjosz+6WfKQxICPb1GVytLSyeLa3w/rk4OBCALHegtYm2htmto/ZihX/G\nj+ig4qoITwTqxtwonH+cvGaAbaULvvTK6zL45RxdTtkB1Ex1lX8sjv9moCcw\noujnWM1LsN24XPz4kaw/XneFlzRR0SvgdiT3vsPhIjoMgw8lO/6YFs5jitt7\nAC+P/vgX2fDr9viJQ5HDrijIYClZwrALCDKfb8iOXeLgYopY2JviCseHF189\n2qIY983QxkKPAr7XrcBZPbWCOlKC6dQL3MpSxKiJiOZgRf/FouG5QC7uecEw\ne1rcqKPk4Uxa+XunhqWfbZAttSoUN19Zv9QlZgyhtDwjwbHif1jOBSqHL0d2\ns6Z1\r\n=nt9B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtAn+f+pMBIs8Q0uiFjX2dhDI3HIfsvfyci57+ZDhc0AiEA0YPoWO/tkqW0fM/d8eQCzUbI4A4tZbXw6C+rtplBuEQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.2-canary.418.667487955769794721e76e57048b5c43492c3a3a.0_1622209708478_0.6609756100006867"},"_hasShrinkwrap":false},"1.15.2":{"name":"@sberdevices/plasma-ui","version":"1.15.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.10.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.12.2","@sberdevices/plasma-tokens":"^1.1.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c41daca5848b5e06b3cd3e51da77e9677e616caf","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.15.2","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ad2X+VRTxw9KqefQY2DMQrGYcWBQ7Vq7O/JqWNMItSDkvT3eNZT9IMs3cLhY893+CKp755pJ/o74lD+DLWAdrA==","shasum":"ddfbcee8a1973669f03a6646d6565994c63d9269","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.15.2.tgz","fileCount":460,"unpackedSize":999585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtKd1CRA9TVsSAnZWagAAswwP/RU6w3/EWORXjH707ja4\nQPAAt9kbFKbY2tdu3pRk4kf7deIEdQYhwtuke1MZxIpWTn1qYR4mIBxKtOqo\nJbVTu2syOY5V9KtkjGVOrgIYzuGntQ0VfloKeY6KR5o7oQ+sJrT+NJHenyNV\nEGNZzXEONh42c8Ty3OgXlliD3R8Acf21MeJ0enOCTCjX6r3fWxFNWCTf/HW6\nGzkgSK9g1VSRjiKzc7ba2Z7MBLhuNvb+uqTzlN0nvxOCUNUDJ3DkwJiigFkP\n6NJKbeRaHlZCxWjWVb8IX1xVAsaxSrl0P1xApZrUBxNWl+UmKobyuw2w/sp/\nANr3tTYSzavNGheFZ0cv6+s0AKedFFR614eG4ZOHdOsUd+xGzeZVvC1JNgsU\nSEgkYlh/HrBROX3njNq2PSSJrZYNQTAMavrMfdcYFaUjB6wYdJNz4bAzQahn\nWzhAtkVNgc6P+PkT66Hdc97DXriwjmhZDPtTX1nE3IqoBINWBotBcKRVfGHX\nQBDgNsai1G/Uw4/0KKV7tHp0bMdceN1C5xyjo9QlAuN4u15LeVp1CiSRmVM9\nGMrJ7d74xWQViUTyexZqGtvFRU8kjqlUFeCHo2hDuJy5Kmv6OntF2uM1SifU\nQTMZ1hPHLiD/MRezatKx0kBe7UYVl89s3Gwbjk4sSprhJgJI0RihXxpQszao\ngiw0\r\n=8Zo3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtt+f1BzVbjCTCEtEYwnezw3OIEkCXzpkMoe8qaqiQgAiAnRf1v5nhDiMkjdUHhz6QODN3WPO0GGpNBV6bk0v45Cg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.15.2_1622452084607_0.8448209378009826"},"_hasShrinkwrap":false},"1.16.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0":{"name":"@sberdevices/plasma-ui","version":"1.16.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.13.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0","@sberdevices/plasma-tokens":"1.4.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8a407eac692ebfcab06fa67228b9a54a2b206c05","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.16.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-oPeYRztc6IMdvFQBSDpJc2zY0vNQqWZREBnCxytVXBngXJtXapKDkHSLaPO3yUv4sGOVUd/PQPm2bzit2ZbSwQ==","shasum":"b98a92b8b9b534b3114b07c91a047f5a1ba39fb0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.16.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0.tgz","fileCount":460,"unpackedSize":998155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtOM6CRA9TVsSAnZWagAAEXsP/2ox0p3UoJj0k+rKP9Db\nt3F4ctk7/SEjoNaKol/wKLZ1IGW2oSJKZRFBA25kTA446/BD8RgcNHmbj63Y\naCqYdy1CKk1znkr1y0J7lsA4VCyT2Gh3fSHDcmKCWmKqeCu56G3qEEG6bxCQ\nZ4AnOZx1MhJ27btTa3HdRw0AsYy5nGl7r4nf3Fw6Hiibuk6jyjqvvBl/ECMY\nXn3BKWtKpSNP3Y2CUEJ2ZDTBI2AO/f6wq0LILEd5p+Cxu+hL4yt4sE6y3GTd\nWzO/1ghnDWysck2iJwGXc/DDw2z9M8/cGDTq7cuRofmC2g2pK2YMRUrGEhCx\nK75vkVdrBP8lAZglmXK0RQt4cIgEEqcSR4n/5SevZns9i3fEaMsve/SnH/Fq\n/xiJZxVhZoDMRmcyz1Kuceq2DzDl3VBm0TeMjMl0ZdPP86+BNyhnIXzZEc5G\nnAste1neggtN0B54kE3K9hBZIlyQ90ERidW/obAYcgYWFs6InNzKFett6naK\n0maoe4zdMZ2UF1XRPOT6qeWxsHIcxLc3kJI6HemeUtq2AmwMxx9345WC4JhN\nMXA2Hv3XQ8J+S1tEx0wPgHGRffwaiyFNR1FmoLKZv7ID0lVx5S/39jEUgYdG\ne9dNldf1pgUaIhaOtsu74Uz3Ea4DkF36dqk3Msgs7kSHR8+rtZa0x/v3HQLs\nHWuD\r\n=C2Po\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5meK6Ux2yIA4a7py7wkB3GHYbAPdjboJWGi7Ev30oEwIgeefbd2fRMBQ+4Lz9YCpTYDGffNyae8UC99hHrY3JODM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.16.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0_1622467385663_0.1896879374042364"},"_hasShrinkwrap":false},"1.16.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0":{"name":"@sberdevices/plasma-ui","version":"1.16.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.13.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0","@sberdevices/plasma-tokens":"1.4.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"81aaee2901f8f5c9e4c6b90ea07769eac0e59993","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.16.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-y0yM0jx/m1Mw4v5SwoILQ3LxPYAk81wnX7TIjaWiMQqg+Z/pVPBxijr0h8kBXi2k0dfDKieIze7EMfi5FusV8g==","shasum":"08809ddedf49cf603a109d7dc4ad151d3c8f6d19","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.16.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0.tgz","fileCount":460,"unpackedSize":998057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtO/OCRA9TVsSAnZWagAA+u0P/13+lOitHjdeJuOmd6bc\nX2Jdp5DWVm/lyRvuX5jto32k01acrbboSU6EuZSRdXNDAcXML8XnQFKGyeyI\nIFGj4aUGagNIw604bpLvpktJD+Gs7ZovuCZq7IXy29tR0TP0E9BT2uj+rrAq\nixYAqCnEV2C/rPNanmhgxJ9RF/PGgEH/Dm0wD6Vc58kcnBMWVIGDUdFGsfcE\neZEXFPuUAllbKj/D1A8VLtCswJAVWHQ7IGl22L5SJTkBFzUg3gjVMdyyCmw+\nq1avTQ8x8mdaTETx9ZHMEeoOu7j346qpzodExhhwzMoFFuFNQBfJYrLdPI7V\nkdgby0gp6FO80bQV3NCi4Dh6MPZ6JYBV+yzcXpTocOvA9LyhaqLUTP9/iTwM\ngo/bjX05UtO3lQ3mBXN2zStggoKCa3uLDkXj1tC7naSvu0lO0IZqyiJ7Kpv9\nhx8d3q0KOtqzxf8D/k8P1+rISFAm7uqYiiF5B3IZgy8SEC5INYENsKnc24Lg\njt3ao9eqrI8N/uQ0fkExUK4Bz0JJf7xbtt7O/jLFfOrqGgV1d73/uj/V3CZJ\nkdZHYj7ZL7I8RpKwC7JhBAD7YR15n+qPux3SCzL2si/LvIi81w6nqM0Y3fnH\nKEqUUX0PU0Cbe6n9N0lfYYHv6c/T1mWGvA/9u4tJDZWsiJtIUbBsF3RHR4/J\nrAzc\r\n=hvwe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQl3yZ/qEHaDxY8VNm1jTimSzqyfppuwYcXjmA4x+9cwIgHRKmVa2FQRJ6X5cEguJQZvE5xIQYJhNRMfLnACWMhz8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.16.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0_1622470606023_0.41692483411499515"},"_hasShrinkwrap":false},"1.16.0":{"name":"@sberdevices/plasma-ui","version":"1.16.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.13.0","@sberdevices/plasma-tokens":"1.4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2849f268b9bea30633a0f799b369c4d2652ce234","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.16.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-QmoQ215Uib70G32BdnU8UrYJ3sGWjYK1cN8GPJjRUhZ4vu+pybxleVjRTq2hYLXRMItVqmsIPhdETYZRI1v5HQ==","shasum":"552507cd50e97f4b42d9dfbc5bf107bb24e412e6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.16.0.tgz","fileCount":460,"unpackedSize":998974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtPLoCRA9TVsSAnZWagAAF9YP/0nW0r8+mLeOmy1lxrnm\nnmWc7iMwNqrC/C7p0sqhbWXl5lhaNZ77iHkHujHVNr+aE6gIyzuAwWPZF2dV\ng6xcQ3mUlz1Fn8AACec51aV5rFcYQSk/qY9kKGPYWBBuI/rVw3of/j4uD2Qy\nKylaaRiEv6POVK+ReBnjrIqyOFDpGl0IUB+su5DVq4bDCicl1ik5m9TyI9lA\ni5o0VwFvAzCCbixNcy9G70HMmG4nHpIM02iMDLoysA6W+d6uUjsEYq+PU9VP\nA8llKOd5TpYWcoBbRC2p7Znr8gb2imGFuH+UBoUykkbW0kCQ7ev9hrZ14nas\nRL+EQ59P28nCtHNpDSp2VY8ziY74EVgydj1SUeQafv047Dl4cY6vDQTjpGRd\nfpSVmqkoI63nulQm61ZwqZXC83znbMT2LrKVHdTFmswk1vyrzJ6631RG4lHZ\nenIsH5mrl+xLCHzPeJWfmoCMBjjeqoAUIsp43lWuo7B8f7R75PFNP9KVu4kG\nv+plIfsX4Qq9NtbW3au4Zi0n2W1/azMN56OKTXZ689ZsB62BzbzCclloVVpj\n/xntuIkG+JHU96Tss5u/qPs63XPEtKDxd16YrjKlZKeL0Pd1xdFOIfXzEIOz\nLA8zcaZKgnk3jxafoC5Vwu0uhanZpPm+dKHePqRHbNXOyr9I8WfV6HfOseLP\nsOZW\r\n=PRy3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqZs8whybVRzXrYWGN9VaUk9GHp9zhlC+IlhGnzUFDTAiAz4qHH9qkJoiPZQwk5oBYbllyO8c3/yDNqyx/9fdPgiw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.16.0_1622471399549_0.3626687667596362"},"_hasShrinkwrap":false},"1.16.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0":{"name":"@sberdevices/plasma-ui","version":"1.16.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.13.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0","@sberdevices/plasma-tokens":"1.4.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c69a1c0cae862f8a125186d0e117e5fa21086915","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.16.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-MYotEdqlhVXijREwXRu8efE8AJYyg8K1FBYZpX/18ibxYOC/Mpuwz8Eh+g718h54f22lyNi3LpJ8yjlsmHOI8g==","shasum":"5515aa61492cc1aeca56d3b6ca6d2ab042af2e6c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.16.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0.tgz","fileCount":460,"unpackedSize":998057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtPbTCRA9TVsSAnZWagAAuncP/3ubzomxuCdAS+JrYBaz\nCv7iN+zXk5xAbYsbliwbGTsKQvl1ZMEkyYswGoIUE25kf0I7kWFlDkinsY5j\nMJJYruROZiO+bKxPhuWIF8fzgWCya00l1MO86QHJBLPNHX6Dr2kM/mhQIbWa\nbJ+aWGXdpRYsuUMB/DE5nk2HAqaY74wWc/ogs+ft8/UXU+qbhgc+AxKUtKtU\n09GA4eGhS3kVl5Sk5kHlz8kIT3iAZiyDFUz/NHLgT33xktia6YfBug3/JO4U\nFTa+8HhEdqv/vQaNYdiYMCioXT7suw5NSnEwGfSi4fXYMfRyOm0sz9HFVapk\nxQtm0T5WKBGOZ2e+qKf1B8UTRj64J+dNZtN5mBM9pdjTuHXcoFVxln0fnlYe\nJC2fHqXed0Ld3rH0LRiDQ8eSDkyt0+AEa2DxRm9EZG/hGs9AigVcUZwtL3sO\nQCEFB8SnN2WjsYGAyS5kk3HGiMLdbm3iMLKvsJDPC0qBBRdOb5kglUSRdU9U\niY9rkI2f97YiwrL7drVl2M2UKFiEF3HSsosqmwCvLhQc/Cbsig0gOvmJyT7r\nu1OOcVyvOTUIG59LSqvOz0qIIlMrdIzMT2qDK97ZUFvOzQqvDtDMbCuJORzN\nv6I/e5//7WfmfmA1K3kFeLjF4UNPlPnpDbHt1Js7rfuSoshMUx/8ZXLiTnGf\n7GRP\r\n=uihS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFRkmXokLGfeL+Cha6Kth1YJFXlnGLYlECDkZSN4cBZDAiBkXMvBTZY5CMqQfWkh/EGsa6ghvFeE9RicJsrwSnxH0A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.16.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0_1622472402875_0.8235733613963201"},"_hasShrinkwrap":false},"1.17.0-canary.412.2fcafc66b21e79a3361e63e8ce97f88a44d1c232.0":{"name":"@sberdevices/plasma-ui","version":"1.17.0-canary.412.2fcafc66b21e79a3361e63e8ce97f88a44d1c232.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.14.0-canary.412.2fcafc66b21e79a3361e63e8ce97f88a44d1c232.0","@sberdevices/plasma-tokens":"1.4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2fcafc66b21e79a3361e63e8ce97f88a44d1c232","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.17.0-canary.412.2fcafc66b21e79a3361e63e8ce97f88a44d1c232.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-CACY74sssWA1s/dwx9e/fVOlCuoIOxi94MoBFVjXgYyV1TCqUyhHCEsuVYcOJzw79OHN5xSbt7QfD0VK23XRxA==","shasum":"f38d1cbb144fcbf0a42dc9a7141c0b8d8b347726","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.17.0-canary.412.2fcafc66b21e79a3361e63e8ce97f88a44d1c232.0.tgz","fileCount":460,"unpackedSize":999082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtPyICRA9TVsSAnZWagAAg18P/AwLzI8jLL7D+Sj8/pfi\noBPhoIhQhiaoUtLwxy9vZsTMl5vx//ZgHxQ+1LTyRP+9pVsE/QPukdDSHvV0\nhGbLWU9Hcg/HFQBtj2xnftdgh8hYVa2wJBwPqZ46phthex556h8iarIZSuN0\nyqdRn8d0GcEkYbcFIOFzpjWPvK6SYOdFT0vxNHaLcpLDwB+OEk1UZ78h6sk6\n9SZwyeYYkNWR7m/DEI7hEvvaE6F1zt9ldkan+3zeiPU+GuQZVsEDsgdFgIVy\njRRafPDyLCptTHQyaYrDDxXQ5EWwQA8OkwpVIeTKZVPGxz95oEnYQ+Q1XCcI\nwiWov5gR5jmS9R1JgWMAn5sVUCDAfHWZwBZPlenvdfltPm4uscrIH7ZL5juI\npFXzo3lZb85DMiilkM7Z3wiZlAIOMaDesuWBCBAseQHb/MUfLn14H92Se2AD\nMdmoPQ0TWh9x3JrSglKnJif9a0fSlntfrKxOdpofvRWtu7jMNk4OYGn4OpJr\nMudCUbW4prvGyejt5Ul5Y9Fd6h1q2q/iHn+0HNMjX3dQ/KLpeyoTT0qK6/aC\n1kme/v0JILv9VRWA+tyGsUxsRBds655dydb8M9R4GF6W5iyh22g+AZPjaC4r\nfWSpBas563avTKjK/XdU0s8XHA1ec7Xx+rcP8cQvQIs3N+LQ2GKZ8CJAsE4q\nnEYy\r\n=GsG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQn2ZhFOw+SrcVg07VeLSG855cXaE1zAFxHISIbTAvhAiA+f+vBJZytpOviWfrMtxDfLI6NtgsnDLeNZvuieDaHNw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.17.0-canary.412.2fcafc66b21e79a3361e63e8ce97f88a44d1c232.0_1622473864266_0.9677065839355687"},"_hasShrinkwrap":false},"1.17.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0":{"name":"@sberdevices/plasma-ui","version":"1.17.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.14.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0","@sberdevices/plasma-tokens":"1.5.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8c33948f19254ff6d6ebac8cda1525a758106134","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.17.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Yz2MDlkSX3iFfmKyrZfHZLrmP8T54yNl0l4v42w6d1dnHX9KOR1cNYOiVJ1U7ShmmdsalP/ryM8tBPjZdYsIXw==","shasum":"949b37b9530ff20c3b7a13fb46ce073243a310bf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.17.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0.tgz","fileCount":460,"unpackedSize":999136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtQcWCRA9TVsSAnZWagAA9iMP/0QJJUHLQq9VtZdIgXwp\n+dhL7Ch+cSACFnQaIloowcWIwr6KJs950iQ3tu6tPk/nlsTAVUH9sXGifIL/\n3l6zGgP8VOP9oVxB3ToJogTMeyPC22LO+bKCc3bD7vCP3GAYOKQKNiGbYmp4\ncZxcV7JaY5wGpZxjj9xFBk5p+HOqwcf9/EvxJ7bEaHHgC7EeBgiqwzJ9Bon0\nvwOajz7yvWdVOCg2q2Oinh9G40Y0OExYugst2hcokuw6rVpzP71xmADpPglH\nSI4T4qFlWgzdBUO/dLIjkC/BcoQg8AaCtOuOznb+noMBMWvKleNYHymgXXuz\nnSi4STQGc3s2D/LIqbgeyZwlwpgbx4+T20wstxVbLlsVlbELa56Tzeve53aW\nV1LZ3jy38AMFxsRMZMzczaxOlTw9gv+h7w1mQkYMPM+ZB6VlPIqvqCdcijq6\nFLxHNG5xnQLlzSZEJ3ofmqq18EwTe0U0pov1VwdXxzDp9VTM3nX2naw2rFnU\n4IlVPho/0MhB3UnQz1TVPunJ1yID952Wl2oo63003BeNDibeNE9tV2Au9WAr\n3gJJ21w/cApS3qf2QVVq7DhUlXxnS4TmvcDH2T5CiajnzY8kEd9qt4d/wFtz\nUVpsYZAHc6RAhaLAxJ2JfJQYRW5VTuEbvNEP8F6fmOMI1UADXg5XKze9YLTZ\nNygv\r\n=gD0M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoF1MKTnXdFMPhMoHUJzGuSjh+8i8reBEiS6XuweHNJAiEAuDCysqdrX2Xu3MjfL7uIWhwWBSoOEB6ctNbQGvdQMNg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.17.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0_1622476565586_0.5914063285772424"},"_hasShrinkwrap":false},"1.17.0":{"name":"@sberdevices/plasma-ui","version":"1.17.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.14.0","@sberdevices/plasma-tokens":"1.5.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7ecf53c957e2542cd4136a4aaa2598b9a450fac9","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.17.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-aNU4IrrUeJAMcXMNZv3Lxh5f2vuwdJUDNZCUg+HHxoVZTwkJE9T7ukeu720+JRPkzKQJhwzIr7MTSxg/EZw6Cg==","shasum":"a572a84abb6d3f5aa1e83302e1f67a310ba22a44","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.17.0.tgz","fileCount":460,"unpackedSize":999204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtQ4nCRA9TVsSAnZWagAAEiIQAItg+93XOZ3c+i8QQ1UU\nJnZxCZv+kmoeisAHwsRG9AW7a+lkz0PRPi9qb/rCN4OiZMLlygCyDjAWSRq+\nV9OmKUVvAPjWQeODMg1wfLKEHyt9qfzg78U/3k1o1VakPZzSusXvcMvPD4Mi\nZEqNcK8ERvOupgASxIhBVFduFfgquGJ17XcYUFCjWU5SQTLhnOjAgTkEemK5\nRvum99ltoRQRaIlPVeORtfc8Z7cBEsW1Vb6g5jWLirqTBmtvyP5UVHaxW63X\n1s0EK87wXoiGqDDBIsTwm7JkwtB5ToNtu9BUqI5A0Ks/gtJSFYY5ZfOMnzDX\nDMcEvQigeUOecSLPxAkjbrRS0Y7BlQfmLDQasvjFy4hVotjTxfYHaxxGr1sx\nIg5bxV2NU4qr08clY6oMEe/gt8MVt/78AAxVjNWqMQrw3O7R0qdTdV17HFdQ\nop1TXUtomJc6gAaL7HQFtcOFRSgmygnPCsDR/vfCtR6NU8GRE2jElvZpu7R/\nR4PwNbOe4zlZedJy31q2smCsTSywK59vRUz1E2ZMcQW3esYZxFvk/oFA/w0e\nIONhpB711CAMNutghZ7tNJ6VlphYc96bmatDa4ydu44gTGn1QbpflYmN9oDe\neitzXh3b3NuGieyN9dzqFUBwMDWUFbGT3quci/0BRQyIC9ULVjnkp1CdVXm+\n/WLe\r\n=H0Aw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgrdWh96kDenhvwrGIVUTqEhCW41Qh9dVvIMYXawhpJwIhAO2E1yIEMdWFbKC1Wu/aPB8KALT7wjGnjGib2vkM3uwE"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.17.0_1622478374506_0.07801504782245017"},"_hasShrinkwrap":false},"1.17.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0":{"name":"@sberdevices/plasma-ui","version":"1.17.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.14.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0","@sberdevices/plasma-tokens":"1.5.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"573acc4e434c923a19b3b5bc4e76ea253e2530ab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.17.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-x3wDVV+oKo6OBeqKynwV17uykWp2ULqxE4sAL9Cgt/dt7QkkdzX5Mm/Fb+wTCg5eeInCPD5thdVRFww0dDl7eQ==","shasum":"98a7463470e705469072b2ae00411e428ebfb3ba","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.17.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0.tgz","fileCount":460,"unpackedSize":1003951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtQ/aCRA9TVsSAnZWagAALrcP/32sEivhv8PcABOeVGtk\nHcgqTIfRT/x8Uduh3/adT+Z73HuszL2BIzMXk0NenXQLQ7q43B4qS5eYnIWa\n5KTtvttpmJYkM6IOqci4c5x/oaENQJt+e8hZr9+t1rCWBskhd2dR3XeGdw8i\nkQfJr4IXPg2nWuk1Llo0oN6u93jVrZzhjgpkSrLslAr1i8YJ0BIm4zvg5IF5\nJAVijtNrp/cU5T3yHn/0x173rrnWmxlsfBRPTgWd+Vzwz62tF6W8lD7+25Qk\nSfhB/uybm3yyO7B/gCAs2aGGfKaRsd5fQvsxRuO8r38n8vk/hB21XBjNTNfs\n7OQzu092dkf2BKXylghdDkD220MKlNzkycoWDLrpaLVNApbDZNNagKcx7S7c\n6rw1RfADGhiy9IFXvAzTR3WWlfkYZutwt3Xemp1tJiQ7cH7sijLdn3PejJtS\nnyaY90q2agX3sIetow68fxqynjZJq3z+100ILX0H2IHpy8J1ZNYFgof7T/uX\ncrFnz5QozKR5i5EragJPywn7Kats2wi0D6q+07Jm6zc+JNRryDZJ5veZ1U7t\n1erF4ZQKbFVO5iZl9oHOgJ3BHtA9/9+Vy6iIJdpnaIlLt6fMhqUBzRaz1Xfe\nB/nKoEhqwFStcIyZRV4GmJcs4xQmms4pY5NUrJfiNA3+KPVvlC121OKdG+NA\n/gcx\r\n=E7K+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgciH+Gs+N/APOPMYy1mCV7b3AbgHoUePrjU0q8Wfc0AiEAtxS88Uwg7tMtzbj9Qg6J7kqBhNE6Srs5YmgVeRApiWo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.17.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0_1622478810177_0.11240137556592877"},"_hasShrinkwrap":false},"1.18.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0":{"name":"@sberdevices/plasma-ui","version":"1.18.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0","@sberdevices/plasma-tokens":"1.5.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"612df716979968636d2c6e8f74ab437fe8053e97","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-YBAXhms83Q9yiZcY1JV2b5ejxHKR1mACgHRKulzrbCEEOup57mMP1FSsvtMDGSBkJ89M4R6ROxWvif+qCRs9Cg==","shasum":"5e6fe0d9efd59ff769f96f086e53671db1cb28bc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0.tgz","fileCount":460,"unpackedSize":1004127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtRr/CRA9TVsSAnZWagAAE2gP/0YULNTVnHv50dlkbnXS\nnO/Me4lYIadbuag620/FLZJ0tpJuWfS8W9YiHzf9+J5u/0rTLjvMRNNtK6R/\nyQDoTX6IuhhKHDq78NIH++WUwJp/chN17vKwl5Otd0u2rs26WFLeyZuGn30a\nrKNU340pQ3dZu4IkaXrMAWVc2rDfp7KAbdRkgSrWLjemsMQNAFAwVig1pzPi\nsv+/4caZKebUkgFUNFpTvC9iMm/s485GZV5PFRdz3nDVPqumbjwxozLGUMBg\nizwjYV9XrvLI5ba+OsnzunXSF6xufr+wMR9MXQMm1YGTQXF1x7mKBbjVEIQJ\nKJTeKaG2iQGcnGZENP9zl6I7F5f7Fr3WiivMk9gPayhxyUQq0i2LnNAOBZIg\nfs3cW8jO6zo9/ouim9MDBws3rkcGJqEGNuTSD3Aba0oOQmwRPYdnPph8xOJn\nXc/KiKlx7PeOX3EUx5IPOBvztRInqv/H7DjazAxwFu12I1Zxv9IELotuz/e0\n1Lr51/enIkwbqvB4dQ3MPL+pyC3aWdCozUpEwBTxKhcOplduMgyuI954y+B2\n0GVSgIUqgagoeqIjkTLtlB2uDebm/J++c/1w/WLa2oRZe4IQ81TXOvC0DQAt\nfzIwp9aSMnSOuDjG6guMwOVPWF32ItRTH43stFw+E1HimwM8i1NMIrEOCPna\ndEBj\r\n=t442\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTbXzYt34kkfqaoq5PDx3m4NjDm66VsA5aps2A/VUejAiEA3sM6JvljCKvPPdlVYXoJDI5GpgKHC+4YuZoDvggmr8w="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0_1622481662626_0.971092031113596"},"_hasShrinkwrap":false},"1.17.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0":{"name":"@sberdevices/plasma-ui","version":"1.17.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.14.0","@sberdevices/plasma-tokens":"1.5.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9a1f60abeeccd399dfc2bce83a3aef9249f07dab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.17.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-HNwRYsTRlQ3LIc6lSCrGpTMSj4y112MhcV0qO/8dx20in6IrOgKzmJgdbkOKZcHqvJQ20aTs3lL+WFECtt6myA==","shasum":"66e7279e10d4a04d6e08e7354c93289da6f9e1e2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.17.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0.tgz","fileCount":460,"unpackedSize":999312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtR0XCRA9TVsSAnZWagAATtIP/2EtsyZnNQPMrGwbIuii\nsF87ffO2rwdnX1n6lRDtNnwyBdcFuIL6AeBG2wvKQqpMkOMTUSFu+jkJX5oE\n4hvdRLdSw9UJKo4GgIoB5num/Y9kWCVU4gD9GiaRs9/9a+McevmY8pIwZ6rg\nSeuwRcYBNc+raablQfJ+teFUmexdhHoHNWHG9AHKQd8smWVSeUF7fnozJwGl\nFkU3v7mXjQP/px4uWNftwui7h+Hb6i0LEb7LSERvIGSv+w7qxpjj4s1Bethk\nAkTS6Kwcu7mv18EGKL8ZRCKSOzNIaprQVHijvmlaKHTB6LuR+G4cx0ATowcc\na1wTvfxeunRmEUogfUBtSssJA7qa21AFHzICBis101K2p2CZk+m/Z0j1Kzc6\nuVJvd2Eg/Qs/ZdptAp0clOcmNYw+CzY8WXBRY7dvVrBrZLBLQRFF/MB3w2Fs\nUHNdTqTmKrnQALvkLHgzl3ACWdULcX6ONuGAkqyoAk6kJ2RvX7zl65hrG3IX\n2Ug9+Ixul8AP06ntUCPG3j+14kZGmDK7Ys2WIs2tqVX4iSuVWofGTej5Tpt/\nVyId53fG+KqfPDBtChMCKB11O7vOMY5EwHBSV9jCu9C7y1PPExUv6hWRyEeM\nNU+DcVZ/sk7qH6iNPwxhHF4uCh24c9lXLaiie8/m5r3cwnlVz+Gxc5i8AOh0\n5KC8\r\n=7vTp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCafXCwbjLiAqigwq6FdXwduQTDbcoCHhZH4Xw6gJwRwAIgDx1OPJpaPZngrlmkaOj88RGw++pn15WaPmgVzTY/oVo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.17.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0_1622482198620_0.7158496885821082"},"_hasShrinkwrap":false},"1.17.1":{"name":"@sberdevices/plasma-ui","version":"1.17.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.14.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"21450520558ac739006a4dc525d34be0d8cc5cc4","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.17.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-p3vAevjI5yXHPVYe6PDDDM1pl2Nj+HQAvlTSEe4eU5a+CQDQb8OIQy3YbzMyzzxTQdCF5hxwp29b2JCF2zjY6Q==","shasum":"b6d68c33592ceb69ef9229bcd66280505f7bb42b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.17.1.tgz","fileCount":460,"unpackedSize":999434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtSL0CRA9TVsSAnZWagAAqt4QAKGsBT7EY1Pcj+4rgEwz\n5hTFYqwCh9Sl9EBlUFqkn9qCAOMbbpldnh8isCywtq4JnfJyj5Tgj8ZwVhEK\nu6yIN+Lr4LkTAV+qcPhk0akjThy5jmpGZVxtTxv9gWjl0eXDIeFSpQNHYK1e\nmbVVpUMGe63Tya/4ZSvrIE2P7/FRNFNFqFMEzwgyCDSm1kFX8Xa/i/yRfi2t\nF0BhbvXmaK+tBSkjdwlXJfeyI89aBJvjcDogAyZ9X2Fe2myCskbeWbTjvYVW\nZh20iKqisTQAp0An2Ma1Qv25a5bG5j23joMtzvJTgqppWwbD/LlmqkZM0CzP\nhfWG7exW720B2fi+CXd23ln3cvYa108QUv78iO672RRWGiuGw3KAtP5zHnGR\nQjpOvIGXD6vMOaqbzQww7d5Shhru3mwarHp30zZ+lxOxqyhGOLrbp6YhCAq0\nJpVfttlDSSDVTNP/VzRVhIaFci1MWz8CmY56BEB+l7jdwkLvgJHb2fDjw0Qy\nvbv8FkHAsnwBWWFLE4I/eIp1HeQDyIO4z+jsUBuxyVPr3T+tkwZptFWNuE/m\nopqhUSELKWWghilOn4ZsqGJUwk3dSdAcMUa0IQUgM1kKI9husoEbWuCdZo9Q\nKvpHMGVYrKfrw1ZB/5+/mBOPZ5dT+xyW9zVqSdHoPLe7TiSp2d2aRdKMEQ15\n4M0Q\r\n=w5gb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGu9hPTMmvq85Yq+Dv8ehngt39EsPhYG1AbUSSYflwTpAiEAv91TwPmEVGXSz6TS0s+FXJ8yz0kjB6YxWWAUHejpPHo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.17.1_1622483699965_0.7248365575931839"},"_hasShrinkwrap":false},"1.18.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0":{"name":"@sberdevices/plasma-ui","version":"1.18.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-PTQrclds204OPWe3J98ayFngPLbUKyvzlEvgXosYwDOncplhFJ+dj6I1F8YrrtlbFriQXrHSNyhVT3IMwtserg==","shasum":"93fec8cf4d3d9ac96bd50c38f326ff7df3fe3618","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0.tgz","fileCount":460,"unpackedSize":1004357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtdmCCRA9TVsSAnZWagAApbkP/2zYT4gUMfIQ72ls4VIx\nvhzoY0wijM61hiSVJifJwA4PSOQP2jY3oUs9Xdaup+R1MvtkA+wKM9L86GSM\nFoEyQnC7WanPKsMij+6X0deFcQ6G5eUY+/SPz6jiBJIFwtYsmHsDkV7tDd+s\nDnaetN0m421pvZk0POEwDyS/CQFJRaGq3GLqUsfpyRjAIQh2NSjYAwcvvsFq\n7d4c9dzgGLyQEx3ys0zVJ2kIL5i4KOB6uxpUul2AAuZCjKqL2reCj3iA4p5+\n2qjFlCTL0AzLBIRG2bGPSmaj21o0CmmZtgQofEN+KlZuh7NOOxXUxbJxqPVI\n5CvPP22+Ubw+arrVj0a01U/HGepraGiv10lrFs7EdxLxUolAgA1i6NT6W3E5\nLAUg/F0r2r7AfZgxo2R2/5Ye9q4Ifo/f+sswhXhNIUBYBfmRSxvHKDI46/rd\n6KQeMul8Lctw+eEZHZ8zE2p96GGsPbxQ9V1DEYNriC68jArzgJco6hnwhQTN\nhf5ol30hQe5jFVtQlXHASf0ER/TSHLhdLIhfTWvRjhI1/dQUj6kOrtnp52Pe\n7JsXDbQxHCexpV2/iNDaYuWL9QHDwdO8f64hNoEeyIJ80vQoQSkDxzenz2T4\nO5XA5ARuQJlAxujllxlsKAoGICvpQue3zOVh2SDcXWNS/jRAwaSrpLpAuNM1\nRg0g\r\n=7/vx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB92Uy2OxppwipK2dTXQeQBEequboDE1rpZUjMa24x6fAiBjAQ5cntBcumtj6jZFtWmfI/400Fj19jLFsBX9+IXojA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0_1622530434026_0.619450118364784"},"_hasShrinkwrap":false},"1.18.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0":{"name":"@sberdevices/plasma-ui","version":"1.18.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cb38688a3ec9d39b5bd3af7007297e8336b72df5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-r+PWHZ3rJL0lMA28FbLSBigq4cbScFBqgnQAOf6fkv6xukODOirtfG+FhrtTgJqwaM4k+SmvwLZQvaiIigQSTw==","shasum":"bf8ad83b264699aa308949d4709861522c370c45","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0.tgz","fileCount":460,"unpackedSize":1004357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgteIvCRA9TVsSAnZWagAAsmgP/1ZNleDr5lMWzpyZWzGi\nVCn7iYpg7yGduuHkYwxwxumAFXAv5RWdVzqrUKX+vx6ONa80/3E0xXKztwVm\n744y86mD8YcuOankgcQKcHZ0IIXKGpM0fi/v/LJf2gM+qyzkDWxIwe+TBQ/b\nr9adYdz4h/CYFMlwci0B5UZCohS6e2UTvUQQlesWfwZQebQPKxBmv/9KQi9F\nnCcdJj7x2ROgBHIDN4ir5rurgF6G/WQ+0xe8ACZky3BwmjGR9Pot58CuwPA5\n32ojeq8Om8wlS7UhVAPOdLJ4XJE0Ey7A4KKDLE9KNBJdT5ns1vCUQE0NpiNO\nBxVyy1x2MpiT8IYi3C0tRq6BtscTJ0TKRddbJ3CiTaBxvRdFkbQgJTDyvfoC\n93Xnd2JTZOVBIDC5Cp2cqsN4s57/APpYQGWxNpvlOoh96O99hIgk7yvxCa+O\n1b2OUK4k/nlBHdOvy1/etUiq8nLdTdRhR+sHId1e8EirgqXoutuBjwzwR/z5\nL80MIPcmdcOI9JpfBsorAmKAVh/Sqx1f60bDUWu0GpV8iRKohSLg503f11k8\nXk8eUqImCN6/Yhvz+YOBTHjNrw9PGH9KzM06oVpylBUNZiF0nbLyZpUaXMAv\nGH7yG64bqnRaX6xCIdAxCfhKs/127fFl4s7/vfjKZC27Kcgqmc4MwucaWg1B\nC5Sz\r\n=Jy5R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBczv7SvMR/r2wfG+DBcDNfR2Q1SO/gK68tszFPM31foAiB99DwRcTs38BfZscZmQvm0v1BEVU6mNTOhHkfar/ye1g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0_1622532655213_0.48981364034902497"},"_hasShrinkwrap":false},"1.17.2-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0":{"name":"@sberdevices/plasma-ui","version":"1.17.2-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.11.1-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.14.1-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5ce29e0d74041d217b00efb2017d78da43a9de72","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.17.2-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Y0Fj87Z54C5qEsXYF4HUJjBloNG8JaC6VrClgecSzK1dtDjQ2qV1AOoCYt2sI4SKAOBjIyXcXHbjBFx1BYgi5w==","shasum":"34f31fd1cf1f7410bb166ffc70bb22638fd91800","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.17.2-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0.tgz","fileCount":460,"unpackedSize":1004357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt4QwCRA9TVsSAnZWagAAkb4P/3aTmX6rcpfWOjWjD8TU\nIvCuDn2At3ilR4Fv2sqCSJBNQfcHfjADgHy3xzDI+WnBHEJ6xluFaheIZDSO\n00QoGCq4qX5NxghzkX2UmLkzYNdbWIKcZfjQjMNfAbwAA6ARcd+khAwAduVJ\noMhJ6kGNty+cTz275CYVjNi1RYq7WW6J4+ZzBgfi8AWJ0mekyG64ItBsURfM\n6wHdqaopTfN099KxhacBLwxHduSH5x+EXgUknv8mBEHlVwGWfhVr8QDsQVa1\nD0MJg9A5E4Mp268lUTB73n24SgKkoUiWaOzhzu8UAWgjbvPtGI+feoptdAwp\nXIeK3px7FL1AdgYXUWltT0KI3JNG7QDboJGy/ByPERKEsaOJw94wL+0TI/ZL\n1JSdZsoK9MPdoT+4Opemd7Mb/La5J4poCU8WgaEo0Uw0D8d9Bu4xmwpp6J/Y\nhQFpDiYUTqG6/yeF5iX9xV26f9VF9scK2ozUtBmEvkqmDzvuOCKpcHLureH5\n5TPj9gaFJCvoZI4giFOJhUgGqFSpPnhZ5ses24Xin3LP8HJrkEHlq6an9v/1\nHR3n2OO4c/K22bPU0J7ydD65rLbfoBxsct0oKYI4teajDHBxzD8nQEHw7V2O\nnA+eF9TbmsuthCVYY+vBtQ4N8GczDBoHtD+dNF02/kNw7zpR8MTHQcFbhUSk\ncBhj\r\n=M+zb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG16NV1d4ef+1ybuOjEEYQCOolVCeHmtYT3piX/juB57AiAb38CNcMAQnIDKHx0f5s89maLkgm0TxvZpMM1gp1AzLg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.17.2-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0_1622639663995_0.1405076622431285"},"_hasShrinkwrap":false},"1.18.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0":{"name":"@sberdevices/plasma-ui","version":"1.18.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f25f13c5973bc611fb88b5680af6b3fc6bc6c95d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VpHGQvdEe1ZPXSrwxh79ZA2aqNcMhGjyyNiA1nwzk+9a5ScInODX3S/P/4q0a1op52/HkqioGNLgHKGkh8SN/w==","shasum":"20024a9af739ddd925dc2247090437550db6307f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0.tgz","fileCount":460,"unpackedSize":1004357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvdX7CRA9TVsSAnZWagAAL/cP/RB+N9ScP58mTO+Rkuhb\nSEM/Ex1SsSIPAysqF0o3BsJWa/fyHU+RcxHtDo2xYhJaof9VG+BHAcx9Ou0R\nv39LyuU5u09LliNWqCyFl18FmDvwxe/G04JGFF6nfQYDWyqUvxPh7Gk7VIJB\n/LccqVahCqVIWD0nbIx+NwT7JacwXn0bAG7GcFC8ZdRmbRWetz5aJsth7Y7D\n/GIwFk5ItdXdCgpF5iF5YnezLo16l8ktNasuImxXprX/CU/8SPtGQzLtL/Sm\nf/tsxx51LAzFCapBLDg/2urKgCCNJPNpNYteFgVCpOrjjr0/r47/7iUmeGkh\n+J4mTVTFm3b4+KkM/4uVtG2z96rU0wqJMl5SNlCL3FeYUv+N0HBm9YGRq99c\nao8LvBVeppeYH1qxY1PGULlhEXGRzRAX7hty5CbjfJSk9yOS9TKRiogkFOxp\nODJO/x3QzIZ2PEiZ6biAMooIC6h0tNQiKZGT4MGC3+2BLUyh29ulgF46RGwG\na6K0tubkGf06p+1FbxqStlGbmXJrd4/YUS3on/G6R3QVgzQhpEBsIIzvlFDV\nOVL579sEfFgrCQcVj+svi9tVLr9UCOPuspGfg+iIrfjlFKHCdbJ7HsZNjy+n\nQHnzSV2Ns4FqR/xnlO22nS2DsRZYVkgRmVWkvU6K+hjXaomyku9VqIYCR1KI\n/RwF\r\n=Cm+O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiyJSa/HjayWaAeVVQK8WhJdkghPYwMS22LPpWOSVXGgIhAPMcqxbToVK5u7dRyEP4bv535rpofXubmlSwj+ZbrQDg"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0_1623053819607_0.6790533144504145"},"_hasShrinkwrap":false},"1.18.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0":{"name":"@sberdevices/plasma-ui","version":"1.18.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f4e6411f0fbc179e4415a836ff51476c5e5feb7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-w0OaSUhD+RpBBklRMQZWPwEoGoO7JzwAzr9ssv0Hf2i9bOT1u1K6AebzSRKyJmRQzJe0WIc3FCE7iAi6Gt/3Ug==","shasum":"e9e0ad70147c5cf09ec5a94afa93fd79b86d9119","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0.tgz","fileCount":460,"unpackedSize":1004357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvfZsCRA9TVsSAnZWagAALsgP/0zBd8TBjYQZcsJn2yv2\nmWfonI2ssJ5J1uH3A7Bo1iNSQ6Qija8+21FPfirtZ+UiwC+NQYMiolGO+bKo\nBu3gdHg6CSM7dPHHiFf0aghmzB/osMnu46yYYTAPFZlR1ax4q11xl1eFkj0F\nsic3+90CqmMsgiflwLVTvZTbJyudsOi6109uztkElmXVtYMKZRSZQIDoNsAt\nCa3o7KvXxBAJKgR61d34IhxEE1gFPtLV0yhS+8FsTdi0BLZHPel2RlaX0zfz\nLEH8BlzxrTdRze/REWIT4yzkkDmxJI6+5oSG1uJ4YrtdlqBXgi2Y9eihq5nF\n0h2yARZE0CTHQQWR+CNOeFAxWR2jp7ogeKkFm7Yx/e+bLBb0PJuHsBli2gwy\nwR9MjLUrOsYOIYYucb0sqXiKqQW6OKR0+5IZ+0ssUrfuaqMuZGzIubyhzUdr\nx1V2X8ZLLH5LZwVLEkmVnVkWlqD50deCuqs/n9mh9wHoDvNAAvm7Xw6IXSVb\nBI0POwY2SRGvOoaSdNHsCSCWn/TilKtwj1E9oEPCDpmLW7rdtHuKZEUvQ7jZ\nkjeYzsiBIXdiDci3Kwr/wvmUoQu8sZrXmPawyX4epBXKSrWsVMYXlUFlCV1L\nb02oxxoxNq4FNvy2mWXdb+ahJGMHWbMADB2I4iy3opcAbiduFCZTK86zgKP5\nFrNI\r\n=zNw4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb/QWCP7oIa3iQcPLD9bl5t4d6H3kyUM8KpkG7t8kp8wIhAKr5fm+71eo8Tle9bOBPBE8t/acQmUQ0iXzqBSuJGdC9"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0_1623062124471_0.9664783538167532"},"_hasShrinkwrap":false},"1.18.0":{"name":"@sberdevices/plasma-ui","version":"1.18.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ddccce36c6182d30461f88ec04dfe7cdc1d3fa62","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-FCuBNquP9BxTAYi4EOxW3djkeOLiuC6VXu2n9AQhpw4AINReg2xY2eVX682NseCEO4BAix4swkzarpk9BMJ0Bg==","shasum":"cd9c7f44719216a0b967d11de5002bb086d80639","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.0.tgz","fileCount":460,"unpackedSize":1005391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvfrUCRA9TVsSAnZWagAAn3gP/jCWB1oWU76F/99tRlO0\nLigpVFZraDUhaagQyNAGZ0scRLqd95W/mTxcfx1vJzttLN27ew7K7jK12yPZ\nQBNurn8qQFHX2pXPDe9Y6mEs1DbAItQSLNXUfr26BtLe2LtofnfXKI+TvR6D\nMvwEilu8psEU6THoYVpcNUtqWCCXdcMEy2mePhZUo2cyiTdJG6oP+wYOldNg\nsiRmaBKdUf2iAeTm0fJEG21x6aRk77h/S8nWcN5cRFr2c1mVGdY7Z/N6nsrw\nvW+K1wIG867FPHLSBER2sD0f3WQqjAfsDU+DBwqQdD2yUDeA+85i9WyXgqjc\nDjzJFk+yofMIsdgg22AfOA/IpB+sRaFw2h+OQY2VjaHxccZHPxNrVCPEvUMh\n5CSKDG/I7uAW4Aa+y2FbF5e+c/2mS4IkbtMNCZw4tNEU+n3YGhIL1BA9Bl+6\npC3Ghlac0O0olUEcCDVCZFVJBla6oeNGIADrp9FchFWMtJ4YG+HfEVGCyV8L\nV0oqQeAzrqoCyF4jaztqBC6mhmIorm9XpeWy9Aq85pXCn/yJjBaJDF/DCW2S\npx4hYStDFikl82HCpB3x2WM0TyB49bUG9vUr32OcaLOdLZ18/HSEvv23ehxu\nbrjkaM42VIvzodPYwF8Ro4Cq/JrnjIarpacDGQHMOzsq7CiXm+GtXMkmGznh\noFKZ\r\n=zMhD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICD/nuxOp1+8drOgsNCs9Tl/uYgDTTJUY2YzhaXJORrJAiEA+y90k93PUF8s94U515r2rTO1DSyvjzomO4fDNbtPjFU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.0_1623063252204_0.786547510509003"},"_hasShrinkwrap":false},"1.19.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eb64c1a1e3d379ff39448c3587c44c5674b6957c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-KV3yhO9iD9AsWHpVS1Rj4khAJr6GY3Pw/Aou3Ciu2dY0spdzHrrFSN5Vuwx6N6QsU+J7JAatpwltVlsfPLTM+A==","shasum":"14f6457677c75f5fadc9b58096d0fa32ab4d1ce2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvg1hCRA9TVsSAnZWagAAb7kQAIgJaPlsLWMFP6AbOJde\nK1RJKhdgliVxhWdOju+hyBOfQPeJeMW+NjZ2ZE2Bx9uIm4vMS/p0zye+U0w4\n16Wfa6Pqu6SOayZBvUgHrWgalam2UwK8AbcBDAUJxS0W0KQkH14oNjqFKXVR\nrMhR/XlzR8jaItpM1B6ueDH/wjDQANq0yxA/3lsxH30FkANnrxwG+0125rry\nLDWlVbi7BaipofO3DBPXol+HfIdT5tpXgX1juey7Ru7MNdDYbZGhflb3HKNv\nf1EfUJhXbeTxy4LVBvu+814OJ34AXlL8I5PKrBjC3EKHxQxz4ydOQtL/Tw8f\n0K4WVTdFZEWcW351eiuhOJn4vbVPoN2Y6FtqK2NrJQ5CCFVlnm/TPoG8/SJE\ncdwPVEZe3HUZPJ1BfJdk+mDolWz2YfdBfiyF7415AkeyWauh4af0GZmMY4qK\nMkXBI4NIEwasPy+Uv1+azn/iTYI4xZOKBsSeMFi5AaPnxrSUkgFEFT8LUQ2j\nYU9ouBdCeb7JMJ7r5ZBf6qbjbBsVi6P01JUotBei2uVojQhVQsVT9xfccSTJ\nPP2oYMpqgYgWti4ruYIh3om1L4keVDyohWiunwkBPc0MXFGWxm1LiS8hlpuP\n+EgbxWoCm9G4z/ePuSOI9JL5qfsS+KBwLyK4EjY/5MwCGMaj1wu2qKemwc6C\nVuvc\r\n=6UpN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3a7Z4snvw/Ui6EvZKlFKaNAsx1dvXHkEUiKWhGo5a+AiAfvLi7VptBmksLBhJGttvwl8b4kjKmvJ9/W0JSEI+ApQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0_1623068000790_0.3684265574892167"},"_hasShrinkwrap":false},"1.19.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fb58de83544a87fa5dd6ecfc71ffd3a938fe009d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-8xdyCm59bFjAcPFY8sC+dih62zk9uJT1tOW6n7oleG+H0+U4WLfgNhSgWvJsQRHSWEwHlzw3itBBr07QDZgG6A==","shasum":"7ca4e1f6ac90ea3fdc88655d9740b9105233e203","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvmoMCRA9TVsSAnZWagAAcjwP/jzDvMPaAAaLRBJTVYqA\n/b7HbvzhRMy7A+K4OdShJjneDBk1hFjOSej6C5UB5pXVRebGmFWYKTGjNBpg\n3X9BTESeHrv/fXR/CH7rduSaFX608CN8IozS7lwf6z0IxbVYs2+FC3npDHRr\nKGbjNUZw7n1+yDJg6fMVxTWQt2p0Ow43iSDJezV+ayTt6AFQn0eB1NEFJ1dm\nXONWb/6Gtt/k4MhU+0gvx1iTlzluzFVe5q8gk1UR0Yv95rvVeO9Xg0gl5uq2\nLCa3j/2JfBAPIqL+F0WhmRV/d70CJ8I34i435wNvkoxS9iekjg4PX0lTfhEZ\nzgDYjhsvNP2WND40yCUfc0R2nsm7XvW5gLUMRN9WnZsWmcZDrfAZ16RoRFS9\nesOdI005RtYZR24Z1tuz65O9VaPqcKuv2a0EPX9U/8pvwZATATspUNw22wP3\nlXRbJwvFDrDH8g7wDG03pERvrcAZ5SAnCrUauP17ENov3JxF9zTiqUGLHyux\nR+0+z5DJyXUMkDKxeSbW8BF5SFqqXkSKY879nUto1pLrECpJPByFaixX4YWs\nZ8PM8lo//mGjr6ZDYRBxIdg6LApNDkN5Vk9OGsPlDy4M79/QhomOtoOx2GHf\nsrQ6OxZWCOM7FUgiU3JJ/lC3ynVUwTd2NGw62Jzq5LQmSvEVE/y5BVmeXc+h\n+bv3\r\n=Xocb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJBcEAJuhKxVs4uJ2ODMQeeAXHTsY1TbocMyXerqHMZAiEAjU4vBL1dCi07mgsL2Cg/kLFMcyLADaiAx1c+cVYkPDY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0_1623091724514_0.42852130134604627"},"_hasShrinkwrap":false},"1.19.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0ec13e0c0f15234cc43d5930866e12a9bcdc245d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-46m+/aPh3REtZsH6KxWM8Nhp9SEAsrll8nBGItIGh7nket7ieRfYpwUZ9Fhl5sFW3vsOYebejAo0SZYHm71iFQ==","shasum":"3f3b9af6453e6186fa2df1576f0fece7e1f08cbd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv0oZCRA9TVsSAnZWagAAFqAP/RX3hnoAmPHfjIcum5/Z\n8sX6+1rEmLBFfopGiXFk2yeeGP12ft5OhvR3TDB4lnK5sNeyxO2S5wxmwlEo\nUcfdX9Yr5W3/RNQknzbeSmiy0J2mR3UyYNbm3EslZKfsXHepaXfLclxBmXYb\n569AYJnX/fdEPOHMiEvQGNb8K/8uUgWagSlcY+YSlMU3J3jflqVZSvyhYLLG\n/vnYOSbK6DwAqFu9sZJGx6GVa0Jf0bB/MzpX8iCpvg3mbSZLreYneaqskjoF\nVPYKyv/7tpzQ4N4Zx8VIII1qaqshtfS3WS6ZTu6bljPppXjCRt7a+LuKV8WF\nWRDH+fkxh9u40yaK2NcJfenSYf+UKVzKDsXkcDPaPBWHQSJh5L/NNAM5ZWD8\n4bBSfXJOaML69h5uOdg79nmOJYGoqBBy+XxTlq1MqUlcWvfkxD7aPMJaUskG\nznC1keIGzuX26M1pwilTu5em0U4NDkEbh1CQldm0/vqUQwEnmwUJAPl8O7b3\nZwNjG+9v6qs+P8q+qPrQqdPUTPzdn2a9jp09o3kUQUclc9KP3DnDvRUzmXlz\n2b9CSxM/EP3ZYmOFILVP4PBARNc0oj7N7AaPhT8orFwFn/3YdQbudo98HgUG\nIHy0rnmqUNpLlaNTgsYeRquR41UgKNzuQgzd2vbaZct1viAAybAGmyGnU1nK\n/5Vr\r\n=PJK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvnLwXBk3I/DPWY8nX79/A4hhVzz34rtEOpyo/KdbEkQIgUZVPCm0NOxA54NNj9vgCq6AptJ1iLW6j/7nTb1Wd3jg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0_1623149081606_0.8335384699963666"},"_hasShrinkwrap":false},"1.19.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"26bc2d7263e1aef2c2090eea60e62575a71d56d3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-jKCiq8wbCo/hxeVcrWW13LKNJ6vhuKa2k8s6I44dv3GBxd5u2yy1ayngNRTa/aa2ui9qlk58cKPXb1cN2urC1A==","shasum":"7516cb978921d11f784771dcb689a839e0ff7ca9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv0x2CRA9TVsSAnZWagAAJn8P/0ZE34xy2biVRfwOEnlb\nXQ0hKgwmuFA4KKDQPKNUbYmIMMyVDQqiSZ7yZr0XO+j9abfLJ340T5xHseXV\nrU4kgyokEShpgm+azHabaqg7kBMJodWGAN44P8Ikh2dqe6CpfB+Seoyb0lRo\nNGmkr6GcjCAc/37b4rKLm0EwwE3RNra+i2Alz5Dw8k+/is6A6uxsKh5gzCLR\nfMvwr5To8jvfNDcfRoHPs3AoweC7PSnW1Uy90hMQkwgFuwdCQUY6NBwu2U5r\nOtXt7rq2uHEZSuo26W0QPqXEjve0+FbO2PsRH19Mabsl3dclsk0ONXug8zdo\njNkrNt2Ew3lYeM/UsUa/yVmbihtdtrHhvbXrlsdwS630qBZvccVgBFFwajzx\nXvTolQjQC31bdoDy5UzFw5qJw8gnnSo0lBQJrFLdol7S05iRo4+vGSar4guc\nGQLCGwdyByVBVlYIOguKjxvuCrXMqlfJKXXaQUu1W39IkLew/tcAgF73LjmG\nvqqfcuF4Q5TbSNlKESdda9gBHeWsOBSiTPDqfVZWSRPpqre7SnEjDZiioMks\nxdqC/YSKbQvdoDnmLbBOsyxzzwEKjVNT3XX7Iw41M0HplCyqtFl55iPPl/xb\n3045Q/5zrjHzwH0Wm3LMgDSgNNgndYIDME8qbqFFMApb/EJtJxkvzFipACox\n0OIx\r\n=fxPo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/hsVv3lvmDa8GWb4xcOYi5mmEoZfRLZO7ZMSCB0RzPAiA+oxm1vTy+ao2KaqgN5JssmYaU/SH2ust7i8vwIbUPpg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0_1623149686504_0.8671616409234066"},"_hasShrinkwrap":false},"1.18.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0":{"name":"@sberdevices/plasma-ui","version":"1.18.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4731c99c865e6154c2fa1aa075f5036e34e3c8e6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-6xlr6xu2VSthFa1fMLQ7q1qSzatu9sEqV7rXcSYfiEQJKsNEB+6simtkUPKfQ9XVqiGRS1kQfE+9Xlln11twkg==","shasum":"dc183a6e314c0a9bac750288eccad7498d3fc03d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv1enCRA9TVsSAnZWagAAPG4P/3SDsN88rbuOKox8q7CW\ndqJnwBmz82UkWga5cw7Kka/YHJ8JZ7pPq6cYcI8J34pDdiSQO0QQUU3WnUnM\nHrG7jdWiA37ZwQvdj9utz0N5bFLZ4rccJYAGj8Neb9QOZ2kf7jPRQ2wRORWW\nj9r30AJ719KdvtimajBW0v+oUo3WZESa7DYDY3KgLrieMZkMGyhFhCVcFekq\nrTGySc/Fnv3MSDTLTvDtSNfVHAE//DA4rvmZ3481VuglEWzvoFGzMpdJiNBc\ngHNXrkrahegu8DUNxyqpBxcCRu/ZNsx3G3pKuRBFNx4kURsIcM03wc+8dyrQ\nFKTpe7W0f3Vwurp9P6va1f78bg+iz9K2eU9tx4HkRX5WLtrBlw8IBfynDUYz\nu3J8xKMKlhg5VXaHH0WIDsiHwV6beJ1/iIi4BSR5FzpqYvL1QjvGl9Pl6k8h\nJKszaw+tDy2ZdTFfqY1oPf5rOTTEBRGGL7FEDhmAYLqfmGigbh6uRDbEJGYQ\ndnq+Q7FE3qihLapt+8uWMTgHtNmPzaVhgZ/VIkKHeMsdIDPu3awYzepjzaYT\nfX4/6lqay6qhwOKWXDjy8wkKt4mL7AQnrlJ+fJawbSiK33cr6bB+uE78QeE1\n8nvsHJCWC4hsORadLiLL19NqWcorMcAoyYnK98qTxqBNbFFnHwuDXmjV5cjq\n2yW3\r\n=vjLd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIuEC8jirSX+DCQMRf5gAp6ExYOCVcS2xrVahf/6OKIQIgQQ/1WNZ2OJq8J7Q7mjOJUPb5s37LtIjftTtJbiHU9Kc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0_1623152551618_0.7650169836931942"},"_hasShrinkwrap":false},"1.19.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0ac5b720bf762387b93bf268a2510af37330ef9c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-F9lquaB0LXo1LAdCVHcH1pBh5nJ5U3guIY3AjyPh7uSN2ZZLwy1urqydDCnBQZaa3XIEHS6J/ewgwWKtku0Esg==","shasum":"0bfc92c15e216d69d8770316407fcfa93d66b678","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv1oXCRA9TVsSAnZWagAAkqsP/3WhImNL9FqSgV8wuWbI\nHSxCyZpyIpVIPci2UI5k93bPqZqf0Uge7ONzAUOi4/qN5gKmN2Mpr5YfjFcf\nvzx2CoFX17YS2G6RgfpK+FlHIGXTewcoxptCUfdiNkm9sTdSX59KfNzTnL5V\na2IKB5Dm2d8wSHM9VBdpwoUqrxEn5dQ9Kt9rcVr4cY2ZLqV5G/NuJDCeA2P2\n2aB2oUcLvdEO4a+tHmGfy1IWXJGr3JPSG4Pfym7yNKLWGzQegzbFOdq1mop4\nbaSPBrVk3/1LYuV9pE/AV9dlLu5zBbEynFsSYgmeggf0WQtWwnmWHdJMTMDi\nFS5h5Vwyhr1iFVj1s/VmBQliSVHllmC/g54dASdSkSRiIiRRthbTTeyreAA1\nTh2sJlmOSNAboQU8e00orN+VyqwMj9m3PVyxLPBH4o8yvOLTpmlfTM7nUWD7\ncmLXOFTFaGDl4h5MFMw749eXKKlY/LmpPb1HMBR2gmkkN0W4JqhNr/UxClS5\nGH0HgL2nniTnmjg4aCwEqiRXRF/oUGf6xIqkV6CBiCDePKCx0oDWbe38sSDK\nne84tDr8zeoco/Ml/tzO9AVvX5DxlfP0PPFqlEyPnkumcdWaosEu8K1/zuvv\nWyuI6WE1rF/WFCJ67FErBZZuoouFyW7K3jsgC0XL9j39yK4tQJtKkv4rGHWO\nzU9N\r\n=KkhZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC71fN4WrXHGA/5mfDPUaQ4BI+rKhbp0xT7+4b38Dq/5QIhAO3x+YMydj+jqGMaVX5YyosOSsYFyfWNZEMoLliDlhes"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0_1623153175001_0.05451296372443015"},"_hasShrinkwrap":false},"1.19.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8ef7aa1474368a606dcfb4caed0c5b37619b3b4b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-JSjUN8ByHyvTOULGUdsyuKKakg96m6SV6VrajtOSyFIL/ANMiU3ppAxz23rb4GG6+TJwPPOj5W6jZ0uPYDNV2A==","shasum":"bd32020c6501cc7294bf485344c2bb02811e6ef1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv2JNCRA9TVsSAnZWagAA53EQAJ8BXihmOO38Df4ZiR1X\ndRVZQyxFtngfVCB1PbViFPBylRWM6EzWs0cV7lny8kDrk5OFlJWH67FnrRUv\nkJKeCIOLzoxIVksAKJnPTFTcuDNKD7xitv82oWTCqO7FLtlAdy0jJiSvag+Y\nNiC2ojlW8aYw+n4Hw0DjStY+W8e2QrC72XGLrj/lAZMLVnSxe4GKtsiqrKnQ\nLXLKThkKFi02AzEN5oWQaDArwpGJZN7tNzB1+i9J/JBN7wmSrKLwGHVSb5dV\n681a1JpbySwZX+3D/14I5eYgHbCYBxIEbIGdkz8vuJcWOJ/lVaiBJ3KCTlP3\njXmyRViTLaq+NBWkPj1KT0/KMN4cVqcI73iNQh+hTH87VievibMYum4B0vxl\ns0iBEX8UofOfI6dyyK+uoJtUFZlz2OKxmJ2Asqai1eXYRKY1htpydM1TMxds\nBYvcnarHXFrhOm6R/hXwTs1O8N/b27iRHXVkht3dTtG27jKp46Bw8+f7tm2g\nPR0fWTGrKXSWZHtWlnFEusVbjyOSX5Xey0OVb/Rhwxyd8b66fQSSgL7z67bQ\nXPp8JTU/vFGgcDYQqqVxSzEZnRW+JQ54EBcCTdtY7XN80BYnWT6FzZAedZTi\njgocsVhqs0RANUs2iFxSd0bjmd2WqdrYaUS5q6UL89LSBWv9zymxMrqp86uY\n7I6i\r\n=5oaC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEBMuvBHhZy8JqXtMk1lqfKjZxj7UBrKk8KKBnv9cdwgIhAKyLu2Rx/RSxWT7z5ZvLupCocudbGTXindtwzFo+JQNZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0_1623155277268_0.5409074433735441"},"_hasShrinkwrap":false},"1.18.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0":{"name":"@sberdevices/plasma-ui","version":"1.18.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cb8c7b1b6f0742b4da8aceb3c251abc632b9b380","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-fr5kR6RBCfgJPynqVxKFiqlOxCI4dwD2DXkW+o6z1mUzGkaYNxkEnLG7t5pKDp9LmAPB3ZiC0SUYBF+gskbCgw==","shasum":"93ce3429c22de23c2e960bd0b29a3a4f94de3fdf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0.tgz","fileCount":460,"unpackedSize":1006643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5DYCRA9TVsSAnZWagAA+lIP/0J4Mcjx6rYWGxjisFEw\nYv1ZfLiwBIPoKIIgsW8ak9t8kedX5dOJiB1HXfU+1zESe7cE+df07Oy4efXm\nP0hlLJxxbXt7ahUKPxG7JpMB9mXzRsg4Qw9SGWb2m+7O0iUqs5nN5N1Iq7sf\nJF10yi78S6BsC1xEpVnqxzm1mwHws5pvdcvhQ4yiaQkdaYLE+iEDnbu8e2+p\nUMlFiY7MoqczyASnfVYaamGBncvuCrey8LKxnD20iowdoxJNPZsKiZVlocC1\napatF8nspIHHNcYQ6BM7KqTZ2nfwoSlbLye8eLVL6y70J2b3P8HLpvSV0DcX\nCW2ECP6pkeIvdOj6WudknES+5b+N/rgbOBc8ZfskmZk3C76XZf45Jlwvxh8c\n9bL2AcPTzS52MlGc5og9GWDf/VkHwXJZemz3w+uuTrIIB3sVXJBB70Vmp5mH\nsFn0A/45N3Q1vbzR+bbekEPk0BBBcIc7PyIl4h2gCw3/to3+0D2fX8TwHs63\nxMUbGd0T0Kc9y24whytqFAGhVYI6K0jmDKRoBWOBDLM0MvZyaE+d8hDLz4lL\nm9bCnZ7+6S3OFZ0PZbH2HnMfZNvs1nSqeRVPA7brPwiCL4eDF14yC0InQYzo\nQmcEi+bR3XaV+bvlk0glvfkMV5RteXS5xsdwhMskXDyp4e2sbAuWqCFQZK6u\nRjGw\r\n=UD3L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEi2WuxLXuLPhTG0THQfURZa7e3VZSTjTtZG6xxs1kvaAiAseuH5au6PDshfmpNGC6I7XaIG0X97U/FR6Bc7sapaBw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0_1623167191866_0.9375533169769625"},"_hasShrinkwrap":false},"1.18.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0":{"name":"@sberdevices/plasma-ui","version":"1.18.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1bc5075408bd0360947955f8bbc411d266132109","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-GEPjtCsVHch/vcXQ3lFLfdkmMAnQCkRtJnrVbHM4yjSx5QD6lmQcrD7RlliYPozCLw31lgG3SP/Dw2shzVDJdg==","shasum":"ce7243186e9a2545631cd395860ff23ec863f9ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0.tgz","fileCount":460,"unpackedSize":1006643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5QLCRA9TVsSAnZWagAAO2QP/isDmbCIztSaUNHtlf/T\nTFk5VOdAFxh4t5WUuOCDq+Y5zjN0kXH0mAr0jbCHLg1V5m68HfxQ4I//7qA1\nD994rDMN6E9kj6x+zUDExHIhjOVuNX/PkqO3sZ1m7TeoVczbidCJr22wz0MB\nwOjoTPDol8mTCzVmW/tiJxPUnUCSo/F6NtyQjTKzn+CYaLhmt73VLC7ZBn0w\n2oOtjFjMAI7g1osXnOVXih37QXOIr3ShrHqslbSYmhN1SzGjI6+mMbp4nxP3\nsv2GCXsD7Ukge8bOgBmsM8llfAEpYLjfdfO0jRaqUlc8gYUUZ4hbN1dBqHEE\nU1fgOs+ZExAzC8o3iGFijH7/iIZKEnqn9hamZrk+mLe9RlZdMiThK23vqGEm\nzjwwAmOZerpvHHlqnz+gEsFiz5/zPZjj1Ut4ZVYfIRed3uaugJYSivjfoDfZ\nvZ3CZijG+4CF28/+k4xDlZuWAJgAN2cJxLgiTj6YkrZ3ARkt/CPq6MGbNLPq\n9GDNQp96WovsTYvTuYcoonG/wg2OuE4rQ2edzeHyH1Xz3o/xPKto8q2+p+Jj\nGo6KzK8gjuqWfrKB5Znh7JOcpk3/N/5M1l0cIGLrNRaKoP6HZt8w2WVkKGOS\nMxGF2UHs10I5YG1ReLPPij6IuBOmos9uuQpyjlK2JnTJJgDlNYYrooC6dB0v\nvVT3\r\n=DOPF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiU86zVH9M6I+RFpwm3+cPzhiTSLb+jtinV42RqJAEIQIhAPmzGEpcWlJvr9hEaa1Oma3R0MfWEVbwTmKlNr7IoXq3"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0_1623168011213_0.10091287653830827"},"_hasShrinkwrap":false},"1.18.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0":{"name":"@sberdevices/plasma-ui","version":"1.18.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8374a97f91e5f2acc743445f5a46468eba0aa2ba","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5pCCHM5/8u4YLXI0eHu3V9ob92/ec0lVlgqPd6EFo5bsO9mcn0ULsIjhNiFZCZ8SQc5EknNn1wMFKshGYxvDAg==","shasum":"23d6ea24819b49543bd4693060efad7ef38a822e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0.tgz","fileCount":460,"unpackedSize":1006643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5V5CRA9TVsSAnZWagAAiuoQAJxtNC1rN+vkUtKBYXak\nfIofaBeQdnszQ+GkMdF4TMDAo3sQT1RVf/oUkMJqIxsTwjHQ4p/eDULNRdHr\n3wIsje212b6bP0Vbc5t6mI+q9zp71zVdMMxCPzLK1Y/gJZ2+4ZbnrpwWU2rf\nBTr7hWuaQG6asWby1amt+Oe2ACRyrNeAm99LEVZ6sK0JQX30yc2Wn7eKVFr8\ncASVYk93whZLHlHeGIJ2qbS6qY4ASK7FbwEiYKcnYsp9TJM3ffeGA2B2ZtLr\nEr4AJaCTW7hOX4ttQd/kDNC9Am0E3dLTxrfyCT/JRsznLL7/sFzIttjt/jh2\nDGoAVsKafxcPtT+ixwynvPKhf8AWbEQwjt7KLCufmtsbR0lendz1EbKnqnXe\nWsvFUly2L+CVBIarXIWXjqD3rfFeKnRGOtre/F2E5kfX/jTZxYGjVzmKp/UL\nAPDbE15rVm+SDwDbIVKkv6zY9WnfrXWNDZcq6mqMPHvbxOryFTDmq7v2LNP/\nxCfuaVpBch3AfIDfoxaNwxdJCRV4w/Mdpe0SJdyLZsgXWrj7ZB2bDnQVbDfr\nd2JE4x2w0EeB36MTiGCfhI1q9Vp2t0U7qzYxmM06yARvUR9ZIHd+wT12r7pX\nTkEa7C/HnyAvLN0vTUbK1WJSPhtBb+puOAM6e1YjArpQBrtyw/1tcCoD5h1c\npZZL\r\n=EUaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNCSbstQblkEQS2KUcOZIwm/DWhqHQh9hGmtJ57D/EfAiB6gVgQX/gkT+zBrineMc6ibqno3dgC87dV2XaVlKNGsw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0_1623168377688_0.13848690618034443"},"_hasShrinkwrap":false},"1.18.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0":{"name":"@sberdevices/plasma-ui","version":"1.18.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f5cf3c7c17067c30ac39207fb7d78534b756d444","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-n5BKeEW10xtMq1w3BEgPRRA/3gnUBuXaloF41WOCmnv4mn6oypiK+ipUGVNXRT9fPtItfwdUvW1PKcoAL7W3DQ==","shasum":"dae7a081ecd21091716f1fde31203271ec84216d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0.tgz","fileCount":460,"unpackedSize":1005553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwGE+CRA9TVsSAnZWagAAzwIP/igspAObYIYA/FsjAMTI\nGeZ3rmhJZxK6/MkYWjnMHAmu1sgopWo05V/+XEhJURMgUBkiMBEWbY0fRh1h\nYgTu3szUOvyf+Wns2Bzdis/MB2Bv8/HPX9lqueateB0sobPPcynAzOOK938e\ns+TtgcN1tvWa07gSPuxUn2S3DM2Xmvc8il3so+/RP6MsWcQoR4N17ZKlsMUP\nFF6++BBInpks6x+m2bQVbALRN91t7+qncZht/WoE85q/jtmwSYCd8r4WNjOP\nUcNjjL4wZiwfDi5j077nMmuLbZwnfm9t4Sf4gsFi7DEBL4zkr4PYiP9FbxKf\nHxrdF4o6kpWp6huk2i4rbrsdpsd6mP7AzAcoZ0zhQDokeKfWm6uFrYZhYULu\nA7idU09qImWj+KluKBSpce81bXn3v2yJFygQOJi0b9Nf9cZ4fqA+HOqpV4M2\ndd6dTboUC6en2gXg3Gqptd1FiwJ3u7RL58+o/58mVe2dVlNnQgJg+lC+PVFE\nti9CRMJcrXrmIKGrCpiqcWTuvFbW/58ik0KDAam04J5wKo2u9uc3rfa0uXyt\nVJXqSUDL+sCK8gyGnaSWfCZWzsF1JrBPDdp36bpMRrqtxY2iI9XsFtw03xb/\nPegWCUUPxBrzer15oiFXH9xOEwXKtT1+dRbDaON4VnTRskmjcSMkSbmv2z7H\nUcGv\r\n=2E17\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnwEiEiQMKN2y+iX7hGcDkwBy4hZkFC6SaTKrMVQ7JJAiB2rXFSSIDX5hEUfheTyuPj6CyX41r0ft31TLmaaQ97SA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0_1623220542586_0.32913034934264096"},"_hasShrinkwrap":false},"1.18.1":{"name":"@sberdevices/plasma-ui","version":"1.18.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.15.1","@sberdevices/plasma-tokens":"1.5.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cdce52cfd6dc735afe98523a014f1841f3cf827e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.18.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-m1h2tilktuY9mrnsAF1/5AWjipVRl4RBTJeINR4kmQCkElH1lvedQaGMlgfEMx60p/YCHcL7TYCOFYMl79cgMQ==","shasum":"07540c647e26a5a95d7fb034754f9ef094d8e421","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.18.1.tgz","fileCount":460,"unpackedSize":1005621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwGYrCRA9TVsSAnZWagAA+M8P/1c4ogvFRiSBysuDTqUk\nM+LuSx03Ex6w4dbT9baV8LG5FM/sKr+1JsPyWdtnB9cpV822/zdTJ+aysOLe\nNjX1zdLXdpHc8cTclTH3UPp0t0cX6mdPr4OWirqwkjy9HRHq/r7ieeRoSEFP\nK3orY1V73zrErQ5tOTT6bZlKQzcc+XHT1EfAs3uH74OYq/8N+9GJpfXdxwxG\n+uGDCkV/G0+fgvvhkS/whbuMZAAH7YFCahlEl2+H3yMyrt/ylD15pPbpM+6V\nfEJzKwcuI4VQ7x4ZFRdiBgj+xXJ2rMMxYjvuTT1JRkGLe1fYSe+z3hZqI8M7\nUJF1ETtplTe9Mqc6FA1AOQ1phDEaLYMRDx4XrUrYu2iReTLXQHDSS5yu3wHX\nGkw2iKjaOPRXTXg6X48rPDa9rsJ9KF0ns76GEPwZghVPaJhTuyYnnwWzKI27\n1KjFKqh/eCtRn9EyR1Vdl94xckaZrTeBkJFOiPhGonmVncY3IuF5dkW0FYvO\ncOp/Hlq4HCzLP81RKj0NRcx/flBzRIi60AaQmyCr6FY88Pv5HJv6DcbSaJ9D\nK7E1/siffxY+RrnFs0uZE6h6Kzfp3xKPXQrrq0vCWKTM+b6G2CysTINNfID9\nZXG9SCqPF1yT6KTD2n6DgECyejOQNtYeYwOU6cIkAuoac0DX0ho5ZCwwthwa\ntbyD\r\n=T8Ty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1N7ImSO5ZE3DJ23klZ78tB+nN3MglwPC7c2K0g1SjkwIhAK1UaEvCqiv3rSfDp3bEmr/vHmGnJtdz0iEgp4LlhJoZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.18.1_1623221803580_0.6920167059652913"},"_hasShrinkwrap":false},"1.19.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ef407160949cb5beac59965dc385cc6a72ba0deb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-uSPpeG6vbsDTo/BUHIsTfUQ/ogpnSGuzqUJ0d24I9wWmJngUipRyGTz9cCOEBvWdyp8KrRBgOUIWr0rcIXmnWA==","shasum":"f2d01eefa7cea52e77a2218ba8207644a61d4fec","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0.tgz","fileCount":460,"unpackedSize":1005783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwHxlCRA9TVsSAnZWagAADY8P/1e5+uOC9S9WKoNkM8bn\nqAiaundHVDfeGDe55LfeTILQK9nOk0DzRCFvndijYoB3ukjmSXhXvi3W1sZ+\nzF4xw7c/Ie7uY5oJWp0MCmezRyr1Toc/TwEWLUPWFwfTlZmJTOmN4oYt89kK\nlLpaUBuxL6cnqLDfT35nLTA0zjYr9YMRFsiEMUX9268RWgrCtfHGEwACx1Mn\nS0ujjj/jDITtqBaZTHSEZD+smC5HD1eLWMnJoSLjSQqYg8uEdgJxnDlzkcok\n1Kpid45NcAae8l7CGnKwUdl3fZ2MFoJmJSIbtw7qkd4nB3sGBnuBQhQKTdGl\n8Ckmj/c9gKCT5u3igVlyeTlDTaY1vjs4Hu+Sh30EPGyP/egjx5qGDnx1hzkL\nAeR23c4v6pEM8PnOEVwfkm91iaOSxA6uR7eGNcVGhfW4UMEvnJ3r/VJ/R2Qe\nAPXXwU4fOj4RsDWFI4NwPAvo87axPs3h73rubyDwIYjCyKms7yQdrgAUc5WM\n1GqWKIAON8jzEqWGAvY0XTnVI4q1GdSQmftjwE5bRtR2gnFwk2pTgY2w3ail\n4hkIoNZwLAC3YJo63/jaIlUt5wyfRaCmDQ3hlrqk5b1S+zwEI4RuY2sXtw+q\nIlJQuWrimuCfux9wFDUliHjXcht/7WZOeDGpaurIw88nY6PYdEVbn7H/UKso\nyUPh\r\n=C4dD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZhXu0HpzSBFvHieHr9cB8NWWSHRd6n6ZY2vPBAxdbJAiEAiUegFUCkjgzqjPzqR2lT//++8h9bFdApGrD43g2VKPw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0_1623227493177_0.8388647188435343"},"_hasShrinkwrap":false},"1.19.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","@sberdevices/plasma-tokens":"1.6.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b23c9912d051d0e5d25640c461627c7eaddfb78a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-8gVBVLxPXdMavVU1q7z5PIW9a0sncceTtHKIDi3S1vUxNSBXCqWqAo+EhFLwN2FWXMrkpURa/PHGpLVvIsqEXA==","shasum":"a1e6b3ee021cb6562c434f95e07117b390e205fc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0.tgz","fileCount":460,"unpackedSize":1005783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwIaNCRA9TVsSAnZWagAAEIQP/RWi9/MObLWGQXQY89Gq\nJyOqh2aDFMdKD/gLgScF2HUFPBcWgt9crh0ft/lLYhmN81CbajnoHVqjX2lF\nJCBbKxC9m0/SJv3dkEVit7j/2ylpE0uysK/uUpIkWao96QdL7R2bjbEx5i0c\nRcCA1dX0kLG6b5vF4b0tgcCmXFpYt/rZ5MDFxtsDpDkn9cxmc6F/aZmFiMQj\nrpZVqJpIelLH1ZPIOdhcYDTmS++8jDwO8iTY6Bw/37Wyd3X65YMHyHW89vgP\nt9/OXw3aP3p3RmZM/BKvM+25H20Lmzcc5UBVH8OruPxNLcQOHn6y1CfLCBQU\n2clJ1ErqrUCJKmsx0N5oq2B7+QvNB1LhMrobwSme45CSB+7Q3DGbV8koFIfG\n7zDB/wesX+vK4EQ76bzFK6og6AsoE2phEGsZXCbcOaNoEfJ8foVrImO4umbK\nrVUVoxhGN2dVJjcau387OqNaZncSB+1E0QSsUx2aLJGewZQW+tHdlFhAr/+e\nB5b4KyP3UEZTD4pJGqYVq+TkseU+6KYRVRGoV71RUzWTe4N39YDQRKBWHMPf\na16vmTxweteJFikvpKe8PadsFYMUfH72UjgYievw9O+uKWDMVk0/BySmW3q8\nSZbvA1eyZx3+wfGaLLhm07bE+gR/qLjz6bBDpxBF/KZzsehwyWKVI4mCfhxc\nIR0T\r\n=3enw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCafGN5KV+3RxSP0SWGdslw8Le2m9Y3QUwT/4igEu4vAIgWY76M2nX4u3qZk8JxgHmj2Hg5LnbAwusRvQOeGWsDUQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0_1623230093636_0.873852731723229"},"_hasShrinkwrap":false},"1.19.0":{"name":"@sberdevices/plasma-ui","version":"1.19.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0","@sberdevices/plasma-tokens":"1.6.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ba08a71be31aefb075c01acebd951eecaa39c2d1","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-eZgftPwGRmqnC2ZSDBuOoAeCrGOe195S+ljfVo+z2FuHdrJ2MijvEzzF7wzELYbx3jKP6e+L0loEQWTsw7NKVw==","shasum":"597fd8ea6b71b67be73f8a0c205d116f015b5dfd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.0.tgz","fileCount":460,"unpackedSize":1005851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwIqoCRA9TVsSAnZWagAAOvgP/0oAwKqBmsOFFfo3JMzE\nOvSuWJGRKdWdkIymNe2lCNCy9wqCTGVbcNCdSCEnqbOZm2HuevWDI4LtYgm4\nzxv9ul0nvOPwk97VAM0zoSRi6srxBA092Q7whqQtxkTe0E/puDNpqFU+deyo\na7/FIss3a8RiX90nLxMtPw8k5KrFDE2sQF6vr/yBvSsuuJcyDAelkgPnR+BV\nc3pu1ja1N216nlg41SGGQN5Gh0VwNOmefLve0dPJrFWWhkeSaDSYxneyv0ds\n236hZMoH8lg9RkG0TJGJ1dW7vYykr4fZfEmfSmOZ7//MjgvLuCArsTEoGWn8\noHQZynuNriZHOBGeEaMhrxO+lhavdcwVxuFo9BfZOyzKEcl2sGF1jjzc8szM\n2LJDcftXAv33bgcY6xDJdidGRxBrqjGGNVNrWt1F5CaNZ7HveJQ33STqQYoW\nArgCKWqTcdnx1y6rOM2vG/DZF35J3brGYbs9K1oRYKqRmR3GkCln8tY3RU0y\nfKXrLdt9sourgK0xV+AcEt7ivEf7fyo57WCUSKmZpd1RnFA/DdFSg/EGzZ2w\nh1B8s3XlPUxm5Fm+UQ8Qa/n9368lZ8E2zB9pSM/Q95W26I9KwIU/0VbLV8x5\ng7XMd32Co/vt2FzhoX0kS6cJM1H3AQBNj50T0aist5GcnfBQgCr0yQ4HEPfq\nYdpb\r\n=kknN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCloK9MFE7ODTTgoEfRt+EsxCZWio3LKpcfAxB6eFjRKAIgbS3GV4fnDHEdvK9OKJGW0AJuuFKftzcJaTCbXs63acY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.0_1623231143894_0.69572650121917"},"_hasShrinkwrap":false},"1.20.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c18aca7d5ecb8881f355907ea0af891d14f00be7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-voy1llky/zddMgOzEC/spcbSjOwmPoU9y5R31e3qGaFzVvNfSd4nf/Hl+NQTSzp3ZpSH/KZoadUhAysQJVpHHw==","shasum":"a570c12c11f9454355819aeb38b97ea67d3077ae","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwNRfCRA9TVsSAnZWagAAvwwP/0NujZ9T0rkG5XTL7+rf\n/FMrKew7+sQ6sv9ES2bse4erezlPpUHb8UnFDNX6IxJL6aPiToNKjN6gpe26\nlDaJ5ztoMOKvF7wZvZCuVka4Zer3mfRodTF3ACmucZhRiS/2dGMOSSVX1u8C\n8XKWMSRVFUImvWQ6HodSR7vzuMN3Yk0sLNi8R9Igl65uCk/mmpMDxBlcfhnj\nYxn+hkEmsH9p4BfE+AWyZU6Md9lOwkFZ+/nX4dnAZoQbiT4r7f6rBpnpeqFD\nGANEnDEBI/5kNgX1hnGKvXfm0BSb7MDv5ZeEdoYabjfIhjdl8iP8l0fq2sAM\nAxz6OU1U4X3Ow2e16khaVGxTjR4gTny1sM9urDSnMka1eFa7iLPPZnnPUXE+\n0JLM0iE2dxUpPF8iJLd+YWPIckVaRyTetm8awam3usaxo4cvVXLXrNwrT3N2\npcxBkVTBKecVic9urR3a06OOD+MCa9yflA5ofIhIKsFSLzRIt/cf4Vm8lUaU\n8GmlBdSEwJthTygkBilwL6wcZD7KAM4b9itiaxq9GGcbXfCZDGlmGK67/eov\ns8fvs54C//zlFgRX11spLDMhzh+A6+M+tmRv2mTVJ6qatv3atyPCZf0TFr4t\nue3Qzl76ShXawE3Qmsb+bR8djaahYCn6gMTT/AkE8D880fQo9aavB+i/EhF5\n1+ue\r\n=Pvrr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/Q0GOokZc3TzWkdzlBXrWozvLa/26Dj84jHjSl4WfCwIhAMNl1Rb3/5LjTAoPPv2l0ulNVnvdcjX3Tp/EEyIdnH/5"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0_1623250015268_0.5488228854728661"},"_hasShrinkwrap":false},"1.20.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"27e31c2796fa918820eb8a9d1fd384addf7d62fd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-XmBWNIKN3R32xbcRep64dF4MQcyqlwICV8mIOS/uO6Zo8ZCUlKzO4UFA2lYFQeqeHK5ks11rRoiJ6q2HYkeS9A==","shasum":"568417f723e1546dd69ec649480b94325f6e4d71","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwNzCCRA9TVsSAnZWagAAqpwP/AsAo3coxI7rxrgpHN3z\nP8ZFRYTJhmK5bh5DbDoLlpew9/8gYfnWRdYKpsV5VDr7iHLq8lL9wO4M5Wrm\nchMXSQ2vuf9l+ocwxgL10eaP1USTBMiAQ52zA5xKdY202IxdoyR8xBwz+H9R\n5Yn9jliW15lYxNnYt8KErlFptEc4udn/Ne6mZOSAptVPCHCjvn3fOGAzGCXQ\nspMzFOrsHkxKXDv0xvMmtunzGevumbdF/dBQsEJBFWbJ6twhjkKcteONa8YK\nMNczvtCxtcFS31dGsLZz4b3TE/wC3BHzK7VQ/fqdPmlUsQKI/AJ3Lxoiyilk\nYkuMftCBwjBlq1X5GqUmor9t/FcuFFZtByZxAacB7c2XjLnmi6m00/Q1EaA5\nxIHmp2rLKxqwMx4fypLrwe5vpzYIC+H2kgmguID92F9eRzXEZ5FO/VWxTc8S\ngZKEt0KE42ntA5Y50wJLU/TICFAQZqGPxC4V9XrTxNBSiCyo74pLFz5lc0QB\nsDrAqobd2pwEN49XJTiUpMSUREfchwrMOCbxcI6GMfweTmcyJKn0m8uZ5Syf\nKMmNAL+nZbUlvlhfK1G4/ADbZUa4gkIzI1XdVbjhSt4m3I8GBR8j0wqZ7eT5\nB6GAi2IM6ijwxtbhvxLuhWgRKP6Z9BKZiAAcdgXH9rgTS7tnFbc30hW19Zxw\nTmZv\r\n=qXIT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRiSK7GW8YPi8ZmDHmd2qz6yZbkUU5u7arEnmtSjVixAiA6AwfLPaRIYENWL68mZ6/+r2OdJ1uCR53LEbVx0GY02g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0_1623252162100_0.5933160649172986"},"_hasShrinkwrap":false},"1.20.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"581160f7c98bb9497c0df77ba34399bde5e68173","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-9bQrmOMN6A9RK17Drqa/rMji7h666ZRlQyU3uTqADoIBAJs7pR0pJ8mE2gib7kc1Cd6/RYm2HJxOudvSwx91bQ==","shasum":"48ac94bbc29d5a98ead7926412f2169e9df9c9b1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwdf5CRA9TVsSAnZWagAAn6sP+QBuDlRcpIoW4ohpzPf6\njM/AmEPUzSLNHpmtTjeVSPvKHSn1syWQqw4CoaZhDxiUM/ZVvl88+mz1t1fp\nclj5JYHQXPjGRFJ+M9HAXSK1e/a6/8xuGH7gAw6pAqZ7NK89y6TICl2uY921\no6nhw5YxB6JpnjhUr7Tk2fXnBlq4YexYsgphaxgtDCIc4Pfp5u9e8ju9PeX9\nf0lwdMOR2sJtsJr2+9ed5MiNRz4JVjtzPR4s0ZWQHmTNrP0N+axxK8Ny3KBq\nQLeeQ+CWn7DnsDCgGB3GOe0wJf+ZHXWdpJfq6Zf8bvouVq0HSUORknGa4oYu\no+8ll0JS9mEX8EXnMwz4aV2eFkpX8GmDPAjIrkn4r56tUsGuMiuDzLwGvDmw\n8LvPnhf5lbbeux/uyvEgVxLi4GPpkV1k+fj3Xv5GPiW/C4BdCqYZ7Eb+Wy7f\nFoTqG1C+9qmWq7zcQ8xSyOmDi5Gl69HHcux3cuUs+RQPsNL4Toc00ll9YIv3\nwUJZm3EqUB9iTTRpJCte39A/YTcsq/LjfdjNiH/aSIyHJq1aCs0O0BV7OsEu\nS+CwcIiTeqYmgVzZm0f4k06W3o4bqIz/Op6ZMykO4/aTrLRWiad2bCKBwy6Q\nd0u5DsyYd+XmduLJJPGgYe4aSfms3TFQX6k9T7+JzBtMM2vzvtOkY/Jfleor\n7+oa\r\n=GuA/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFiz1d3DAgbHjCWbwtbdMmZq7cvPoiLZ+5FmUBS2gkq7AiEAuCzQyiPGk5YK4vOR8sASF1/E1y/5aHbJrNW/DPjz704="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0_1623316473671_0.8580755318918807"},"_hasShrinkwrap":false},"1.20.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ASmWywaTVtSmvAj73kuD4JfOM8qOgjRm+iepZ8mODxROi3RPy5D4xyC6tRAjfP2+FotihG1xGz7gzSaLpyHWBA==","shasum":"33b10e279e64cb616a970a22fac3fed9da3d4c9b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwdzBCRA9TVsSAnZWagAA/CgP/iIcuiuN/Gx/p4oeEIwT\npkULe1aRpPiLvXMpWHec2TT85J91gR/eZYeypaj2+ikb9jJFGK50sP3bahcO\nTmRhe6yfjxz4BH2xsKU/bXT7VHjYIZW6A+4ns4EfEubd82eWeF6+yU33tSIx\n4UuCPeVyTJNsWUPW8c2kwJ9oydNRs4DP+yLO6LBlUJTP8jSQqdD0QdRWkP9d\n1P6/CygAnWvYjVgucuN6a6lP/QZD60ViwtXeBhOOnkGD2ab+Gdwl+M+n5gUN\nqg3YiElDjl7aEE0VnvVrMTeaghFhhgbK4iedTnv0OZ3S2NyVQGOM52pvArAf\nRgXJqMQcRYVEcCAT7NM58wcD8Hp9GFEygLP+fWALPV7eEzDvTFAEZSPqg60j\n9OdVeLPYmStUXDiquuOerpFTf5vn0mJs7E+z2FPqJEkmfS+5f/DSixJfXTkm\nr0F+7l7m6xt0jt/TUGpXFHQ22Z2btHpj+woscv6ufW/komXgklOVtE8Vrs3j\nqeXjeae53ns3p7Wf+XHnb860Oio+WDA5y0hMpB2J2fKTUdH3TBoMH22AlW4F\nudwGbmOCwetUbKhEOo90BNNJ1g7LwWf0yJHWNkIiUhJveKQSQra8/pT/oqXV\nIvfWX/iGd+G3NCSh2QbZVBYIOlWZXWBeAuy8+foeM1+HjpHqMzxu0SzVOU3z\nDp8l\r\n=In2I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTFecKCuHOu9OYx2+GIR1CxbXYGx9TGhzfGyOUVBgvlQIhAJ0q43Uf5G5zJIFl0oTx/BcAWCZpPCySTshQFgOXB3fQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0_1623317697172_0.41107322120931244"},"_hasShrinkwrap":false},"1.20.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"020f8726fee86ba4688f86088371c1dca27fba19","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-NejtBzTCIFashZ+FfBJNVZ6yoxDkrYZSxEIhqq5wYY69u2UDWd7fPpadt+aSqDbFI++Z23A6ToRYC3ZJGqdylQ==","shasum":"c93213ed9bb899ced6fa1a09414e40f67e2fda24","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgweOnCRA9TVsSAnZWagAA4agP/0laeN/qXHmrBCgxIhUm\nI4SHUyes7BcMeMl4WlrNRJoUrJY85XoRQlnnLvxkzKMG7xWqSJRJho03X/n7\nV0F3X/PRXTCPqUhFHxZxyoVfBm6vSIEQM0s4tDHGFalQ7/ncGETBG8c957bE\nrE7IYsU0lLcQkiNYgNe4PtG7DMXNmvW7QF79FsOFYvvKkEdwygFWbIbKhpqh\n1zoG+iu3tOrR4U16zL22dPRO+NX/dUc5J8v2McbdcePTJ5kGs6VrSQ67J2jk\nkM53sauMcOBsVrKQSJ7Jb5fsxN8mHFe23sGSdbqnYR7lrHHsVlthfzD0h62v\nxdRKw+8p5cJmbUCbxI3ads4wyoLhh3mOZkeHVp6A5MpGfXuWrj+6LSETqzuz\nr8POwH8yiRfn5S6pX3m8BZSmD9swbYmqGcV7+8RCBaPshxplnY1xSQx0Er8D\njwM0iWVutatY7SJsyCi1e98obgB7THIwFLMvgbAH9dPP045bpFGsSd/HNRkY\nsjYUJuSUhDaa2I3pw804teo5jpkB/fWlqvETbf/hfosh976bsm4XSVwmoF9w\nUppnx4ODtHsHdcGcoHX9SAOu+XchnPNg+1n99otkDeY77L70OGEt9MF6Ls9V\ncwMk/38a/6GXVKD+OCCnq2XAip4pUtm6qR+2JYDbKruo43c0jnuFaeS5Y4O/\n6PUy\r\n=HpYa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7CZwfZnUsEZAxw+EwYRZsCEg+8RD39SmXxhRWdfeQSgIgVgAnR7x2XSaIFlAT6WfwesIJwoeHR1GVjFhlGcoTXUc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0_1623319463463_0.09560763392818483"},"_hasShrinkwrap":false},"1.20.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f64f661c1cd7be2304269822c7534079a2e50252","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ejPlenO5pAISSLRXIZK64MQhVkMBaqFKYNHuoxlB57ydfqlJ72BmmuR0qWMpTzHlGZ4ZXk63fhSsYqKRJS0IYA==","shasum":"be1d82367b845cff57b402182750e354631a6d50","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwfZKCRA9TVsSAnZWagAAC4MP/3jzeOLCxPkgk/q5MgHb\nxamQORQ7dVeW+/rtc6yFrHsEhUWIexf38zFCev4pzIn1h/dc+Gpr2wUvwChV\n4z53eapkCkMArQ/Fi+tDjf7My+ij69E2VbvyYhWGFu8M+0NxqJs4NqXuOVDQ\n+Zp2fZ3h/lQ5ygKJDFtFfNhtmeWMEZHVHscWJEUZq0KWsqi6LnRxwWRghqKb\nrxc8uNK92mHJbjDaEQvV/o9012JNBio33iH0985pJDbKveaIcPS4hwz0RlVD\n/vUh7g8CSsm7iRa5n9m4F6DOnDhhng9qSIjGRUihku71lTzojh1kBsNm+Qcp\nzGb1QvBSpOaFRkS8bsNOv/BpYPfWlbDiUQHzsyOstrej7T1GQjvkumZ+aI38\nmrY83PE2pC1N8TUQKm6mBgokcj1Q9DcpzgYN1jGtYfTjwa8LY0bT3HyUr9sC\nHIDZ5ALd3BHOLVMIN3qeo/e45nX7yOjvXOjjNsuVImxcU9RTdoY9BDbrDuAP\nD83N5FWMGfpBDcj6R/m8JRXgSZ8oe3VWxYHH7+NNkdT4PcehhylgkKs0waSn\n/KDF7VFCoZv0OZ05c9io2it/LzKYP4zkrV/5qqTVDUt6DOCvjSUmPtfQFxnc\nQKZ0VW9662c76BeURnp0NqHqxG7r4KxJ25RDQKWTnR+lPfXUzsAIrNhICT7o\nSqEj\r\n=4hBm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbpHfNj+A3Vbf4IO3scSvNcFou7pFwP4jK4NjR++L9mAIhAPLOH6OfgRAVDlUzLhMzRyzD7lOB6nZ7t03BdrtAxzU8"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0_1623324233914_0.011892088137105628"},"_hasShrinkwrap":false},"1.20.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"637643c6b58eea8f13b814f613632fbe70ae7aa4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-W9W1sUhNWTovpTY2dYd40B1ndgFLJIjWmM45ERE8OHPA5Ue6mA7WKSofRCE6r+MxWx7ZLOkHRdLpuTgk6oENMw==","shasum":"ebeb7c9408153457e17e0db251dcd9295421d641","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwgT2CRA9TVsSAnZWagAADukP/AucODroltTSXIVYcWvp\nuyNW6t5ifZKDdXal/9bNjX4NE8/+cdlnDUf63+SO2kTIJ+e5W0VnyXEZZMUE\nWqmeQZOQVmVI5iRmWgQMYKkhnNJTTwehBbLO53TpKz5xHY4V6CU+1a3ZKjKw\nM+FBiThR5vVaXQeZ2UzE96p2pu5Aj9Zl/LlUZjHIdC02jFys3sYHWeB/LB6h\nPcXIJ0IKG2kbfBEnHx+3iTd9XeldNN3o02H+rokoBxJEJkGL+4jV/SIxjwkE\nokByjdeCvmGwPfJzOFZUGYDqBx/ljkSWVsbTkFs0kGarvp9HFhQrIwlDZvxf\nwMT2Z/SkGXHzmN/4CFTfIJomBAEnB7ZLpfB+mZebMTarwVmzMt/EH6PMp0Vu\nUEe/tdWOKHugvziC1IPflBfiiRb0Kbi897Sptp8XsJJLl3kjdzQSl1vJ9TAn\ngfeZ3GpzqmkLMuPA1LwcvRW1ITonqvDXH7tDhRCudjOm9zDrUmOh6HlvWxW/\nGYg4DYrYDUEzU+FwyVxei9VlWbiuX2tcF+isVhg3xDXSMFlACdzmE6sGv822\n0Pwcgp1Oma6lWSOwJ9IykZMjx6pupVRJ018DR15ztcJ43p/Aw00xThcas/ve\naf5iSK1tEXP02CijvOYN+qWnjo5/qAuKFpI8rhsKGnqdphhJQ81KaBBPia2f\ncjt/\r\n=GPKB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBAV1GKkTWwO0us9cOxnk17eoELAncicXwnho1wPKx+uAiEA2dEqYPkJPqgGLuWf7bkKmOg7iTAbn69uwz6Lo8iJ70c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0_1623327990672_0.4507145296340369"},"_hasShrinkwrap":false},"1.20.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"112a15f547905ee8abcc5b007b0b30af3cb76459","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-bwFFNJ4+76HyrddazSwVxSLp7S9wmXozNNe6nKoL/85ndgrLnpBoYejooPjv+EjEesN7pMCG7oWGRgHORtS7+w==","shasum":"98402607c2e6d70c327895cfbd0bb7470381ba74","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0.tgz","fileCount":460,"unpackedSize":1007157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwg+ICRA9TVsSAnZWagAAWygP/ibGBsSwKf05KJWR6lG6\nRFIwsx+q4/h5Y/4P+fFyi+qjYxt2D2Pj5RSpHHlvMBvbI9fLwM7RvPfTlmxj\nwoM8uMiTi0kjkZs4jlDHp7Bk8l9J6c9sk6Qt9qwQrN24jPfXWH771p7dbUuo\nqyW9rZwg4TbMs7NdWjA1o2VIoWu6PYWNV7QW0ugiAX3eicru+lDve2Q6LxR6\n5K1yzhSP3jZnKE9tdbUnKKf92rmri82wFd+LlJ0GG0CZqDCUDz3aPVCwE+kO\nMripSWpHaIUDRdWLHe0VNgpNxHn9HlFvCegVYH237ArAAUnPYjLAMyVeeBDy\nhOKv9tIVrNX6U4c9YPxwxrXbDBoQgoH4b/FkCwiNIG0A+A54uZZ1SLxYFKSz\nkBWDOwx3L8dPyW4pSgg2UM+NA0aB88kTfiR+lxH7KOUk9jceISbZNH6JF1UQ\nWbGt9mPZCD3dkuVXmGiGWO9E5XxlQc6Oi4kD7D8WtWjgzJ7t7NPiVb1GnEGd\nvnvQRGcw2Hk1SKpF7LD2kTGBUp5mtnZUHW55q2+0roRhOhWvRVvBI5mXfnrc\n7bEuzvUlySNBlydhjZyRIVGSCaM+/aUlvxFsxf1r+vniQ7QbvHefOtg6iEAP\n94QG1wRr9aK4+XT26ERe4tfBzApFGSv2lQijq5JwvvYkNy/xtqPVDBsisi+J\n4L64\r\n=CyyN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB05vz6F4KWF9Ahgsyjm2GlX82Yd1C4+ALG4k9yuWPdTAiEA98AJkfHymAy9O/nG0Sxc/s00Zgdq0WaBOv6HZ3gJuW8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0_1623330695834_0.24908980959894866"},"_hasShrinkwrap":false},"1.19.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0":{"name":"@sberdevices/plasma-ui","version":"1.19.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0","@sberdevices/plasma-tokens":"1.6.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cd40b13060db7c26fb134ee575f5aa6326fe1686","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-KjPJaHYj5l/t7ZWTsG0qz5iRtm4Zim6ZY9qG36OOaTRb3oKAtRw86MmTedeWvG5L438cdgyjbegLrWsmxTkzNA==","shasum":"d31a9e578c6c78185ff38886d2ad6def5b32bbdc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0.tgz","fileCount":460,"unpackedSize":1006067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwz6WCRA9TVsSAnZWagAAJiIQAKKlSryeBOf4SJVThRdt\nD8/4yXtyh+r9JerYIjuPRKdGyfPIM55lbKoJlIVTJ0rgOVPFAA91glY7KKEY\n96AhOp7XkM/gWFNMhKiC8cGsjgUmOLiCJOBTMSOQ5hyE7GLwWZCm5yl7Qtqm\ntcBQ+PzPvUijrW1FxuIjl1YohqdovbmVw2byHgtC8LSLZeP4Be1xj+0XMynh\nwWSYv9OA7Qx6a2UoSl0sDvE2ylg9IYY5BEi6FoH+AaTEqdg2YG4Y7ANgxfKl\nj6e0+IIPSUWrpFnjsOk3WqvAy7DkhobfvtrLiq7yON0n638STZNBfm/mWvKY\nkTFuCSfG8g3QPe9yAeP8rP2E2clDGZHFjCs0mBiaiIbPJKSEKppGKVWuHwDv\nVbhc+5G2D0ffjyNB9sJmIOE0AO69fbtaBIcJTWT7Xei2tPO5j/fKDzyF0PeR\n3d65KuLzZdfaGyMzTyb2QcjrHYS3/+o5V/fNNBpPZiwRQSA+apQNZmdl+U6s\niHFpKjTx0JML152s2nLyOwbLPAVf4WlJjzzbZyzY27zdtcWV5zv8N2YIIdFB\n/+D+S79Npb+lKeAMpFYJedYeE4AjZx73YeTvVEPMMHF/T5XYgaxnQhcLxQnq\n89Gwc0bcAzPPDpjp8iRKcMmt8U0Hemta3aOTdm+hndNAs2FKbIN92nIXyPWT\nXdoy\r\n=qlmk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEswnwqjBzpFylyEgHNodyXxuD9XJ+nNmpBFuJIFDa1cAiEAhZ9oJU1rA4xvB3nFcwSIAFMPyvijOpZDzz2LL5MaayA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0_1623408277963_0.6294380969072471"},"_hasShrinkwrap":false},"1.19.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0":{"name":"@sberdevices/plasma-ui","version":"1.19.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0","@sberdevices/plasma-tokens":"1.6.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"73f888aa2f534f6b3c7533d430b475877b006191","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-xDifF8Qn8hcL/mi0oVrcl23j7/SkrdiMDsO7eKX/9oKMHZvKFGrnOaTMjF1PhxRs1UGTl512JYj+oSDZTlPWvg==","shasum":"239d4ddac23207b3df00a8df7cf04e2fd79fb3d2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0.tgz","fileCount":460,"unpackedSize":1006067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw12lCRA9TVsSAnZWagAAb68P/1Mwvi3vJJlhxVgucH8O\nkQhUDiFp+6ayNE7QtM1as70MIkxJ/DLqTPdapgfDtM01qjyKNsF2DlWpw9an\nu7M3PpJlF1BE1cNYHw/RoGIUSvX2X8j3yMQWEpcczjTd0sZsmgdQsavp3oaw\n+MTebTsJXGPN7sWAO1i/Le4kr9nlpcetc7MnrpgfzDnsP9WoaZIn4rirj+Kw\naozVJt0+vKHwCui3+Wr6jMOkdiqqhESUGN8hAYQ1cSOE6hO4wM9SFteJwH6/\nnGvWE6j2JkQzdNf5K6wXeF83CDvtXUJZ5nAHQGJkX4nxMYi2ymc06oMLen48\nhoP5LU1Gm0xEgqvMz7MRRkESd4gUuWcmrDJSQXlgGdWVWZFvs+9lQYEULC8I\nPvvPgO3WTwGokFDsi/roc7OlXcT3Kr5ogrGWZmStYb3P331EC4YkD35Dgs5X\nZODEh6/BiBgxS6LI8WeZvsJBLMdIsUkugbnqhdlDQ7P+prQBDNsIyeZrbCZu\nS8TMVB+esGwyT+J3YTuMJVMY43YuiM5qqc018A5mKa0iHRjLzPWhDgQ5bVmd\n50GGRIliAvPQEvYmYRfPbU7n4RzaWc24ujweLkjcHotagFCtBTAW0kkyaBZo\n2cIFpz0c37nLlGDmcZ45z1/fY58rCLwQNY/A3dgmt7QORLncQ/JfrG5N0HmE\n9jL5\r\n=eRKr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzGGrcLiKDgQpR2tReA4DqpLI/wLEld8YiBgvJroroPAiBISwA/SYdLY4Mpmu+Duw/JQ//z5H7B4naHnFpCdrMcLg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0_1623416228901_0.5274338351211763"},"_hasShrinkwrap":false},"1.20.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b124f65d97a4b5a5ca41b398a8745e2a49cbfae4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-aX2y0pzy+ss5C4LUwR0J7ixFYm44pTs/rN20w8GvJRasWIwI4T36CsdiXJAN3iDHZUB4nPuBfkmmXGrH6cu3UA==","shasum":"e1fd207491a555814a6612050e6cf10a4a98a27d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0.tgz","fileCount":456,"unpackedSize":974810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4R3CRA9TVsSAnZWagAAfgoP/RTEO5w5ExXAUdMUXr/i\nLVtwkUdB94gRpV+K0XaOQnHmjgeg5dqfcCQSJ8RBIjArrzIETtZAj5MoqQdq\nMdEueQAGi0oNO1sYGlc97DJJFWsZEvsb/7dpQiDaNZ6pmWrD4jDpSGb8ReG7\nCl9CQx+e3iB03gIh4uQkCLBoQYA2SHwFirlbAgn+qCBIELPxnmOana1Jo9E9\nEOgRPMSxU3i+7pQdDuqjSFys5RjgVYMnuVoNXqdL4wVI//6hXYkzi5xuyvOu\nQE/1fvKyyqOxLfhIgCU4m5ZdzVeEVQWVkyadjtf3a5MY57qy4UgXIldccv9+\nq1v1XvvpovU9F2abJz74RIOHufsPcBZINE0o59Ax8Q+ijod2FMqJPbz00owb\nxQKsm14LFpL3lijN9QbTjwsotjw+bLubyMZNoyiAXh34t8257n/Vezuq2xCf\nAvnxShahFVCdlCy41jlxqewbm8aIir4lYUqzD6FxoRucIC9QzTcFKVbozc6x\n6MSTkWt1uetIn6DkaZeL8iPBiIjAAeyTGTtjtUqU2200gGKr45dgvTakSDlt\ndyKfmbMEY9OTqw814+bOYyPFa/AAL8EuOnFWAg115aal+2/f5HaaMgIzh5uY\niXdyIPSuNbKpzjxxHXXs8nzkDcF7h16KWXkq0f2ysJ0CQzK7537ReXkiUHyo\n3AYg\r\n=q6xS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdhllHoPdHTnaYJTFwHXnlUhXsbWxDYqZ8ZYok3vs77QIga7K1GRcdkazHU/zJQYsIigZw5TygbuF/pL/AxYwntBM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0_1623426167374_0.43843964327114837"},"_hasShrinkwrap":false},"1.20.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a34f92e1506b0a014e6d40472baf1dd25b3ede94","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-urm7MF728sUXyJU25Qnmm3yh2OHVb05fry5V6pA2Cd9BWYO+ctlU01AS1yoofM+JTRJRe1WhZMRcM5SzTJriXA==","shasum":"2c767004d2a575b548cf7b55250edaf732f7a541","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0.tgz","fileCount":456,"unpackedSize":974479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx8pwCRA9TVsSAnZWagAAnM8P/ifu/8cSwyvkYFUdFeb0\nNikEomsqiyNirQZfnoVi3VkfXJyfELcV8hPDUAPGNO6ykZLli+juoChkmqKi\nqUL/ib66liRXQwjBLUo3J4lXQpeY4NwGR77TTGStVr6UaKXreXcLh8ocsZy7\nGCcEB+FbzUhThgegec44JndO08A73mv1tJV/w6t95NpkvbDbnjbEVA/w35Uo\nc4q58qt4KD0BpOmmmXeTjKYuhmIAqATNIT3KpL8rpBjYcotMGQ6lOmdsBfkJ\n3+ECjR+qNHFgeO922/2DIZY3mx7FeO/H9m/h6sd+I/EaJ8wg5vKz5XQrgkZ4\natzM7HMhjx5nZi3HopW5QfZI/hgt9ofwDfk9ex/1Rq9Kml9FY5zdYirSy5kx\n0jfi/2Q2mFJ6zxivNgIVAit6G8/rxIC0dVdlynr4awz5DVYjEiYUFluvkhhc\nX+9wxNVuNHxTwL1fy53BFAMhOeUo5bF+nzSNGNSdBNrF42o7vTQSl398hdoH\nCrd18Lkr3gaibu4dmVvWdMvBWc55zKRf3kTG2860NhWp6Okui9rEotYVvLZC\nVixiikDXYEfuQIH/OxeM6Q+mMoHd1ShvlQmIUjCRl1GGxs/vhQIh79C0PITQ\nuPHQqlhhKSGd6Rzs5VUc99PeeP6h9mbzZGrhC4S2IMF/0e9zypIzbG7oezg7\nPJKp\r\n=4ybw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI3O2hwLFZT284s3x5eSRw+h/27lfuqx4W3wh0BeKo2gIga9UsfdozmdBBaWN7LZ9ndHTQsOJzBxxRnnAFH5I3kgg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0_1623706224503_0.20530190026520034"},"_hasShrinkwrap":false},"1.20.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0","@sberdevices/plasma-tokens":"1.7.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-7gSuP/XApEg8VlmIeYvVZBHcf+Y2Lks87DS78KUNdxKI42Mk6zCPOQGM37P3487PWCTvJzppnnkwxlGCM5xJZQ==","shasum":"47a345f41ee2f5a4c3b5bf84fcbb0be1a0d955f5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0.tgz","fileCount":456,"unpackedSize":974479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyGVnCRA9TVsSAnZWagAA/EEP/2trs1IopEpNYbOlxMw/\nunuaKOzqRSPNv3Up4wZUC0gLynBWTzf2tSVG5MVtHYseK6GeNO5MhdDN8+ms\nQk8dv6zf643LdeoYRZyMYcvFkPTtMv3JTDe0ufv3SdUrBga2CI6j6zbNnbe0\nHNqT4qYPx57KBjhy3rcTyfKNZko+QgKs0SeNE3k8nZbhkGVJwlNh2wsW7FuG\nQ7i6EK1tbc5WjdQ+fiPMlp93UDqt8VT4wKDfiCKn2BJEF9UZwVJ2PsTrDrsl\n3fVPEf7OqxDhTnz7/8APJlbJXlhRcPYl5zrRkPueH7VDiV5evvjnjk599bd7\nPQdCSoxsN6oDgRIlTyIif/7KKhOvlibW15V8QvO60SRi5e1LpQ3t4eTZyp5U\nLqUoQsQ+3D/M4duqfkl9sfBO2ourqbMPh2b3qpW0eKLIWM6gm5dqPxH30yw4\nLDXVf/Pi2vA3SL5gApwtMSvlouyNISbo7sOns/DxaqIzELk6uoteIVARFt0Q\n2+49kWebY+8Lymza+Z7nTOHcmDCyveSpy3DcIMcp6cjfqeMZX6wbxC7NwNtC\n3XGeO0ZuQpMPNrgSJc5SCzaDR5Ceb45CPmVmR4sHAkpeOtuGL86wZDUhU21Q\nPMy0Ih1Sekt4tfP6LULopX++GYzyahR7S9CnLSqYLyj4eHybE39OxKyeusio\ne+IG\r\n=TtG7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvhGz1x9QMtWc21+uyF8lQ2TY1pDbPVInEJmH5VERAcQIgJOcDBata9LwnvWjjSP7WSCcAKGchkLy0objQ+oSCVUg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0_1623745895092_0.6769205235089766"},"_hasShrinkwrap":false},"1.20.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0","@sberdevices/plasma-tokens":"1.7.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"facf1d824d787c99d4f7536d7f98a5d2fd7a27db","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-FCDhL7HtiZBTFDLxT88ORxu2AOEKQjJIYZWpaXjYZ1mXl3VRljEmVL+Z4Sd8ln4v1i8PKKM2e3EJ+l/T2tQx+Q==","shasum":"6811eacd10a5807192b00652466870322e724bb0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0.tgz","fileCount":460,"unpackedSize":1005959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyJ1bCRA9TVsSAnZWagAAmxYP/iqWPnLIvMENUy1RU4XT\ngmsJ9NrsjcT7VjGvrCjGMdpHGsjsmykQhsluDErAA6JDMJhnjPt+/IKHub5+\njZpAX6Ig4yX4ppDRz8Zb8mTltTFJcLDijvvE/i6ehRh654hhenXUA9yC2Z3h\n7+R9dfhvVqy+Umwd67PXVKO8UY2/9AYL/laVtHGwG1uYd72PxrJdjlYfMCkP\ngeO8vSWQuk4X5aARROcGfL0nEVuUaiDvVcvf/AvXb8U1IS+S0YAuHHyE5zhD\nnpVpUpIlamdjFhG2SqlfrMpFyDncVJhT1QKi6Rc+4dLwCMWbS91439nXuua7\nh7IB06Mj5aLu4YO8bVN9JTT3tEMG3rKQohnxcqasEwK/AVbuiTigwItQ53Tb\nRneT2wtS38XdIFwUkGcdxUPoTjfqaYCcjEX5S2RQ+Evj5U59ugxQML5QYypC\nlcRZEfcVr2q28EZ+56P35OgR8jR5hf02blFHsmd5Gx4a/vVXD1KZ23uAroXQ\nrZaANQLeuKseIbDrY9BZ36N07+HdphotnMflQ6gbdfeEB4ydcI4kAqP83Eux\nKjmiXQWDpd64NmAmkNtecu2497x+5xLfT6Ir1aCH8LgqVlii+t8IwXiSph3J\ndfnJE6jppncGwKDs/MWYhrurn+ewLlHJW8RBlt6BGNy/ME6HFrEosNG/10V7\n8NwU\r\n=qKch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOGdFsyfXqYlhCF6bBjAhpQIUdU1Kc1I50koJtkSDsXAiEAhb8HDKvoot5/yvfIHL+mn6mF/G/X2FVr6BCzU+9jojo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0_1623760219016_0.6359226900305401"},"_hasShrinkwrap":false},"1.20.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0","@sberdevices/plasma-tokens":"1.7.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5d08e00bd41563d14d5c71c42f795af8dcec3f4d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-70umxcUiCvqjbIGDb5FmgVHZlDoYeimU4nWHyOA5ydBhIAypbenCMQ9xdh04/tlYJXOz+FEqsZJTwYy6lB1bnQ==","shasum":"8c8c2f76d8381d472bc246e5cf9698dec5c63e88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0.tgz","fileCount":460,"unpackedSize":1005959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyL+gCRA9TVsSAnZWagAAjq0QAIPw45aQapzyfiNJivxd\nq0rLjAJoK/yLbllXcU2/BlaPPyb2E8vh6IbpXbRFNgV8ZQFxKBxftQDUrFq3\nCYs6P+BuHfyCg9K241BHfIehXm+GKqlriggpC4lxKMdvtl8xjIJtSw3KCV0T\nQSPdTKCC9gbCY+D/2hFVH2K7qLED11h6UQ68rZjoRCNRdj6AXuZVH767D3jf\naLc5wGIrp7ZwyZmElUNrNwL0qIQ/DKiBQ2VgyIOw8AZiCJ1PoSrNetJVXusz\ntg8EFoxB9lajOS6pMLdHhtwGzrRnac0WoY2l022VR3Tz0pOYE4Lvy+nHW1KP\n9JR6OKe/U6xLSrwtTu62nHcZHkUSd1whSNTgrkSwIQx9Taj2DGj8280SNehz\nsadEpZoRmpevtYlB2vHk7CYXvm/onz0ET31vv20ebqxkdGpQhzDTey8JbnaD\ni7SO8N5eD0K7D2cjZ/P6Jm/BD/tb4ma9abjv9Y4jOdfXiEOzVuziUztdbl2L\nze+OCVeUja0X53zSwwzB0/HPHn+TmqnndanH37Xsqz/UEcaPWuy/qbVx5AY/\nWJ+otIhaAsDnF+aJE6ocqoLLP7ik/18Yt2og7HFJDz3P34OrviuNCXYfnAGN\nFJscLpZ+RdIHvboKmOTgAdUdVVw3JEUCTHCWcbi4y19bjTUPJnHnGG2wI7oj\nBllT\r\n=yXzO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFItcaY4BrxFEzFvCM4mI8HrMvhRdApWiaO4a/IM5IYPAiBrKHGOPyiAxXv0PErIULuj37q5zdVvNMyyXKtw+pd6hw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0_1623768991829_0.9122221532976715"},"_hasShrinkwrap":false},"1.20.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0","@sberdevices/plasma-tokens":"1.7.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"529bbab82df9dab80c4df912436f033beaae0d80","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-QX88GfPS0PLCvz8CEgEGMcGGUEvFC/rYjgcR8YpFUiPnJIM/KWTbbYEPm7YiUk6TCDimioP3USHolG2EKG7N/Q==","shasum":"71b764a25e8fc9a444de9f5aeaa3cf7c2ffdcafb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0.tgz","fileCount":460,"unpackedSize":1005959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyh/wCRA9TVsSAnZWagAAPPYP/jzsPS9IkSkOdiiL1YDX\n1Zy6/EHgsKnJ3nam7ebx64sfoYp3pbyHmw5Yes29c/JIRskyHZzk1oGAQbZU\nnNrajiNPnepIWsCVa02zobbt4hlah7ibRmcxUl2TOp7QF2LpOxFsQfsyRO75\nfDPmx30s9NCQWjalsLlb7lbys38QYJ6Zt1siKuLxi9W+/iIcQwPHNRZ/eF15\nwcvCZ3+kQdujZV5fK/6wR1aBKlDXiFNVS49g7Eif8zEmh1tE133tp0yICKzO\nhVcTKHaXcB0N+lS0MiLMk/ZzD/d/OHbFkG+bWkgrMW/NFadMUzfgCfd3adsZ\ngUEHtKKPot7WCxoHBzdegC1epT+kz2vwpj1iPQDYJm/vD/LnzwEIjPh82MiV\nCWiHGMisUVYB6vc9o6W/QefYEawQqQCCfpdZzHt+ldfXDiSZFEPq7x+YVQmT\novu9+6H2W4qLrEZ/Ej8TF+K219ovbh2KrlrxMzCdF4EHScnPsXtqs/xYjzPp\nu+A35wPVLTOhgsBUqAWD3FLyEP2vbtnlWc4vAtXrax/FfH25sYz7L0Nm6oiN\n2HKRVzG7kIzl2IU85XiLSgPCoTcRbH6WuqQytD67+D1ObmTHgX4FxJ+5zixl\n+nnyA+tkb7Bcf0ObqW++qiJWKnfl4Q0eqXS/OWujgC5WqXN++onWo2Q9MiKx\nnkFJ\r\n=TReL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpRuqu7vTpPYyn9h3IWl1G8YFUo/wNv2zVmhS5C3XO8wIgRWNUkbrJcpPWpRJfmIP/nwuIRap6tqWHwmOajHgR0TY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0_1623859184405_0.7764831988157299"},"_hasShrinkwrap":false},"1.20.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.0","@sberdevices/plasma-tokens":"1.7.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"73770fc8f9c019420f2ffbffa84d8224b5e754d2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-pNSpDZp53X1BtMu9mLPUTLMrZteDXw9KUUMA8odOpUXuJe6vrybdDAiMknEyFZ0AGf4s9dGD8LC3rMkRZ2Fncw==","shasum":"f12b079cd67203c65b4f4186896d0757a844205c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0.tgz","fileCount":460,"unpackedSize":1005959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyxNfCRA9TVsSAnZWagAApnYQAI9UZTJY97tL3m4RK0h6\nQpYQMOFNVgg/FaGWhsuLjdX9W36FcWnGopxhJDsmRHtceRILpcMAJ9J3mU/Y\nvEbyA5sDEjKwymvqyhtF+plwKH/4+X5iC5HHKr4Y2zkiTKHyKXB8yTgTRzC7\nDP+Xva6JHrQkptbfkn6fQI8DrI4xTnmS1WG1dhMmSi8w84hOjsvhMVEDIplB\nkIBp/XYAhQhFZXKbmuZuuzFfQn46oFfDE2mo4qEeQ6RkVPypj6aM/Aywfl3q\ne1/SpEkSClVQH2Tz1/w4BqoTbIP96z6hpYNTSG6ye52gumgnMLqn98nB5Y09\nWw8R/CTzH+hPTgu3gISJDL67GyZLLPkryfIt0r2xozkXMf7L+rCUXrWgMylQ\nIf24tXDiFBSBBZC2wkmUsSmeYqD+E/NxfGJ7mzAaIw7e3hJVHV0fHZwrR0qM\nRRQKyc7i1bFxLl7k/iNny3iJaqgZ26w1Qc4z8/xugN+wJSbDyDi346EDeZ/D\nTAXwtCurgaMGA+o1y0/Bc5rUYU2GQjSrYedgZY/S0arwM8pkReC1/4kNKK1L\nQwQXCHgjzjOVWNMKQaPo3ZJhBl9tOpPa8LJseHdvl8w7Le8CqUAshvcbffEC\nrsOndq+UzGnTpV4OnkiMzBhjW80KKpU8WNVaMCNS2UmWEUkJLqXXHb+hLLyd\n2Y9h\r\n=G5m9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7P86puaIfUJ+0+0HIzjGGi7epRE+527Jrs+b1jwbTqQIhALKaD4BEmzqBXxsGPL5B/bcCvL/9ldv1nrJ1F5izA1/M"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0_1623921502580_0.47344347884888593"},"_hasShrinkwrap":false},"1.19.1":{"name":"@sberdevices/plasma-ui","version":"1.19.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.16.1","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"336a351d928065490e2e87ee4bdcaeec8c7b7e0a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.19.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-gbFKX04L+Kiy431ovSm8YlPQT9Ix1u54/WhzoaWI0waNkHeZ0yxjWIDWta38qKxyODF2igxPHJA+xp/15gmt6Q==","shasum":"e2a765905ff8bc4bd2f4ae6d1f0e364c2a60cb05","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.19.1.tgz","fileCount":460,"unpackedSize":1006081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy0lzCRA9TVsSAnZWagAAKMkP/0wk5PDUYKPmbJS7KJxJ\nIG0yFgHt/cgJn/DSndSwZePVieak5GhEeMT3yvo7+mDd72lpGhsERXPuz8wL\nTvjc0mRO6Gd6Lda8oKuCZoODww/zahTdtGJu9DlugXbPn7yXMrOxUEhyAZgI\nbs2I8N+ten8kT403ViFLxPjdCycUFFsCQXo+dxF0D4eKXNJr+g6/jYwxW8LO\noBEtrf6vywaTIdg3ze0ooVN/bYf7wwZQq9Art95LgQlAzG/lObFofTzW4Odp\nGTxUZFzEFTvygc9j3fFuHVPkwGk+lmCh30TszCaqvasJeY8nNK5E+J9gtG/7\ngwQyhd2t7wVSRBbXLUAhFuudg08+iA0XAlEGlcVqN4e1VCgmzH0kdPresb2W\nEKran6gjYPFXZg2O49qC7aDiRQBV7sahf4uKGpQ4gk2D0Q/YiaXUkUg4RjYh\ncxCWUCfcFisi06+YpLK/7//UgCTctKuRMy90C/hWV7BQqPEP9hNx4lvNuUVz\nSGcNqpt1nE11+gDan6N++XzypNX8w3pUe2YeTQbkOdZq3tkHg07t2g+anKuR\nh7D7k+dCPXncWDBe1dUCu63JttZ9toUZUpGAsFW8KIYrr1tRlmgnmSjCnQTN\nnr3EeHUHTcI/os8NjTHqflxeAXzIEFmBCvv/1kOuwWDHzu4QcATinfeT56UY\n+vWo\r\n=7sAD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmNdq96O+rE0prQ3WV4rNDPgyPhv4+6yFm4GQwz7YKWwIgIQjpfiOzCLVrOTfO1xv4HyV/8CJ5oWXwdf9CanNDWug="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.19.1_1623935346482_0.016145911611085362"},"_hasShrinkwrap":false},"1.20.0-canary.441.b69e8eb7d4849c8ed468215581826d842e3b931b.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0-canary.441.b69e8eb7d4849c8ed468215581826d842e3b931b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0-canary.441.b69e8eb7d4849c8ed468215581826d842e3b931b.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b69e8eb7d4849c8ed468215581826d842e3b931b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0-canary.441.b69e8eb7d4849c8ed468215581826d842e3b931b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-y9XQDM9a/AEMnF6fEV9g0kelIKOspcA5/kIhG52kc9Xhhk8sZA5ZHeCmFIkjJrxHw5nDAJZceYze9Jrv3RLMhQ==","shasum":"5a5d0058f32abe15ca190d9fbcedeb48fc5b572a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0-canary.441.b69e8eb7d4849c8ed468215581826d842e3b931b.0.tgz","fileCount":460,"unpackedSize":1006189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy5SjCRA9TVsSAnZWagAAJB0P+gPl9fI/CULk0NGy373l\nCrnL4pp0TItgfXf1ucHCQje3/IO5xRRehxH+5K9QsqTGlJDly/3YpIHCp6nZ\nfywLeV7M2XI+laS6HpQsvlWF1WaVJMuy2yry52uVcMhVkTMUKKULgR85vzW/\nRpdb5pojmom37cP+8MZIwJkQLI3FFsFmCwlVLnIz3QYLh8Ls5n5d3ODY1qd6\nBcWIrJGaVL/35840uqqUHheNIEz0joZcB01Z0c8LXrWNd7bJwRZ3nEL8QPxB\nujIiMmJ6E5duRuZQP/HjoiYRI+6FCp6tTie17ZeRRK9DV+zTzT++CsR8seA9\n0yF5oBluIc5q6G+UTJTiYcYpL6PwN5BOt53Dxm4M84st66GxaXdUMF7y1zm1\n2K+PKlYAWA0S0HR4VpMM8NK1VveymGVwylchnPwFIQ/t+58IKNHPwHGp6ffJ\nM+SLGXP8bjtnXh9MRCGBk5gASF4DrXW+qb30ViytzbKL8goKfXj298Bqhxyr\naKLeSlcqL3sgYNxb/Dnf5p8Gw9wWSmNSbVhMQdMfejCLuFTz/SJsUNaq/IrS\n5gN1rRjyxBrnkmovq1QNO/U+3eezZB5JzOBgsW9yZGZ0dze/6TIQDP4+JwWu\n7o7n0QczrnYtuhlRNW0rIEL8IRQEm/ew6ZbxjbEzMgimaVSiCnWYsLFZz3/1\nKZHV\r\n=fHjo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICYk6k1VXEYgXNIGsL992KurxcZbGIdCsPcBT1hyc8PYAiEAuxf7zKXyX1c/RmZ4z3jNWPoVLqvb8j7AsD/G39yWUHE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0-canary.441.b69e8eb7d4849c8ed468215581826d842e3b931b.0_1623954594917_0.10278715025090723"},"_hasShrinkwrap":false},"1.20.0":{"name":"@sberdevices/plasma-ui","version":"1.20.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6d478e2eb61721b533e90b8cdaed45941b8b97a2","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-wDbgubUwSYyXJCYkh5NVIkRSTkfVnrWrM7YhUPRVGUGYmzFmU6ECUQl8BDQzu8HF74A/oHyvmm9JRcQ0W7yWww==","shasum":"3874cf0340aa9df8907bb2b3d752bd6e0b66b55b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.0.tgz","fileCount":460,"unpackedSize":1006311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzE8gCRA9TVsSAnZWagAA6fMP/1qmhiYhQM+H0Ap8NqwY\n0QuDbOKA5cTeyZ3fVIeEf4LS4lxfqUUhMc/Du2B/LjZX0GntpO+msjrFtSiJ\nYylf3IDGIrfohBxNbyACfqkBPrnw8yN8+MCyMJS7b0RFyRYrni4Iam/pY9w0\najRgSSGR1CWkbPEWI9ha73CVzD0+Q00M0FYG7RPzI2IWe6LuQ9dps1sTS+Wd\nYo14J0jBwmULRNCrrBSk1N0Pl6/SX+VpFbtB0aVrH9KthTFqFY3tKV5ZY6fH\nEdwLczOsmCBOK0uWi42x+4ct0vdmWwHxx17WDJyk4KHJSZsfts0oR5ChN2D/\ncUW4xddGSoNNOFmuNj9bORXLAJKcq7DCRqNwlx3xX7QXqVxwoKJQ+zcoiV27\nodOnJWy6wtrmS4piPVkidutJjW2InbQ0GuVnBvLJMmFzw25P4KqLsYnMWUyP\nu3Sk8yfJGkexbARG85o89/eJZ/ydudYt9/orrhTFlPVMzUwz0AjvUaXQN21X\nXJ6qAiYC76q4ebw7yaARzzJUrSM4YmXTmCbNpLguDBMsRVPL0C92slPI39jH\nx9Fq0IyX4BhpX+nZgxuJWefcqwrPlEYlp++jHbqxtzg08MMjVw7dWZVjyE30\nssk0u1If8ksD5EkWe6a7gXXqv2zBVtzlzbC5nPshrETe2+Np5h5STugr+scC\nc2DT\r\n=VvP1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRdD3/an+hZPm4TDp468mpnZnE5DoBsUl7TVlksMn0gQIgf/Qs1s3S3+Nkx1wRnB6QK/Km10bEa3hIGFX0x2X95qw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.0_1624002335635_0.14534927225725047"},"_hasShrinkwrap":false},"1.21.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0","@sberdevices/plasma-tokens":"1.7.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"190151a2aa262474f2bcb99251182a36923e2ccd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-mvMDkYualjd5U648hDyoKY9QU5ITyO19Df0hzv8B+y1cCUaHRdCEPF5lBSydEBuNKfJTmAwIsaKBdEi0PZJHNA==","shasum":"5f9cb93b1d1672373895b216e8961286e0b2da4f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0.tgz","fileCount":460,"unpackedSize":1006527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzJzyCRA9TVsSAnZWagAAFEUP/3w+/Is93ZZ4G9XpGXb1\nn0fjzftziIBfoNnl+vJzkL41LHtRv01Jg9ykq4i4KNDihNAl/7qShJYdP8m2\nQYZ+A4AL/YTYagQVPeIoqVS1z1DS9wsPAAxgiFYkvevrx4kVf6/uWsJOPt2y\nOJav2yNYOsUtFs7ohmAoC0Om24UPDW1eKAGDeQdf24RiBrk7KEP89gaWVjo7\nd3LPdEjnusIuPKk7LTKExd1iuTHSVcU6mAmEJGgEb3M/+l5dU3J5ZUaVb1S2\nficCPK4sB5RhD1vuFl2Sl8FYNMgkhf4PtrctPS+36ULMm6sX9NRXIjCfNmIn\nktHKwfmMF38ta0eyTOtfLHGs9mxFp7lERLRJf2p4cAyYhoMWhy8JDL2DLfOI\n4aAE9qn22TY1y4KVYFWRsNK0YvFh6Jk0RxdQj87tcPkeVpAMMX0CZWmMcWRN\neXw43eSPHnMJftmgfj3z6/7ZDUAhNPlT//44pkpa07XhFIgVTZV41kIuqz2j\njELVsnghhuruQyiuNDEY2IktULtjI49ca0YcTQqZJJeeAr9tMISVFMgHiPoS\nLbKUH96mPjY1Gp7Ba39BYesDajlLsorJnnFVe9Gv0e9Fa3OR3Ny6ICatZsDe\nAwTSXus/5xyPiI/44oRd9KiKKpL5mOqk4A4zYYQQXuc/YPaJ2fwzGl3QGaDH\n+4Lw\r\n=hY9e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRxrMAK/hKE8FbLFjAh7xMBO3bJ+evEYHPUIDCGRzSIAIhAKo9RVrqBnU3LKLMCRsFNybeSissNJw4olvsSi0uHin3"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0_1624022258046_0.5039116607113827"},"_hasShrinkwrap":false},"1.21.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0","@sberdevices/plasma-tokens":"1.7.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"13a8eccb06fdd863a45e832c5e1992838ae09580","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VB7N7waTP8GjhGbmP4e1Qz107O3HXNczTbt2OnCaG/qj9LeJScCR5t0gFZ9ImId+y9wNyATJaMx+IkU7uWblLA==","shasum":"8b724597a8a6a2744e46ab0b2111fcc7565415f5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0.tgz","fileCount":460,"unpackedSize":1006527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLJ3CRA9TVsSAnZWagAAeRsP/it4emq/1B+2qxtJ7AvW\nEld5p7oFMahtIkqYcI2K10EushOGNkzStaLkRhpVpHki8jYOpH7OH57g8U65\n7eWbhL2qKn8iZ/WN9NnKNgbqpzdiMc7l9kiaRUOuOpNmlev36HlWlEtJ1BqH\ncC66lgeWkcxzaT0uBmglzfW3o0cIqTgGa+u0Fxe+s9Pn3Qu4R88khiOmZRl7\nSIH2rN7GOsjgBJDabRIVscAj4QwbwQ1Uh57WFfV4QHTdy9F+ZPey/mH74n1K\nkDJ9pIgYZcKxmAJNlazMEtePlMr9HjLwrRukdsbsP9p//vN6/dfmt2jHgglV\n6rNK7c8SQz7xTC+Eb2D6i48h+sAL7U94AEPMOy5bjSnUG81LKdoNlLg1RAh6\nuhCmu09+INGTQAnB9/5pL0iTjOoDh/ej47gHeqyPz+FsD8qMQQuYFQERbNO3\nbgXTJ4CNeRK00mrwB+ez+Bx6lUJrjwojY8KCP16xPNekjQbkQQ0zOI9tl51t\n0CH34nlxNVVMYDX67WMMnxHXF5gMBqtW21HHOBrOYjwG6cMkk5uaHecAL6kP\ni5t9zG6GxlncSS53Y7gPsmrexLOYs+OKhu0EwEqdb2uxP4NQJeT4jeziKLKy\n29ZlpLFTdZv5fytjfuPrQO+Y7K5WkJB1tYqSng/IVxfuOJxYk0NBuWFZZR+z\nTgXY\r\n=hsaO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXTv2cGrr55G/dTsEzbIl/js0ah8OUfT/DQkQDKWbh5wIhAOKo+fnASLN4kvVnop+wtQWve2lO9AWjfQZG2knwIb/J"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0_1624027766802_0.18742348648777485"},"_hasShrinkwrap":false},"1.21.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","@sberdevices/plasma-sb-utils":"0.3.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","@sberdevices/plasma-tokens":"1.7.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d6edb9cf0bf97c0149f9f32a99da95569ae5093b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5L1n5xetk/pPZKTX0sDlMoZ3m02oCuEAYevpSHVOpYgHVUbyeHCFuOX4uddQ/xJKyRulHqAZIV8NjOdMJI2otw==","shasum":"463368c2e7ae7ca8b90a931f855046ec4bbe762c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0.tgz","fileCount":460,"unpackedSize":1006630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgz1+4CRA9TVsSAnZWagAAJkwP/3iRfGSfCTnHvYqxjxbl\nA7zQE3ZlPv2+E2jgVamOg12SpvyFPvSGjaGfNwcUPy8VrhUrgQRPOSnFhlZC\nB8EF8AYfAQwMaufya/Y7u30+9UGVZbeqF7Rd9RnlAtd7XNMuzsQerCuXq73h\nlxWOAaIol4R2XUKPimr9L3XfHtOde5ltsgary96p4LeTnbdlQUARy26UrZWG\nBx9k9bKJwwO49u9PWzFsnjsLRHsMz/+FMxE+TT8wiEq6/oD4yB2R92G2lZOs\ncq+pzqFjxyQtyqMnerNKyrzwUbJw9jjDV0jXABvB5y4tL9EaMcaj62STRWe5\n0eVZ0bWEV52SzcG5D2BCa7S+DMfSWcFC6g5gydgKo19ML1VhMJsoI3XCJy7i\nLK+yByMBhq4Rtn8Yff5sf7J2tPZwy8J3ltEzThk8uXtKKbKXJa76G0EQJe3w\nmCNGs83Zmjlfz8lcnqrq3hIPFRtv4oySr7aW7yaRhgJxZ1xp46HIQV7vzIx+\nTIo7rZceGGxUzogn60PnDZjkGTenpyjynqIgfFQb6Du4AbsbY1RYwT6faX+/\n1VClGQbYI5IQ1b9oaXICNuxIIRV0p1bkD5GIMjL943Jir1telhktTMiTShht\nuTvfE4jPimExuA9IefnqKfk4x5eg0riFG0bPke211BXtQwIK3LnRaTZMCJC2\nnkpj\r\n=O9wK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDluFRM7o6vWM0LQAtzqMghCDebXZ45zODAcGt/hk5Q+wIhANXr91bHpJkjf8h7n1/+snXFSt5UW44ps4JOHcHsbz60"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0_1624203192065_0.19830235882981206"},"_hasShrinkwrap":false},"1.21.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","@sberdevices/plasma-sb-utils":"0.3.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","@sberdevices/plasma-tokens":"1.7.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5352e5c0c7df06a8d14f45f651831c5eb3807c01","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-/inufwNPY/HTg6eRjLobMFWquiypKsvzQQU2B+rg7RcOrtuqHCUU18fRXNft/gEHn9pRiYhdzDQ7l+lnNZBjYQ==","shasum":"f7cfb17e2542f919ae5c5c0593defc0775147008","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0.tgz","fileCount":460,"unpackedSize":1006630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgz3HICRA9TVsSAnZWagAAIVMQAI1JZlT+mCCslebdJbTn\nzgAj1Z0/NymqfaU3ytcoeUxxd4bnACmJ1UBaZNBsgTmNao440bnHdOejprhP\ncpEe84WRLnJfoMBR02Wwmp2KFj9j2V3zWY4p26TJIoNdtN7GRl8NiIMbWAWw\nV7FlSr72ZCLyfUhC/KDK+AY6W3BCtoLXuTWPPV3Rmg2PxJ7ypJsF297L26BQ\nGJPErn3iqzvLlHUPPexAjR59Z3AWrwE+hboaeI32lenr4eRy8KT3KQyY7glo\nqi+mslvbnOrp8ocAYQZsT71SOPDDPyN4qEOXPPB9ZH88PJcP9uW3buuboMpI\noBLFQkVz5Li0AzNHV+ehf1YPhlpBjRtJ5DiciA6XWqJSIXo6NBh7b2s4jDck\ngRDpC55WaxzkS0bvY8QDn+SlCk40eKUIzXSvAuUUoKH/rx3k6BQV8eeLDkkg\n6Xfj2cszLKasvX3sCkFZByEvsUkb3V0kx7sSvMCmnHkQV7hLiF9O78JJ9P/4\nnDNMAkbcIExjsT2R1cBIskwnCRKB6IPgn+gZOvAPmCFASf73kgm8ia6PGupa\nLtyeNxPNk9YbfXOVnOvTmC1tHGK7cjABMjqeStkZh8YeqH0hVkE6RHTr05gQ\nH/mPLNtfGcCyQr1SihQ9HGmvzqLsfVFPOfO2ygcZ4ImFvRL2+JFQ02t1gyGz\nXsVY\r\n=08Pm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHKL3A58Alcc8OvQqvT2aAnIe6xJcWoSLM6gC7kLWEpwIgc01uwBTmnAQHpQadVnMX37k3rAHqHfwCNeicUIoxVGQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0_1624207816138_0.20735255852044365"},"_hasShrinkwrap":false},"1.21.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","@sberdevices/plasma-sb-utils":"0.3.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","@sberdevices/plasma-tokens":"1.7.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4529fb24244f15605e4181867e886f77ebdaa11e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-1GOO62cM4vNOfGrZL4fCpYGw1Wnom+qp191zv/Wmwfcgh1fRciLRCPSQhi11CUgGvGjsTo9y16BDvqCKer/aRA==","shasum":"ec73cf711d7d6bf3abbfff4c8b7836d13c76a4c6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0.tgz","fileCount":460,"unpackedSize":1006630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgz4pXCRA9TVsSAnZWagAAmSMP/A8umYYzzBenYN885ae2\nUYb3WQU1j1UDWP+YKn4l7UubPlC4/iMoIzzeh2nB2C287tHuO2iolEjoTYx+\n2sc/shYaUZp4PJ5IC5GsHxlmJrMl+YsGnHoK3srWzDJuZ8QFlzXKzlDAT28p\noXVLh2ZqjwcxKr94GoDcjMZOYCSC5M4WhKPmvGqZH3cGuLx2bUC8iiNRb5Zy\nKmVMIYA2hGInxLZS2s+UXD+JFpHhqfxq2SQOCjMcYtL7n9Pt97aKcl+MmbHB\nxsFpAg+TApl3UMwDHSVj/LuclCpNSxs0lEryqv4BP3HI/1SYUR4rFznooe/v\nmhLoMQgjBAK4w+2VC+Us1J0C18pKiH8E2lNiX2y9ExorN4TO/NYDJR5TYSMz\nBrou8sy2Tkz88kbYhaVE2IE6yA58BOFB3pDmlDSKJ6+pmzlRvhixCfS6M8vU\n7aMF9w8S47FbnQIlXLMdKS5Nt5/vJvIU3kLu7M00f0Iq0ZeIX9+ri5oUHUK5\nSRrKlzzK+5g5m9l2XGV3Ct6FvYQUsvq/8wYutxy1ySqAS4YON9S4ESA8OBps\nd/QmOTDMStumqO5IdF12Mw/DSZOCd98+MGHW2Sq3CdUxBg6MhILZX1YeZtq8\n0rgRjEu7VZYJ2DDMSq1aFrmadbr5s5H2/W/sjUQDFpZMIVcgDXXrPmzgJ3r/\n+Lch\r\n=aDHO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqP2PH8oRAPjMl4EYdgZnEQjiG/Dr6L/5+KnvgTRHCsAiAXOHHoYijCoHGuUfKp7xhw20Iy/IaVeUB1VdkM3peCtg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0_1624214102783_0.31794099351879046"},"_hasShrinkwrap":false},"1.21.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"03b410aec0af90595a35e386ff4c101f8607f547","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-pPpArL6m3CWAQMI5aSGwxGM0XAfgNLNnWPJqI0muRJcuOJADAv7KVokxtvAVjZok/XU6daHPWSpJ1i//OvcDaw==","shasum":"5b52734fbe8bfb5f01398984898ace56bc356f43","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0.tgz","fileCount":468,"unpackedSize":977513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Kk3CRA9TVsSAnZWagAAY7sP/3IzcElBbSwCyPrWz9PQ\nR6i+cKKOZNXruIw3HLnBgxbr51iLf3HloaYgbLs4AdWyhy7OPzM704aKwnWf\n6kHXKQjlhAoFwYuoZYkEm7RM0uwXvsSsyVIKOBIl2qKRMDgQ5V7G4+zL8GU/\nw1TW4kKM0azIftwPZmY5oRd6AhVEg/LNGwwsDwulGs59pnFsBgzuoEonfq6z\ndDZbSmSKzdfuJDlh08R/4bNN/+/qSZmGnWzpuC73ZIBDPSuDhIVHQQ65IUpH\nQHR8PBZH8Uw3TnEFdqln41IyYn7hORsEHzSXAURYYuPMRqR7DBAFuofMPAL7\nNBQmLuY5+eV3ioitnKsjugb/p0C+0W10UaLvyn5TRRoFG6qsCQBrdEEHxqWL\n3bgum4l96Vj6vKIzv7iFw7RqzPnns+yc5VtIGnLEcJCBjYXl/pg8qChJYiQ5\now9wtAWXmakOT3cVtnZPHNaUp0TfEK6H59sxTDhZcRix9V3OOCpEipjboRa2\nNUoHfb4JjAmuFL5NF17dZKIvrNdNEl1UHUMVpulpf4xnHn3dL9zWAFWBpiPQ\ntKvqWtW5LXIzxRyVV40DXfpe6HNVHu9Gfbok2sQelskJBA7sAcfHuCJUsKjn\n3AAyy3nVBP7/9Ncmr7gpdGS4WAffiu+MeDhbbaO+rGM+rgWw4SK6jchVA6rb\nkaDI\r\n=kB69\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbVeLeKd1htOBzLaKF0SVLFuJPQvM80kG41r9lY/nESAiEA/dD3Zs8t2IHDUimyf2yZi7BTQpqOO/3eAB5KamWbc0s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0_1624287542765_0.22245881134599932"},"_hasShrinkwrap":false},"1.20.1-canary.458.aed361c19f1e322f95a59d7ed6e022e2d5be352a.0":{"name":"@sberdevices/plasma-ui","version":"1.20.1-canary.458.aed361c19f1e322f95a59d7ed6e022e2d5be352a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"aed361c19f1e322f95a59d7ed6e022e2d5be352a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.1-canary.458.aed361c19f1e322f95a59d7ed6e022e2d5be352a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-9FvyD2xosgF/DvbX9m22bpj/e98PrXwkqn88t+9jbeVpnlmzBYOnSxaIbApZ9afv/XveM5W+I1FabNN/MyrksQ==","shasum":"aefe0de76d325f107d9cd8e187380d70c2ec541a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.1-canary.458.aed361c19f1e322f95a59d7ed6e022e2d5be352a.0.tgz","fileCount":460,"unpackedSize":1010827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0K4FCRA9TVsSAnZWagAAX/YP/iOc0Acer5dMdBuMdELP\nQo6AoqWeJwpzweN2qQhxkTvBg8YAwDx75h4ADsi2p57UrrGk1gNv2Bx/tWrJ\nnDJXP2Qw7N+mcnH5GMqs7lNe78V7cX2/Rsm9n4/6x3dCEIVA/WiFE4cBqP3b\n0n3AKPeqqVi/onyam7C98bNfz/x2GzpPxjCDXS2K4atmlHFB5zikIKyG14U2\nJqeHQ/Oxa76MFQTNMoTWS04skSA6iWCOMmgmpnYlXyu/7kUIbio4wIb+nMXG\naWJ5NULKZIcLS7TgjE93i5KJNwCilyjVTChYRsk7zRDchEG/8X41wgXXo5Ch\nkdKv3aKduavSiX+Zd+/HrELEToDUECtE/VTZ4ks1Bji1uY5KS5fMgVZAKWPN\naO4ZyUMnMDTXLeRoGpI+rK/B+Ry34H83xtUfMfP3VdZ/+hyutNWkKSm09ges\nRtaS4DD5g8wfOcNHIBjOrZSeE0F735OlYnO1CFJoeI4gCRaHD6zghGaiArGx\nwGgseuBjG3XiHOUc9ox6VggtfjMew8DDHcli/woYXr0980rUpkAzScVI8Khj\nB2KvFz363Vv4r2Go6yuFqrFC/CbYIYFL+F5xIVFJc1RMKauSYffX/9UL4g2q\nmUitfXijGkEM9znuZsTAU+v0ID6nVu2t0y00N95VibzPcWMdxHeyhYOlDVZ1\nMqDt\r\n=K/jQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5m56Eda66hxqjRlJ+4IS351DT4od9btZ+bTygKfdJPAiBAC4L+cJAaixYCN22eHVVXiPpCZ8hVn3Bm1XVqNSVgWw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.1-canary.458.aed361c19f1e322f95a59d7ed6e022e2d5be352a.0_1624288769623_0.3624233885930832"},"_hasShrinkwrap":false},"1.20.1-canary.458.a1a6ab96721e55ff98b0bbb6f3fce30b06b18492.0":{"name":"@sberdevices/plasma-ui","version":"1.20.1-canary.458.a1a6ab96721e55ff98b0bbb6f3fce30b06b18492.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a1a6ab96721e55ff98b0bbb6f3fce30b06b18492","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.1-canary.458.a1a6ab96721e55ff98b0bbb6f3fce30b06b18492.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-c041JGsU3HCMIrJs+jxX10q6h39TKYS0967Iopud5TbljtEWYXPsGjUZ/bzVHiIpMsNnfn49g5KVJT1GF/BLhA==","shasum":"ad87fc081bcb0ec5c88b9c3dd54c1de1ddfb41d0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.1-canary.458.a1a6ab96721e55ff98b0bbb6f3fce30b06b18492.0.tgz","fileCount":460,"unpackedSize":1011110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0LStCRA9TVsSAnZWagAAdqMP/1A5aEFNEO6s50AIiX3c\nPS4oULAhSdqqbiTjP5FUgqZf50uDgu2Rpvltf74WLdAfZupNoZuz2y7Jt8vh\nw5NyXKlYzbZOpCxpckCEgF6VElcvct4MjJMIYJ6LdAXi2woA/tUxcgdidunu\nq6T0igqT8ONIAwZt28ZIg0p4u0+d9n2Nsc5NCgmcwtlrT0IrTkgFoXn5Vl+R\nUzfb91D/+XfjS19FZcwbVkhwiL6vZZ2zYEUAFpDQlO8D1uVkmstbhHJ0mEwh\nTfd/HPRbWY8cJAyxNASXMrsbzSSqa8evhtf5xVOKB2KGBENRi30byzzZqT3q\norV6gEPEdZc3+/bYj7h8ik77rgccRnLKZ8QZl4NFG5eEEuyEoFSmPKU3ZRL0\n1ZbUAKGaNLpqOWZWlvATllgzMC8PVwr1pHbm9iluJxfNlIzCnbr+a56Xg1Fe\nEqLUJkNjVuRd7fDVtn9N42mSSUkrt7mJxTSCoMa8Hdv6o/S8Q8s8F9GPOSfR\n0hR9QYQd8/Tmu3duuq3Mj+3CDNImxbtlo9BiXBpTtSZeqXHI/u/eHN9c9f0p\nTZSQivMAx/qkTO0vv9hS5iY6/ty32q9qgkvNxZMqvNr/KzEH7OpAf4RpednC\ndm1UkitF1fqr/PfJ4KO2n5Oxd29cf06gHNEi9T5SklfPOilIko86HTMWpBcX\nVZha\r\n=0BKQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbGP2G9zAjqB94HsZ5sK72w7hIyQBbF26YbCK8vge8TAIgYzgOVNwq15QSSA+Xm6ew4buUwAXO0Ceze+KsvBWNqBk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.1-canary.458.a1a6ab96721e55ff98b0bbb6f3fce30b06b18492.0_1624290476546_0.2999774381919069"},"_hasShrinkwrap":false},"1.21.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-4ub5/z8wdCq/QKjrGwnw2tff4CnO06R+PZ8mHnKfuA0YYIE8Lkjrr20JsyA2cuEP6tNowbQ566yjze7FMVGOoQ==","shasum":"870d4a502a229c2355a22fe0851591024de3d6a1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0.tgz","fileCount":468,"unpackedSize":977513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0MyVCRA9TVsSAnZWagAAPj0P/0dVLMBe/ZGy4mCaODjS\nXaKTAx847w0yu/sM7HlovZgdckFsyPl++oVY51eHxELyoJMaivfP7oLgf/Vg\ni7uKda+LNTFHr+U1CVFpE3bxpoetqn3ITvXPUhbyS6FzuoMWPUHDNXn/LW2h\neQjVIdhdB3FZKgapQo/HZlkqVFaE87MYlycOnhMIYBKaO2MuobJN9Ngzm0El\nVdtjCx6YlxKvyUq87A9nnUzH97AY32t8Qb5HUeHJz/z9GhT8g9K2HmxPqUKo\nsVMG3/HSL/Gq2Vfmm2cuJ1QamHTITJl+QU7sDE+s9CYAuTx77PldcDoglF8h\ndFeqvIbq1ra75rxpkDKq8qJTqx/9BMt6BX677VDqaMcWARGsQ0Hs6LB5MJ6y\nE4WONs7SxhexL8RY1plUAnoqpkXrWpIgTsQ/xw0qxCgtGfzJGQS7HiDnWvWT\nZpNJN8glu5a5p2iiWXLu0ULQEmSZX8ndmcIozkimWtnfF/+aSWpJBBmN+766\n4TacbKzGV9hXHaviatHbh5inghcXmGOaF452Yl6eo9Jb3UumvSS15b27oLJx\nmdaZFqy/6hsZ7IGMMdSrxBj2qfQ+Ni3lSph1bmNy4m0wwYtIErn4peuaydBa\nY7MDlJs75pIoa/0THMLxQHjnZXthxg3PnbDQipc08x1/ivKGm9jL/0FJcanZ\nvkTb\r\n=GQz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpHOEuvYx30dwHBBaRE0Hkl/yJgIbMrdL/bkxwfNK1MAIhANj8jjLw4bANxuBMTq+KQUYHFTIObFQ6gQZJADE8Gmdu"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0_1624296596755_0.5443556495729804"},"_hasShrinkwrap":false},"1.21.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"df8cbe8fd28d660ee0c887c7188e69da0a33be07","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-FfsgCgIP30so6nVgRzXO4aVdSy3sbY3+0mYWgeC5Uc3ASrw5nX6mGgJEUtVXiHc3nqOgmx3IMjx1/Fv8X98P7Q==","shasum":"c847d3b624868cdca84b09e577efa09b95723ebd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0.tgz","fileCount":468,"unpackedSize":977513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QmzCRA9TVsSAnZWagAAMEoQAIzXugFndTPfK/6bBidY\nKJR66S8VanlXRKlhFc54LXze7VJ5G56M9WJND0x+JkvHVoHMePZqWvPF4s4A\n3YG0vcuNOOZU0PgTrdNoi4PGSuhxdL56qtO/NEt1ADS/46qWzrNjKWAGjT57\nSb81RtcVoZPIDzRtk4iLvqkpaQsh5KR77eOU1jpL+8t3r4x9T9tN7YpUXJdj\nKrTyDSiSIrm5gPZYSWE5IvRY1+iSeW4uTa4JNqGCMkFVngscdiPCaMMFOYI9\naCoehyUBUFIZFneZPPn7//5IAyQv2PjjDy7Qu4gcIbeB0YgCU2/qC3IWt07a\nCZ5ZH/lJitOeZIfbbSKRDrqcZ+Eu9gs0AcB6sx2csN4ZfKgyMTElKMfN1L69\nGaahpyyeP3rSXwNvLzgOvmPmjEByDb/vuxKhueCRXwb1Kieat30qOskVF7p1\nl7TYzqwy/AjoBrn+mCe6jxWGF00632k+BR+CoPA0wT/0N8OFo3AKzHKwKQpd\nz2dsDBRq3c1W/WKjynFGYBUn4WoimTmVeAhP/2x51rlhLO84sAdBxDT+ukTe\nHpMcBvlfpLtrK17qCs5NK/2y9Rqhth24+4s6LLkD/RfsN9nkfjI3DZlDWvCd\nQlA4Wu9gUxalV67GL31TP5L/vrbr15zVl9kXlaNeOM5XLz+Ir4r1z3vlhjnz\nJlfM\r\n=JlHO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkfENWg/bBAdXI12lR+EcwxrqvvcfjD/x8b6vXZ2W32wIhAJNQQuGqcRRYbkCTnSMBnsqpz2oxKEn2cSt/bOa64xHA"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0_1624312242674_0.13487655219354355"},"_hasShrinkwrap":false},"1.20.1-canary.462.f1f84af7bc6a5533ea071de1fcdd3352dfb42bf6.0":{"name":"@sberdevices/plasma-ui","version":"1.20.1-canary.462.f1f84af7bc6a5533ea071de1fcdd3352dfb42bf6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.12.2","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.17.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f1f84af7bc6a5533ea071de1fcdd3352dfb42bf6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.20.1-canary.462.f1f84af7bc6a5533ea071de1fcdd3352dfb42bf6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-TQkqazEdARalFP3lz+pUR9tiRoySS/T3KYveTf4uwhF+J0vKdBB7bGfzjxl9E9aaEiMxkvjPtxR6QIyt0ZvpHg==","shasum":"a09056a3f46fdff97e8525b6c3432798e6a047cc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.20.1-canary.462.f1f84af7bc6a5533ea071de1fcdd3352dfb42bf6.0.tgz","fileCount":460,"unpackedSize":1008220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Y+HCRA9TVsSAnZWagAADx8P/0HFs55hPPSh5uwtyFZU\nF/7hYsevMVf5JTLe9DO7LmfuknknBFw1xsQV3ySnzBmwq74Ji1ci56bl3z74\nUs6lAKgDdpbg2JO4Hye4QSGYjOg3/D1ubl2ddde4jI7j7zh0aqJQSUfHYZt8\npYL9NYC2q+5vQm1yEcugM1Xlm0gXcroEtQadIjn60HCBjRvab0QiNwdfRLT8\n5fxsF1Cfg1clZK5uzI/C8FRYQbyn0w7E3WG250nXCnOS2a8KdnXA9QFYDcZS\nPOhNk2XT+wdySWNomu+5+egqjH/5BrciyAePRVzPtASb5M0Sr3PRlrjY3ckp\n0x/hFeHycSx63fN24RAFSaj/HPzJnTnqcx3BSUySN+QB5kChPwNUT3HfDPrf\nyLQgRrAoEtizVXh1dG7CxUhxq6u85ozGwGutup7tPFPrfmRZJI3dHNtHsQK8\nOXbuPHKv9MvU8ePdiwO2PRcsLm0D2LgSVGzv56KeprkyHeZKCs33TsUJDEXr\n043Q54IEkP8y4QVZR/tPS/a1TfXXAa4e2fyoXF6sG5l1petZxODlOxKtVZ+A\n6HFc8q7s0+XXI/zWQlMlNLYJzfni31x1DYNQ+Bn+cEtsTxrEopUBJLv+QEDl\nyySxLzwi+aCZ6bU1vCn+mBVfnMwznzB8dvIyo29F5kotu86OZo1JZ3BLcicl\nJ0se\r\n=pe+L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFiPKHBlOqAWydQz+Yi6sszntZ2RbKkynIj7NgzfAWkjAiEA6RN68rNI+7zipPz7Za2kBHwo3YR8IajFsQwo/YBMYYE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.20.1-canary.462.f1f84af7bc6a5533ea071de1fcdd3352dfb42bf6.0_1624346502388_0.5064916113526492"},"_hasShrinkwrap":false},"1.21.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4a09b05af02c2ff91f791e5c6c287d02efc51290","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-vDpVFKyDzxquN8bEZR+7FG+vJleiCibAjd35m+L3i3I2uhvgGwOczUR7LzCQQuvv9L1zKrgbbEv71KJpndW4Bg==","shasum":"700d239d4b1ff79b9545bcb381dff40c32552348","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0.tgz","fileCount":468,"unpackedSize":977513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0aKjCRA9TVsSAnZWagAAdnQP/iJb/LImydPrkI1ipOLJ\nnflzfaqXxQD+tA1/ctBm1CeSmD8ZKQ8QvybTYZ1ADEw1FXZZtRodWfYPl+fZ\ndrIlZhDsIRf+sw6JT78LASbyPImktT9mhAqLjbiBwns45Wa/SUNhnjXCg+K8\nddSJEcYqTe7F+Fs8xaWaFxwrO7DsKJAdLCw/MREUcpl39n0Q5+e4yUXFHJnS\ngLiNsVCSwwqjlgiGc454tYGS0bgHo2f/HTvEX6IVp6+zSJIynZe6cqgJaICk\n5hRAGTWfnfL1PICreJP3I2EBAjPxkg2jkWCieFsqak4Sf1aG8iGh3+6La3JT\nBeHZ+J1/6VLt+V53zzIJutgA7fwI6d6IMY5iyZt/iokA4baKzRdcDtWV4Veo\nloa+TXvM1wHJz1wBnkg2/w+ZleNlxvLVZvdL1Be7eXySSN8t19Xq5Ua9hVc3\nyoof17EZsEiJc6DgsCZVftnA/YyLVmIZcJVWxqsknFGGBAWDFGjINMIE+WAI\nptdqgU5RTl3ikbdbOaLSv/eVJ7VuVaqvXPNYiyRCBdNSZN6NdOwLg7ghloNe\naIZmidfcXhP8mF65wSRKoC8Fqdev/4VN1XaNVgrM0VJ/1YD6K9n+EpCw2mO2\nvYMxZfarFlWyZLSAOWovgTRAuPKVM5r5aua9sS6qyr1lstpLJbY3xO8UKVpF\nHBLw\r\n=Ooh5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHoGlweetk5ymBvenFxJUmICTEXnSp0w/f4NtZZBcB9QIhAJXXNwXWIHQRGgFwmanbdS8BzUP6ZXF9xF/AuiBhBQ4v"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0_1624351395329_0.01717537563788052"},"_hasShrinkwrap":false},"1.21.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ozfvfvGciRQQ8BZIgynExnwiQ+xqfPD7P2KIQztr2mC0U7M93IF/H/6wxX96PQl2VjQxfeGV026pPt4DRisaQQ==","shasum":"6155ba071ee2239fc804e8203237f14087e7e0b2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0.tgz","fileCount":468,"unpackedSize":977513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0dkkCRA9TVsSAnZWagAAWy4P/Ai5NtmiV4mLQcvEQC1D\nclAhXWfqNdQt6wNERX1iNk4K/Cav0EnoYIrh4didlqtRc2d69no5HQeHBTnu\ns8tgR6105VqbzRiEkT7h53w2Nu1pMlg33eoWB07iYhzm504C7YIEwLSsqlJ+\nMtt1mwXYnKF5LfSRxJey6jSTMmcDoDh132M76W/UB6gehmS9cpB+DtI5Pueu\nowjKg4EefQP+qnS79rnjDu6lcsIU6mV6eGQAPBHb4ZHt/fO0xxl1YgIFUpIG\nH8oEVWOsW4GOW9fbDsR6b7bLw/sCf/oNSFlC+helGhxbo0YvBjdykeyDAxNF\n7Lm+qGu362f96PsWb+eCG7a4EB4AyNd6ID3+4/IV6AKckrBkvAJgf0IS3eX9\n9iA1PMhxmpMLrsxEhYRsLMZ+X56AifdHWULf1Rr5NLWvmUUaCNu/G8qkBPl5\ntSIkI+6xQ2QlWlPsIGfLLNrvbtfsz5PDXA2lLT9mikMilG13+WWaradGN+jf\nhDjEZd7C4MCT2xehgza/HWMa2HzpxoBwvcCC63WcysaWC+wptQpIOyn3hfpX\n2bYRb5V/Smhxo3Dgj/Bg1iRJ/dnLonLDLRjw20UkhqMNFRgyHs8zv8haRy4c\nYC9L7CDVKlwe9f+IVWBVjCy7D2rHKU2wMF7u3S26YHD+GScsFmyaq154z9Lx\nP6kp\r\n=xtGz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVaBHtWM1dto3rIc68nV7+1INa7bRzaBk6F0XVzPl6/QIhAN5JrQ6YhGsG9izO6dIBS1p9pdEbJPnj9TgYQi2riZGi"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0_1624365348201_0.05071018346316003"},"_hasShrinkwrap":false},"1.21.0":{"name":"@sberdevices/plasma-ui","version":"1.21.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"47e62285bde444a543df5760c8f85dd65d04e27c","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-GumudNaYYjnZ5xmmKRXTfYJUYUyMwkKtgvc0PhMbSSPzjFwx/k9rULdFOvw4MvXVtWVXopZFnRelVYHbUhxrfQ==","shasum":"f93c52f5715c4a38263af31cebe0f8252b6b01c4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.0.tgz","fileCount":468,"unpackedSize":977639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0duqCRA9TVsSAnZWagAA+60P/1XsyB0Md0rbZLAr430Z\nN49exxc4i0E8ufgjsnzlzix+0c7wScmUpmcqd/TR/5i59ZtQN5RqXAD2Naue\nUs91VmE3c0C1S5pJjMovz14Tijz0PKI5wgPVXBB58SC8iwByaDYF79z5pFg9\nUyuGahMq9gWC5EhkVtg0EhAMQXK+nVkoFi+gA2Bb6h/W1iHAVlLUjLpbPFGp\nujXQXqrmbNbMJd17K1txXOwECm6Zp8cG2dH4k1HCRhURQ+WarjYq1LD/Wp10\nGE3uVcnfyzTubvOFZ05efa11MNqOqY8oT5PLWwlnHzdniNg0FEJaRuJCIdzK\nnt3H9IM9loKalb6ut3ncNdXLh372bockX6lG7Fz0xh4Bl+LphXMcSrHAo19M\nnDRA4eXr8Sp8lB+9eyRBaGh2qVLMqa2RGKBjvbd88080heuLauFgWeLUbJTS\n7NsXsp4DLtt9+p15drK8MOswiIiy8sTezrnp0K0Ku3J9V6/MH6ihTHy4d4O6\nFXKkViBUaIjJOLNnoQGAKJGkz96vm+6zXolb2BGyKiOtOuh6V9rI0mxT5if0\nnDK3YGusYapLa8HaypiMOA+I2lTO49BYdMCpYoiV61VdqvRW8vkWwIi79duJ\nZ/HKWA5I+RTsBdtlzH7Z+1rnZJ0xSNbNCN43T5bbzGkLpnZizjS2UgHQiaDW\nx4gA\r\n=zca1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe8uV8xLkFN9diADhyv+hiY1xEbzuAZHT6UKu3hbwWNwIhAMktmzgIxshljjJQXfcxJ31yXmZFgrlgtvP2DvoV+6uq"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.0_1624365993975_0.693199912639662"},"_hasShrinkwrap":false},"1.22.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0":{"name":"@sberdevices/plasma-ui","version":"1.22.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","@sberdevices/plasma-sb-utils":"0.4.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","@sberdevices/plasma-tokens":"1.7.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ZdMgfFagFGmTsyuadtxAdbvsUbeoIz3MKVk2nUJqqibYvnh7h1Sv0u8GJVL8coPcVkkx7C2edjzv4D5d6pUmhQ==","shasum":"1841fc65650dfb0576900cc4372c8eabfdd9431b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0.tgz","fileCount":468,"unpackedSize":977958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0fjsCRA9TVsSAnZWagAAjXkP/jgIHPMcschVl2uhnFTD\n74IO4YLeQUVeybA/f6wGEMrWVsLY00wKW3Vtblka0GlQnJdYbiHkxpH8J3DA\nix6qZCoZiZqwF5i4Ju0dkt5PovjFWds8PbjHRaphedrIjd3GjPBvd/2+OKLz\nDU7ezbD2AUiICU+SPeVQJYgodShMYW8oxnA+E8HdDanHQ5hTMbJh26bznv33\n13e6MikhdmAUKBYZJH1CW3hfkyXZdXEgUgkUJ3dviQ/JQFrr9GSc4kzTvYrT\nBpsFGGVN8oii94qzjCB/dv0RlR2mo/jDVZy5wQVz/+Olkn2R5LKzjUAp/8gr\nEHQOo7ZJ4oNbMyvqXGrQ+9G8t9fsksi1FduIHhFI8jBDlzkh/eDVB2NcIUbU\nOlK8ULgNlzqFsXmgfrW/KFjxBOHixES5Ci+Kvzs/ywhtFqslicgMa1CwxIr9\n3iHCX96GDq2nhIE71PNSp2FtBsQnfGsYwKc1SgFXTZcUQEEXPeOnB2KzU+Jd\n6YG12gPjep5GZaiyps/ki6lOxW1/v8+J5XwOWMMsIRKGu2IQp2DhfxiR448B\n+UvUtLD86rory2kvXF9AbtX453dKZH7UNmBkhhg9gfq5i0180XfLIaFb/nd6\n+4u6vcPS5U+bReCa0DXY5TNDfS/ULffDSkZPpaj5BkMsnFHijXO3laiR1ax5\nvTkT\r\n=WIbU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCastedNEhmzOQLMXDctp6Mx6KDjSGj1meyAO4ilLu/wIhANT1RGGK6jJBjxuHf+200ZPQd3TYbEwhql2NsJBDCl35"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0_1624373484139_0.6156355845264219"},"_hasShrinkwrap":false},"1.22.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0":{"name":"@sberdevices/plasma-ui","version":"1.22.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","@sberdevices/plasma-sb-utils":"0.4.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","@sberdevices/plasma-tokens":"1.7.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"728e3ceb160b676372b08d25138f9c2002fc3170","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-SkpE5wKs6zpy50GA6ahZ6FFa4lP8e9wy38Q59KUca2R07LBR12hEqCrwoahAsN9iwu8DkowUZyBVYyOLgZE0yA==","shasum":"2f3f6d07fa3f2ead38ef8d76e2fc087640129681","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0.tgz","fileCount":468,"unpackedSize":977958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vGvCRA9TVsSAnZWagAAndYQAJqTvXpo84qqZdvWrgVY\nGiTRwE//DnTykokKwtqAZD03EO9GD0IOOFaeuMLeNDCdaR1htjH25XK+kuXk\nQkcSNdyC33zht+3ka/fpb21C61cdHwgT+5q1VzwUDmxUD262VJJoiWbH5/Kh\ncnq01JdAC4P2wklq1onA1GOn56ThmD3IU+UBvV62cMJqEYZq1j1UkOHYEQNL\npKqir66mwIn0vXDVnGXt6pvaRqmK5aF6wf6eUBNyESoLRWp1RMgdwTXwRdfP\nDpVQh6kVxIEdDulCjdBshTe9E+RRG31UTZM0cW5w05xpFmEPrykiQxKnSrWe\n/Afy6aCCf6BIrSMtPoNSw7bcU2qevbu4NhpnKiwFYfqBjzSJsjoO5qK9iGS5\nTeAZ8QQFqbfAk17CWo3Pym45YE33Q/fb6LsA0ZfqNGVbYLl1+sx6gfIG8FSO\nmW2Wpk/A1HamFH+MAPHvYMOwk+Prn3YvqNhqc4Jma/IgKIgkvSS835FVZqA7\n0cmxIiaWim6FRpWj3f/pWbvYlFp4QXzqZ9OatUOTFKEittzSWjA14SzWgLvo\nTe8nEaiJKGRvCRnUqCbpb93r4Mzc/PSukPkwhnzkJExPlyIg6JXW1NFlxdwO\naKxOdNaPoLbpEJtkBhACSCysyxyIfOSv0SruyOksmRfrPpIhXdyu0D3epm5i\nNh12\r\n=VagQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF3dic2W6tjXNZ3FNZjJ0mepZduMr+IZ8U3R3KmLLdeaAiEAnfkKQMY0kYwoEJo/N59oXXaqd83G9jrZnx89Gcl5dws="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0_1624437167198_0.04676328374668093"},"_hasShrinkwrap":false},"1.21.1-canary.458.4f8297fc6a209e7a1e0a74d2358d1b9a45cb0eb0.0":{"name":"@sberdevices/plasma-ui","version":"1.21.1-canary.458.4f8297fc6a209e7a1e0a74d2358d1b9a45cb0eb0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.0","@sberdevices/plasma-tokens":"1.6.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f8297fc6a209e7a1e0a74d2358d1b9a45cb0eb0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.1-canary.458.4f8297fc6a209e7a1e0a74d2358d1b9a45cb0eb0.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-jEYuME0fK7yKcNWOaWhFRVDBQNE//CFqFH6bpOfskZWfc7Ci3DA06efC4SLJywiJf1KlumDCot4+p8OP9Q+/8Q==","shasum":"2f373c8acd0fdebd3c9b4b0df34c0b35a0c1b87d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.1-canary.458.4f8297fc6a209e7a1e0a74d2358d1b9a45cb0eb0.0.tgz","fileCount":468,"unpackedSize":982065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vPZCRA9TVsSAnZWagAAmLkQAKDblRgLEnO8QQsaP74Z\nqhDmGESOUkauHbtRp1raFV3WVjSgvnA9U8SrJXjrgilS1yI9xTgtbpEzEav7\nt6S+qQ30c6X9gRtBy3PzQNv1mSDvot/kzc3P4gDqrV3ffO9IuyMLSr2dATg9\npSVMeP/82bRgXuNZBdlmKX4JZWZAT/zi96uP5YFRVWoknwwuGR3ULVW/zoH1\npxzvqkI+ULckwbyM4oR4OluPtxA5UxKxSGHrynKvo0gxH3WRxe5kjOuqQCWz\nzNZ5pvWzydPEqR2SfSFomyaC+LX5RA/LPR4/RKxvhInZ956X/cDqcDlBaIQH\nSacrqtiMd9Hsg6VMiC8QDpB8VnoDUs7Xz/anbAil/Xd+b8hf1lvCFgkJbHXc\nxpi2cWXgjMQLT2phOJUGMqTH2QbUKRLMP9SCttxpL2KuCOOt1KQwGbEVsH8E\ns2JNx2sPJGAZE1kROtR82PBNbtvhk2En0OwIFMcMVjwkk9zkbJOXWfqt+NMc\nlijMOPYcEDZCWiTdgZQlRDMi5NmjT+uYqJq30wL4u/EeX90vq2iKYJwTjPCd\nbhU00mrCNmGvldngf0q1rs86uTwNjseUI6l+4BoZfXB3rOHIzqQpkL5slJ8H\n2z2Z0KyOUEKctVCSXzW7nAqQoL9Ui+937KsFM/TzuFm+GrUg0WAQ/eZWmFXO\nNjOn\r\n=vPl/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTyyCxsu6xgXhfkdXX06oOiiGdDlSXqtFLCIHqCqqgfQIgAhqmgvZE6ddrTqhLcEF6pxiIX5L3IRct8JAwiQPEGjA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.1-canary.458.4f8297fc6a209e7a1e0a74d2358d1b9a45cb0eb0.0_1624437720595_0.3867383171074905"},"_hasShrinkwrap":false},"1.22.0":{"name":"@sberdevices/plasma-ui","version":"1.22.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.0","@sberdevices/plasma-sb-utils":"0.4.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bba388609ef9b847370a39d642781a140148d535","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-itSqsagMrSjlULDFTNEkveax7vo+HYif7RXegdyBgYqWPlVI8pjUL28d41WB9fm74DdMPhAAqAmzCWSAZ/omfw==","shasum":"c5d0b54a41195b034403507b75b7a1de89d8f490","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.0.tgz","fileCount":468,"unpackedSize":978395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vTJCRA9TVsSAnZWagAAgQ8P/1exSo7NUZKDMp+NLSSm\nykTuOBzFHmwJz0OOInoEIHAdFQt6P5HBWxRec26hM4PZkpRM6S/BOXXKR4hA\nBBQndO3tKLTHRO61vTrbA2MTjw3fkxIxzKA7pKvfKQafrme1Gq3L1GaCJh65\n94WvP5wE8Tl6Qfe5WkndOUKZvr4CdK6mhLwfXGLxZYqoRGZqYEnJhgUb2hlC\nPqc3oioY0mRGzYXESWdi93k/BLIvVMC33Eq27j7WlqScAYI6pdJOvitR8Rc8\nH2GXFwaeCwbJvxS45R6NJdk4ooueaUmuaDPN00GjtGkE7qrG1i4O2FbKPMQq\nqbGRXZ8aTe0/3FK+kBtbzf1cNvYJ3Pb0QDO1M9oEMK5PTE1zFJOJsADBIOke\nXSRLJj5gqGg5tiGEbSscc2N8iOLJ+n1891T651Hh+zy3WMfA5qwIyR0nv+Du\n8Zd6oxQ+kgyJaAbwK7FV0HrHSjrIH9ShJgDe5S9EnkqbnY53M43I2opY4o9y\nNVy0YUJDOVGSG9WucyLxHmpQxjvEZlRaeJVfW+6m34FE035LGvLpDCa4iaRD\nIGIvrLnhMsTWrCTZbGQ4h/j0q377UeoI5sT9Ew0ZYmllLR2Lp2hChZHAPTxu\nUKHE9u92bbH2nBVyJ+457dxhqgttVd/R0pbEbKWrbjmQ3iGL8kidvJprahK5\nD2PD\r\n=ylVT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDiZIuoGv8pyfAipYPkp2qhaHaZwY2dv2RyDpqtRfJzAIhAP5vmttjTW24gSwc19hPad/N1wZaxgKFE2Wm47y9RoGJ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.0_1624437960397_0.725247989599126"},"_hasShrinkwrap":false},"1.21.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0":{"name":"@sberdevices/plasma-ui","version":"1.21.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.13.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.18.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","@sberdevices/plasma-sb-utils":"0.3.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","@sberdevices/plasma-tokens":"1.6.2-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2a3716a35c5babe5f07c734d37bca85cd0a1c265","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.21.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Lmb/aPEV413qejJmTlpHfv8UOv4SwIhr1+j/lFnmL/KgLhMsLKQrvh2pbV3kZETnRN41CTUri46vuf20AnIO8w==","shasum":"7ea00d6cf6b4287614b455d0e8d3a903d23193da","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.21.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0.tgz","fileCount":468,"unpackedSize":982330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vhACRA9TVsSAnZWagAAueMQAIQOovsA6bz9gMgfTll7\nr3Dh524gL9b5ZX5MlxeIcv6xOJRnD2WPwp3PVlpb9WT0AOVNZswpnxNw+ii8\nVeHamY9n5VWN5o8bsD6Ju78ckWOUw28I3KOMlcw4cCONxylnvpiIQXt8G52T\n/jmteovjrzY368oqXLw5uCg7KV5nwLtfkvPCl7uE+QxiW+h9KZDZAeU0JU+g\nmQlPOJwO5LWMOo2g8GE7o2IyKZGQShtwYLojYokGVskxH7e5mD/EdT+hHVxG\nSczKNYy0lqJ7yqfH9UCk8pahfKa49YemM+K823mWIDT8qbzVgR5ABu+styL0\n+63hxHjHmjOzigcHT0sESfmXVCbhOevDN+IZIUNVP89WOs1wTbpdwVym3Ayb\nFDy/x+3lrkRDARUONtZ5QVWpfVmCXlqmN5VEF7iIcmksYkyVlLRiYps84Axc\nOF3vuOZ3o6aff5nqTa1yVfQ4o8jnIvehtxVQpo9vKOogpVdcwNMU8GA587zy\n+KgFD+JTSidVfFG1L11ehMINFD4P+vZ07Y0Xsig16A9iYhBwT0uylHFgYGfo\nEnDCIyckyOOyba3lltpbi5+C5Gui4STJysGvJt2bb3NNli2XV8VJEsBoS9il\n0efKFv/O2tzOeldUsE3NaEquwuSvhpYixCkfdKYu5r/AWpyu17dnujRLepRY\ntg2t\r\n=Le35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc2qiYTS5lGeHDPUXKsrpR5v+Y69QmO2v33QdbnV+hOgIhAKhhqd6yK+vX556W5IYHXGTwUpbB6mAvkAa0b7NmO5B6"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.21.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0_1624438848225_0.9268296162898646"},"_hasShrinkwrap":false},"1.22.1-canary.458.9bd2c56123113189405f30d3daa58891527dcccf.0":{"name":"@sberdevices/plasma-ui","version":"1.22.1-canary.458.9bd2c56123113189405f30d3daa58891527dcccf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.0","@sberdevices/plasma-sb-utils":"0.4.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9bd2c56123113189405f30d3daa58891527dcccf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.1-canary.458.9bd2c56123113189405f30d3daa58891527dcccf.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-7DfPQV/YDuTGGwcT1whM7b+aA23YEPueYnVgbp22F+bqbEmaH+U+3vK8MvvA6MCIhZbXQbU/QAgZqGnl2hz7XA==","shasum":"532ef9250475ac00f22d7572f711852da386b909","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.1-canary.458.9bd2c56123113189405f30d3daa58891527dcccf.0.tgz","fileCount":468,"unpackedSize":982821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vwUCRA9TVsSAnZWagAA5wkP/3s+9hUKPk5Z5XsIkAdy\nmdipm9iMXYLKI+CUNzy73f+rEB9BF3pZhEjsOsgLw/6fwXPjEoqv2M/a0CmR\n912re1qPkc/6bU1EsbTa0+V8iYox7QPeGslBCjMcHfCnZaY0CzekM0f0K6g7\nNC1nD/5TJH/SMKnY1qOh/fF1WjbkdeAPPCq6G7QJvKMiiRqHV4LTfoVmLoKW\n8nfuqS5grkmG0ng8LLFgmJqCd8Wyr6iQLbjKRYOO3caf9hDJJdPPXmWF8MUg\nMqm9vr23/nHtUv8tVzf9gtk/19q5ykyOdJ5CHSnDos0SCxON+tmMmkvWQeZR\n54M+98B7YKzp0lnGHzeHqAIaeWPUNgDcp/kR+8nqstoO3GMSf1Zrp05Typs2\nMbSgS5uCCcr44HG/kxdDT75Zay512aUftnVeQ5TjVSniE5NfaFEbH4IdxHRc\nn92pXvMSJ75AtHOzcWKS+mb9J3gkNDLDU3bpqASuCYTSn5Yi30uYC9h7NzSE\n/lBHEfzq1OpJimQWpEJ3k9QHpas8T77pLJgXoOf4opDyVrAIlLgELnhBQuw8\nHzLnhkoTsYesVLUyGja+QCGJHQkkhMznLQSIveFMJDU9IyKLW+8bQZiOTFPs\nLqMhA/aB4JCRVBFA+ZRRN03YLwgkkH7Q0+WVaKbaN6190EqdhBmQwojhdTVZ\nTY+6\r\n=ImhC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJMdBCjgrfZQ+e7pSsRWHEPgdRD09iTWpTA3hOEHdKyAiEAkdD+2TOMQlxMbqaipw90dKiJebmMCYOMlrzSMJ87kCw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.1-canary.458.9bd2c56123113189405f30d3daa58891527dcccf.0_1624439828349_0.3966828975154493"},"_hasShrinkwrap":false},"1.22.1":{"name":"@sberdevices/plasma-ui","version":"1.22.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.0","@sberdevices/plasma-sb-utils":"0.4.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5910599b01f870f7ef508f832a8ba423bda628d0","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-oLnzhfU/SE/DPFc505HaICM5MsP01KxMbE3mwn22ZZUZZ2dijcCGPbWf6S094MI+CIlf8cvmeuI71n5pw4Aqpw==","shasum":"a8e3f279e3ca0206869021ba17520bdbb58d0536","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.1.tgz","fileCount":468,"unpackedSize":983034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0wFhCRA9TVsSAnZWagAAkVYP/1f4B0wfKbAY5eZGH1Vv\nyYjdRNgRY5LTm7JHU4BaLbJKT7GSbNkf8GhHYN0A49Q3kkiVj+XPNz/0IXLc\nOhKPSkSonbFgM3v5I0+8eeb74s+zTlHN7YBrWbSwmBaf5Z1Q+K7KgAxg3t8l\nVsiloVqtWr0l4zUcst5thEI8VLeBV6j55/qstlmRKdvy2MZAr/+e9zqr8/ng\nMCg0g7JcAboffvQnsSoB0SUe/uwtFmecYSz5rDp41XIHUQZxqwOIsdd8DEgv\n5V1zNc116xU1o5e2GL4YNUg+eWpJVWMbjsIjf/opn5gPecc8Y467PUk1fAER\njmMQhzg4WhnGmBUBBYCZix0dkF05xbiwWtc2c/Dlsy4Mvo3OfxWhULGhbKJ1\n1WITKKjTU1+ibGJHNoMErMbxHm9vUFlektgPm54B62KKoEZtOQ4iOyQXmoty\nyyvzlY+WkmoXlRgkmO1G7sdsabu9mhM04Pju5Xv5vswyghr0EuMEDLlDYxOm\n1LmOnGEEFbSKnSai8MnaDYSxxpuWUSDmcbxmWPb1s6uvklk1gXvR6tgZs1oa\nxJnW4o0PkqP8guiYnzqxsNY79GcCDtAPBsh22JsyS10pspi8trhqYQ8Pp4ju\noKvwdizfofav/mKoG4dkMfml8iSHYCF4lnEuImmvfTNTCTAehkfIlLXhBZiC\nLAHP\r\n=uk/Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJm3dXgbtDpaNabJ6Rs2CsunG3lJRTO7LYEJnJjbwK/AiAR1k3P0j262/lax1Mv9/C5mJQmX/9ecU5cJ9xYFqQbxA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.1_1624441185133_0.02143175493161964"},"_hasShrinkwrap":false},"1.22.2-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f81843f50ae409464ae6ed655ffeff74819f779d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-LlmZsFx7X9KY0ZOeerzM3tTUSPZ0QPaL8YWcE1nH0jkipCOKX3T5Kbm0GQSDCKvrfmXLnYySnyPH8n4Jvexihg==","shasum":"3196404c8d48115f619219db61ab5fec1b253e27","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0.tgz","fileCount":468,"unpackedSize":977809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0w3ZCRA9TVsSAnZWagAAjWUQAJmljIoU5NRfM38DpZ6u\nLz7fqLgXRQZY19vn6FqlbW6iRhkf91/hMZ+5zRYj4pJkfxoIc/OIIQVWY8Kg\n0FNZQ20rXWZ5mD4lXKx2rgSQ3w+OCjto26FHE3mFl/DN19kOYqgqmfqVlNcJ\nBIPVq0kQfjHQm1wHQPqbxK4/ya3KWJXCJ4F4MHL/XeYh3EkHdLQMYmIMSXcD\nRGefoyUIMTrXC0b32CSa466yTbfhkTYd0s0S3L0tAvLN2W2K3j+txAC1dMeD\niG9uKDn6flGllrgIM2dncfAetHP3mIXBxup72ciE3sVj/0htLwNgby51IsQh\nHHH3dEwj3pngI009g30fkPS183qykDQeiGnuHnyoIM45ya7ELzs/cs3dFIRJ\nSHaQKIiXCBbRi6buWlqM7LOJrpzhYc7OfZ/WYGpk0G+lflkaHkt6ALGPDjGV\nY+TedsC9VmanzsWc9SqPyApQuSMtLvhUBj/N1R+vpv/31TRnRhjf2iqsynnz\nYxzj3/WqJHp5aZXM/aTfHZZekMqb970ab2Yx8by5o8Pl3cD1HXhx40gYn/iA\nBYikRpj2OfYqhTt6IgRLYpLvHd7evGVFa8748Pyr2RUbMUS+ihxWL1YnYC+U\nNIaliSjmCaLZ4tqIA5rgQgB1AQSmynyh5pE9htXNoALZbwg2zXIOUPNy/bEa\neN2g\r\n=AAe1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3bmGr+Ut/OXOwIj3XO4UaVpkW8nVQE+OmEZu75nGg+AiEA5AhRfgzr92AYkeZgjIQhXGPspHTOa+9n5hCf1jAS0iA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0_1624444376488_0.9385832394739744"},"_hasShrinkwrap":false},"1.22.2-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6139edb3d5d7dddc8f86639295e8cff69141539a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3mC4+rLSjG9en8Mlo16prg+DthoWAx+lyPD6ngsRLiAo4kFv7ISAlcfZPrH4e2+hE64vHYwGU1JwZNecFbcTZw==","shasum":"898daca43884a4623c96e49214db589a06ddd945","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0.tgz","fileCount":468,"unpackedSize":977809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0w+mCRA9TVsSAnZWagAA7NsP/jHDlsOqQU4PPpWFxNli\njwo/Bk2ZxkRL+jeBwg9QkYCjvnW/eEe6CI+gDPD9wv4yohK6Srkl3NScPv+2\nDU907mLNOe/yY1Uxxms4JmL5iTjwRRStEx7Xt5wBqvHrlNTrA9/WD87xEQZ/\n4XupLZcF0d59lSf8u1lDmqUmxWUcOQAiJuRb6WHliU1ohIb3aRBgXNcKvIBc\no+5KsDqxCCuvcQLiTFYVqRGGM4h82lNnMj76j3FWEEJsBF1wzph7RMt36SXb\nhYCuTXQ6xRWiUarWsRy7+kFtjEXlYeHozicXDtwbmUWgmxCSpYf07qgenpbC\no64j0vMHuFReXyUJldoFCukx6AQI2v/HBD115cxg5hmZP1ZIgBUqwahYwWqP\nQFiIbCCkXuTWmGMsg4pvhoPDguBtTbNXtivftQsqbGHSoCXuvIAc/8rE+VPJ\nRsKYhanxkpyz7Ce/uczHEAwqPNaarMSlP8ECSy8J5OuqURGVAljHOQovJf1J\nCZqEw3emkUaOt1eGpQl8x9hi4DjfUysY3m2wUvR8adqryAqhN3J6GqqUPVb1\nLHk3n4R33GpPdx7fXoPWen7ahnIoXoljuMUASeVKWb6Z6Jq9BGnnaDp3fEBt\nJG+4cGyRTdGT9XdNxKk0t6dcCVz3kZ30B3o+HeVV4zJYLTESfGlpEV/jFYL1\nDmZA\r\n=NxCx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxLHB8t2ny4SOdkcj9VnlRqMBUbkrRsbpOMSpiJ7N9zgIhAMZT0J2Qq8B3RPRiyPHyZ1DSOlgkXkJPYyWE/vGFuK9K"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0_1624444837955_0.9040904167118502"},"_hasShrinkwrap":false},"1.22.2-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"16f652b6d1c99667f239444c6a3c074a024055e4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-WSO44NZK5XFgjBamfNFuuyrYZnCb0Oc6ND1ROUuYeqK36exSPWAGpVz0hbslQCDj6ZSSJGw4M4Fb/LoQs2+6Tg==","shasum":"267dd244b150a9f11465b994526b6dd46c87539f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0.tgz","fileCount":468,"unpackedSize":978529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0z05CRA9TVsSAnZWagAAyLUQAId2AVjbDxUa08wT7OcT\nZgb8jDmP4YDH7S0nrpCyADkoPMOB7qHGeZzuZaTrm0Z3FpxAxa+yQ19AnyvG\nHlRuuZ0LN08liANjogji5vvhJ84dC2e6qCQ7CvMXo1B/IoxmugA6+gFkaaiI\nVcH1Pz4MJVW4U2WJatgJmvqDNnXCaqxucGirtTPvbEctO9hv4ZEJ0Q+uypDe\nTchm+hCDd/Rl3ifrmdhJj7ItO1RusJFvtzw5g8KVmFjDhq1vFO2IdxoG5e51\nic7zbU07oUYJQG9qc4fND+um+pLQNybeT4eHniu4wP7O2DnnEKirSfqJhJq5\nQurUx5yRaI4X7HHR2k28oyoEriQv7BMeChB/wHbQs53iLDXRvW1dDA6CfQoo\n/7Yeo5xK8O3kE5gAjSL69dZ0fmAKuhRZzGGg/sdsPPkYXmZh7kT03IqIL8HE\nd2Ba5JRT7RUgnVeuNR3uDK5HuiDSYoMtC60DIqSygRzNi3K84/NNgTXwthvi\nchy4ruzeFVwodRc8LQLmezg5hbKh+UsgEx1p5oMAidpciipK+g5PVoTf6k0f\npkwWF5NaZGmJQQlO0rC8Yqjce4DZ6xJMQI/+DheiUCuhsCbYm5pSpEGVkztq\nhYmQaR8fZzs2IpRvucq0N4038q8Enf3GRfdroZ2uRy4iAg3rGSV+5PK0ZVwO\nMLL/\r\n=OzYM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUdE9DJqwZCVBZ8EkZIWad5/US6hG9vJL46fUrZb43IwIgVzs2wpmOUeF0vHqBWo1IczXVUPeh1kZbup68/HHdW0Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0_1624456505223_0.628708575137322"},"_hasShrinkwrap":false},"1.22.2-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e4e6793822b026428aea7d18e5294653e12f466b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-4o79xqigbK18WsHTGQYoUDqqaloY+NuLj8CJzQBI8REas1NpU0nNV8Ca1/dpgQREsZAs2pxQyQ9Qwd+QCBnVCg==","shasum":"3280aa3c5cd71b596f9010773b7a7a3cdb91834c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0.tgz","fileCount":468,"unpackedSize":978434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1IIKCRA9TVsSAnZWagAALR4P/0rJPKzhsZZg8QNFRYuT\nfUskacKbtWDAwzAttrOc3PWVkFiYis7tgdWoMQ2BYDzfLR1UCm3oyInnmaly\n3HnesCr8W3WfDiINI2AP628bx9vbDzhnxwsa3g0fB56dkV1Swv9GPQbxCaNQ\nKgxe1eqk+MBOxRNk5pHlUdmO5aOdMbWGj2QV2OnmAxbUsMehT7yQwYkxNqbC\nc0SxEvzDMPr5C7k/GVeRBVdyBHLTTLL2Bi2P8N5PqhQhyJeOdLEukIrBM4/z\n5DNAE32IsikYLkX7UimhuZCQIpuhPFHp8E3F19RsgYaGEilagiRJG/pkv43+\nwzfj5nKpsaAIIwZ6eXClmmk7sq5J8gosV0KaobMtwiktpK7yMfs64J5aoH27\nnm5Tt8L6iZnmU6Kwe7rA1UK+WwOusRR+ion9uJ6WUE+jkPIsBrTUQ60cXHhU\nmQsTCElCp5Zak1empAP+w2EIjjog8Uo+0gu1Y03DTWlomTYKYCodWdGGkNf8\n0rjhw4ksRUUhOsS7pwB3yS4X3Voz9YIPVUjsPCrhdbDAAssUwrWqHIgdI7DX\nGDVAGTxsbYnM+vSSB6DcvdDlDgaLm9W5Fs+x40C4c81cLvPVIMIz7+dXH+L4\nG5qFRCxOofVuycvLxUAIhec4y8SHB+7x7jRkW8wxEvVlszRjJ9S9/rm35WiO\n5gr9\r\n=/kGY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7a/YErYrwNCrDuvirFhPUYcnRe9OOrb2Z4dzIaZmiWQIhAM6MwpyxrzA1fws2SWfcJ76ffPHyrPbR6kXBFvppIvE7"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0_1624539658331_0.46596829579254884"},"_hasShrinkwrap":false},"1.22.2-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4eaa24c9fcef9f132d95d2e8991b219aa6230f80","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-RRtgKBoPsvQ9Qp3wKHvWxpTUR2vf39/QY35gVV+UHDByJ0F19R1PUKE2kqrydo+DJR+7UcnvcQ8XJmgBBxMI8A==","shasum":"86d804f78dac5821b308ec9f1ab7e8cb41c47a77","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0.tgz","fileCount":468,"unpackedSize":984048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1NFeCRA9TVsSAnZWagAAaRYP/2YGYbBmzE0Q2uU5t+lX\n2UhM1xOAM8DI79jAFNxK1avh6cNviSdcC2DbYnUX+9ZqhxSA3OcihGQwFvsw\nDfeqHQAbOceIge6+Ac1/3vL3dPLsIvvnZ79j1AteqzvERaQq7Vrrpi23yafY\ngn7oHAV8EEkHyB08xelRWBQ9VvZUYVUE62/D0D3CB7xsMoVRmWzfoYEhqTRF\nWNoopJy+7E5NLM+qbJvrlj/RSZ19S3hQTkQn5LviRuN5SS6ymknKFfBZ1zDw\nW4GgPvis+1RxMMwZcpcTWtb7pH4bUFkTF6gRioTI+kG9/M8y+RBpjlq71RkW\nMyjtuv8eZFbpHwwnqFknJuvjYR6TtK8t1sl1++XpDVYv/8nyjYfVmpKz9xFq\nxsqcBz4Lkbct7OVjpz5RrzQKYD2aSbk0ffOt8EkqtjYyIflqgMmD9HUsLHoc\niAbjDwc+H8zrQ0Y7YyIHiuMjU++gBImUxonR6gKzwJowZnOFZQ014l/cUNxY\nF2OGX1r3jM7yz0YXUls201S5CPWDrP6g20nLevvdujIFmx1+iOuF2kqDKOWa\nh2hJvRRxgRBCfRUb5iOEoiqwQpPmAY4C+C6wnA7Mof/+85R1NfiU/ZZOksCY\neUBesAghhrTC4sXPyD5vpJM9oClhjjoWTRPR4hSYiz6mkmMj0jW+2OdidkS0\nq0zW\r\n=bKoa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLfrYs0azWb7/6TKGCTOPS3ll6rTy+vVLrPJtYUd6aBwIgQpjM9qycLTQgoU5B0hfAUnNi3REZ2/wE+KphGFRAMgo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0_1624559965910_0.2619748045599104"},"_hasShrinkwrap":false},"1.22.2-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0","@sberdevices/plasma-tokens":"1.7.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-tmCQhUtwHvVkyDEsqIN1oJ1DJpqlhhJBklEZw2cbBk0Uxqqf5qRke9jwPblIioYHz2zmFcdjH/aWn15FiN9O/g==","shasum":"e4929dc8ce72e41c39685d3b77ee4466ec487f7d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0.tgz","fileCount":468,"unpackedSize":978434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1c/5CRA9TVsSAnZWagAASGUP/i+OlsQFjw036s9r3KO5\nGl2jTGjiRVxJPsZVv6E0nADEH0teLG67Aw5I4rAfAJYRMW0YYsVxHeqKm90Y\nOFBMC53PKAMBCt/acmkr7CZBBM9zRCGkNErf3md+x2vdjtuJYPve0LGL5U1g\nno65L1RcUkaxxXas58jdaVZNz0WVucoRm+bGWsRVRZSFwjALz+aXvyD0IGNP\n42S0RPiYLUAunvb2ePJH49tFxwYTkyW4uKONs0XFqxKEKly1X/EyLAX2YetA\nuq0w6hYBnZ1yJsuNwekcLLroo7t5787p1CX4I4QXaRTzBBKFPV1Co5NVJNIE\nnwsLkPUugibvX1LAdgBM3gbLJY50dCAN/a7TbQMcsBPzhEYgv8XtB148r0ei\ndvxIaxG0FG2bhV4g/o/zI8OiEnjn9CuIoZC9d0coBXkYzfNCdXHeYYc3H3EB\nxSWB4SEGxMx4awsgCunIoo88idxXAqnrJLHZQ4uF3VkqZoGnN99Z21ASbyqh\ns5IjX7GrMTo6eMEM11vRkwd3UsmhYlsDhfzIWvClrlLY6yQ6VJjRakfztF45\nAWgjGXu3s/vsmDMDxvPqO5Wf6kJ6Yya7Gh9VUOsXmGaCeCTlfbhvtmulElap\n+XlbX8L88jeJKsOf6ZOZSgVfv+GtEJ9GBH0SgedTyCoEbho/J0KIWtoi1v6i\n89uO\r\n=Bn0h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGdbF1aEochbIEAkefUVFErTBHxhr2QHwUQVYJoTd+PwIgLnmVj76nSbemGytATRmo8q4SK4/xYk4Tly8omuc5mVY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0_1624625144629_0.6418649677586812"},"_hasShrinkwrap":false},"1.23.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0":{"name":"@sberdevices/plasma-ui","version":"1.23.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","@sberdevices/plasma-sb-utils":"0.5.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","@sberdevices/plasma-tokens":"1.8.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"49b9a9eb68c395d35d9acc5dfd2039a15f5928aa","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-FFELVscYAxzcNUrC3PT1r2/8peLHUl7sn1Z+1rKXL6B1p4eiLDOe8C3EUsTnQUk6YOZ+h+qJNcxM7p3GkAhvPQ==","shasum":"ffb8ef91e2e1c67e18c46ecc2b4556e33f5ad3d6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0.tgz","fileCount":468,"unpackedSize":983304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2ZzDCRA9TVsSAnZWagAAKRQP/3+bow8xaKviCqCflNrF\nLJ0WN/1P0qEihEyABVLiplrXFaW35LCeQv62RWaVrNAMTxPenZIZf3t9CBVX\nNAy2HlMi3f+DofjGhrgOdspHp5VghMtlyaA8/EVjcqN6hgDvom/XqwDj8w4S\nn25VRSR1fu1WGRURmcl7AER0VNXEsqQPxJaW+2kHTW62tRrU+zXYrJ0eGn1x\nSSXkK1RPG0ZLLkYt/DTef012o8QUghvMsDob6CJeRpfaweKSvRTXw2K4wqos\nke80vLumjpIs/0H1I2BkvETyQ3FVRf9hQqzgto460jpq2MchFVRzX1qokjzv\n9TWzdp4Ji6J2TYAk0PD9pScL31Pw0FJ8bc3elyaQ68+VEV0twWLV52dt5/G2\nAN6n0gqqYN39o92xWq1RGEVxo3CRTbxP2BuS4gpsQSmE/A0YWlKK0bAVvtGB\nI799XD78Yem8N991S3Qb2fDF5FXH9YB1iUl9+IZ/ufZQ6vMglMfqx6p1+Mf/\nlxDd2qN0z8RoGSRNZiw/7YYX59bOK78kLCKYDQ1ezcn0Zp+Q3yxKCa3cpViC\nSiHITKlexs7fZiDcp6APWs/YhG0HHAstYe8IS9XUdNY77O5jcpo69LbcwVq1\n9YgsjOb3NxZ0ejApWhi5SinljEePfJMme7a+HkXjCV33JuYyC1DyxNBJu5K6\n6aUD\r\n=hURc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGUO749lq7ijw39gELbxi64yybp70oZen9v3+QeRPZKwIhAPce0pd2fL6FVn5mzYCXnku0ake0dFpQpYNQyI1WOZYC"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0_1624874178870_0.16338259314417924"},"_hasShrinkwrap":false},"1.23.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0":{"name":"@sberdevices/plasma-ui","version":"1.23.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","@sberdevices/plasma-sb-utils":"0.5.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","@sberdevices/plasma-tokens":"1.8.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2596a0e422aff836305b8e724f95a203969f5379","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qm+oJV+BYocrzir0a8wVSl3HtR4jVlmSftDIBULSzXsldtwSLaeFbTCgHGWCHx7G+Rk6neHqJrE47KVCJrqAIw==","shasum":"05a3315ff3a3718c480550bc40818b5f74e1f961","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0.tgz","fileCount":472,"unpackedSize":985419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2ikZCRA9TVsSAnZWagAA698P/0jYXu0vuFMYJdA5qMYH\n1mcK6csm6M6J/FHkmU0aAEo3hZY8J7rcqjDcUxJ7UKkv6dXRX/U329QI9aEb\nTIw3aNYru4rGv87U7UqM9Myp2mZuGPiDfMyYW43lTnyoY+3Dzz+VITLA2gvU\nokdo5fhsEAMq6Ib+Q6wey9ZrZ48UKFxSbE6sZyY1wq/RcElig40kF/kmtSw9\niOs3PxmgH1WITBEGYyWrNsgIs8cJTYR90221QTFzgkalDo0+wYJDup1WXvFC\nviykpvS7fa6r3Y8vKyJ2CHv8dsRRGRQzkBHNs77XUuO3CX5KNmd9CEgV8yKZ\nTGje7jpZLGH4Eg3dLc9F4KNPsd6uQT7VqoSFr3485iiePs5IXYoOernAN9Zn\nm5L9j9zPTplnexLbyRReRbJ/UBMTPm3TBVPFHOEsYnZNO79jqQ9vvHfL4XWK\n8VAGHyrkAfh1xhc9JkyLXCTBzmX8Z+p1mWDN2JmQo96jtieLustpIt0NiMl0\n9NHtA3wPXNJPxhqqsrNpcMTGCryJXSQ0eMrI/b6eRjZvdM5d5JlHSG2OZm0X\nldh4TzL8Zfr57aRnjyh16JxzEHnVa6idA2ADF76+SgD2IqPEnf07tGvDFV55\n85BQ3coMaRrjEkCtOUyQlQM2R1UHNnpLuapYffK8YEMgJXnreyLxBbsgjO6s\nuUy2\r\n=8iXQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHm2/TeuFgPIP0yslW8f0a8LJrX1tqkDK41BZ/spo2d7AiAtXsreMVCmsgKTWX8HQI2KIEY7mLqcRwXEvMh1Kejq5A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0_1624910105268_0.680468276181535"},"_hasShrinkwrap":false},"1.22.2-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","@sberdevices/plasma-tokens":"1.7.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"891e00dc399b37cc24d37819cb7a3e5841c39d30","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-wAtAMg//2VKNreJhebhTGaNMVoEtMH20wrMwgvgb/rvwlnWH3F0X8nknWTg6/h/qUy5bM8AnMG/XH2wJLUkvvA==","shasum":"7a0df241a71e170176d044b52c5d441ce2453206","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0.tgz","fileCount":472,"unpackedSize":980603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2um8CRA9TVsSAnZWagAAaKkP/1b6At5pWQeIqI2g/nNM\nNdPH07dquyVMIi5mS7X6A6wYpNI5qMpMWhSrRmmsHtxGw9Z1nGeeZIy2+AqT\nZPmHGAfo3z4VQoJn2Aa+LI+6Hybm/nKwXtkgC8zEV5TYew6J6e8qmLXvU4Gw\nBDBrXCyC4ErEWyi2sXt4JHTMRvfbuSU6bmTE3clPCJSMPXq9PIFORazrqsV0\nWcjkrT+1rmiKcMUqZzyXIljXocyxNGKyhgCeluG4UqyWXUB0toCHbwO+ggcU\nW6/6eSg5aYhAtTT45Qk6ypUzahNicRaouR5fVYkZC+qRE8aI8bPxLPFSLL8n\nJVZ6IU5osXEtvBOyIfg53cgqS/71X342Mau5dGcI9Crnr6dZtZCFLOao7BoQ\n+lJpIDbIgE73Qnv18YPdUaz1jm9XOndbeLnH2ojf6GkHJmxS/3rde+S06zxK\nTwAkrLDzkY5MCScBdxG/NGBbtbTm4wa1/YpqFxk/JNIyDPXuayxiKpv+L9mm\n37LHufL8PG+fjm+z370M/hj6ZFH1r9N7WXAHssdNa3qTCWkYblzT98z/gO53\noyKUFhIhwaEYoes5vsGxXcZKqXdfuDjqRWNukaQcgvnM9uMFopybVOtZ+JRD\nQsznpFq4IVKYkQaVQAgo2TAZwUKyJDMEdv4py6MPQ5uNf9obMZEt3P2I3Qrr\nKwaI\r\n=/SL/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtMTSSnmr6NAShCeolLf6pUO+R4ES4IXDl5eu5DlHE8AiAmhj55/narPtREbXv32VLq0upURHnGAHFyFut3JTZx6w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0_1624959419871_0.8798097876387625"},"_hasShrinkwrap":false},"1.22.2-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","@sberdevices/plasma-tokens":"1.7.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ff1f575153b5948de24d504553efe6001e71568c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-R+l49jW02FDqWyR1YLrI1Q7beTD6pwnNtU+QXtg0q8I73cf8yvtjKbK1JKIdYFrGJdw5AKr9bhNeSfmZR+5QoA==","shasum":"d12a1c1a416333b2ffd150c80a3bc9aa2893dadd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0.tgz","fileCount":472,"unpackedSize":982400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg20ABCRA9TVsSAnZWagAAIz4QAIcMo6hSvWarmj64fzmO\nu0OdW85oi+6cxkaSU92CxaBqTWlSXKv7+1mrcQuhXbNHRWcZfPyfWNq07BrH\nBW/Xvg8kkcFZZjsyZ93uBLbkNjzmzUULUQhOXu6lZXNt1EsNYedwi2/6cfpV\ni2YROSK/0vE2QE9ERmMPS4zrCNYOQ/25Wbl2bPoQAcSUWTC10VbH0Z1gNtx1\n8y2L6rIVxIjgcyS2lZuyjwaisfPABQYSRqKIrpaTlf1IIfnmG0rq3z6KR9WS\n/14nXubR7iMhXcNThtquZNpJ5IaR3YsTud7s+PMH8eKYWC/Njj1JHtiMqLFZ\nPNa7Va0VmG9CivZo7LzNhMOYAAgxbqqlwPJi9BbBWLvbPEuctaWpruniaAC/\nIik7QbtHKchXhEvc6Vx9dzZUJvHfJntHWpAK7RWYux5BqbPZqkYQRw2G4iA7\npfPlke84P1Oakzb6EkrLphroTtQludKVqxQDU7xfF2Iv2Jb/4kkPmF+PzTsC\nh/XfOqjkn9Ji896u04xeih4ugHqcJSvV417imWNFi9yGK5SgYNqYwuWffH4V\nRRlOeBVhp116XINO3yPCrBrk2NTxSHMQUglU4PpBYI2QgQgmn0Wb2gPFN6e4\n0rwVusaDXigcY4UOSXrtfzWKSS0xLexaiRwy1cpc9BofctSXLv2Lncz28OtM\nfhRe\r\n=f9Tk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHX+1EpCAoS6oPzoGUpZ8Tw4jlssfmHDMD2zcBJJIeXuAiAJM0x1z+ckJTfp8mM45wYpp0XJiMmWmEoEbWmR8F8RpA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0_1624981504702_0.024915257026955295"},"_hasShrinkwrap":false},"1.22.2-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","@sberdevices/plasma-tokens":"1.7.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"720093b9de2035b3ee48bf0032417b4c74cf5e57","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3U7Su3r90lNyC2qKDJwd8tbGXtjzZcCyiC9PpBDdqGqpXv0oSWZMTLN1VXJe3SJJsw1QGNEMRh9xsalf2Pw7qA==","shasum":"12f3e9abd18dec991f9a17cc3ad398c8019b58f4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0.tgz","fileCount":472,"unpackedSize":982400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg20VWCRA9TVsSAnZWagAAo1oP/1SWT5wpWer0ohwsyCM9\nMi+/AzpBNzX18+EJojNBJGTa7YAL1bstVoBCsEIGJYdu6pINs7A29wprX6bV\nWj6jbyFVNRcpfEKrtHN+kbzOvhNoXEZbgB7QnNwXrta64JrDdW9QvpUNU58X\nUff9vKrHUvQ3Md3BpJ3JeGebUWsECst9zRTmfXcd+uvR8H7D0yO85LG9CFHF\njwYd8DmnZgZgsiWueEMMZ1XpbBnv6ZOG+s6WOkjFdO93yrTUjW/gtqtdp7PQ\nSb2vnBihoir6C3Yq+GnVlvaNZsjD/rBaDKcZ31NPsLMEusDWO0oaidZnkBxQ\nl7gew/4M2RPmPMLQAwAaycfadgT91DNHyWVqAC8irPWX2JE7HzFUOV27Ah64\nscFQor4iyFgwbnnsNKzJjx8tzzkoF/Q3thdzvZFBQMeE0oGFodvf75vX8qZV\nP+3c7NwILkoBZpS3jpe8NSQ1BQwWg1om7LY8KROuMlEofZrniW48DOUAlxs2\nMdzEA+6soyF4H82AyZHLQSlVmk5hM2jNwXL+WEAd3a/3aM34RyncJrs+I5cz\nJg2h6+OGK4OI0beVgbMHM7uTOPbvTWal5CORA24x5yPV/k7RAE8fxNoIKmAb\ncQ6O3ZXdvDU9pLUoZ5Xs9YnEUaXbtYwNEdcuOhhnXx6K6FuFuCd+6YvRM2zL\nEzcq\r\n=o5B3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZoSNzWiNxpFei0SR7nDt2MiXfEWJwlu/IcGK5O+dWrAIgWQz1fM+Y85Iu4inVGCgcCgq5lztj3qpIpPCn6XpixPI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0_1624982869778_0.19300013003314964"},"_hasShrinkwrap":false},"1.23.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0":{"name":"@sberdevices/plasma-ui","version":"1.23.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","@sberdevices/plasma-sb-utils":"0.5.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","@sberdevices/plasma-tokens":"1.8.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"61a192453adbc68fa21d344725ba167f6018d475","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-DqR+yTbwILu1d+JlAMShIgBTorCl3pjZBLzYt8QXhg7Jung0jxRKX5+u/bOIsXmd5h16zdB4FmomtfkupPItHA==","shasum":"a1e558a24be305d785d0a3e151cba70a69c15793","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0.tgz","fileCount":472,"unpackedSize":985485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3C7lCRA9TVsSAnZWagAA3u8P/AysLpnrAI9JMS6U81z0\nhXGlVmPUMLiQROi3O5f08KYreUsXBa1SyiZBpAU6XbPDIib56mvtopXkL0sP\nJu9L7J9lcNch9eoq8AdgNnrsJX5SYWUmRikoO/RfsMSjjlNqWjbHcJSKbvzh\nm+96bJyzJV2qKy/LE9w/UBwakNtdHx4Xjxx+N6VfKiL3BqOZCITGIWdCsRd2\n6TusWCmI4YcUxqaS9vXiSWXKqAY4tK18rgpukqrjx6UbEP77JnwiCrQrVvlv\nvmfpJMBN5Pi8BdCx6jUQplbKiBx7hBvBp13kGg+stb21keivgRm3C0VEDj5H\n70imqdEqSxuRTsawsSRTXbctGGoQJddYJK0MUmHDtvEuuP9TXvXzTAHw8xvf\nUA5gHappH1XHIXL3ISgCttlbRMd89F+eq0iIGrouvIjx2fDzQEJr4xwfBtHI\ner4QPfj9jgSxw1VYN6dqCdwsCMvozFmomO8OpccUC+GFLYaIqLeNGLCJH2rL\nMezbBEFdaMqboOHMVUeCTVzsScPrkzQLnpxYPeQPEpqIJ5HSUeuOGZI+d4fO\nyqzdVb6ivBNC9bFwpPMn3rkdzFXoHM3EAkm8HsaJ2+YGVKN54/YTOPF5vVru\naEUbjSaW9FJ6SsfeT7uoz9ihN8RWlWvfuYnkNX+kpK85oYL8e1g1LO1RZtEw\niQzi\r\n=o631\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtcWkZuyjVa3U9F1GImmsvjYJ0Bwe/wz3/bmBp06EZHAiBIMkg23t7rr/DXUImtFgk8ch/e/i/gpmNTQGYI16D29g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0_1625042660438_0.6454547266967687"},"_hasShrinkwrap":false},"1.23.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0":{"name":"@sberdevices/plasma-ui","version":"1.23.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","@sberdevices/plasma-sb-utils":"0.5.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","@sberdevices/plasma-tokens":"1.8.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0fbee75a3d3de63baf01751a9a764a3414bb38dd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Flg45umXJhKyp5OPKTXoBzn21a500Qz/48iRwTzEemVM23KeXFhMLkZFpSjFqubBE1nHmmYbnLKs7GOiY8WdrQ==","shasum":"101d46434c2c20201191d701f8e28a20018b43af","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0.tgz","fileCount":472,"unpackedSize":985485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3C+iCRA9TVsSAnZWagAAVEkP/3bdXuFMYp7yLAEMHu3b\nlAYqiluwgFlV/KxYJn7RfNzxZE6Qt2VWIXy9WbAH7H+73Y+At5oH7/1u7Tg0\nr0ItI5U51fVKDba2W7FsbKlS3QuDkU1s5FviBWj8uSKY75YEZzeQCDtw4Jxi\n3NMU/OPH7LhTT9N1t5WdnBK8GNdPs1N1/gwo76H8H7i2CQCZu0we+PvJHWKQ\n2PDbwqm0qc6duf0CdOYHM2MqphtJ62T4ETzdLvnXIee8MtMZ+KoF9nCP3VfQ\nhlou8/KVG3L/AYkIuF40Cx/Iz793v39pGxZWmiy6nOjcmavT1clPLqlrBerQ\nHeOzS9vn+XdKaYQgmWn4T6Ar/xyLTKzyx6exJIE6Ae5x/yNvkNzfmtscOB4l\nLMrJpsfo3Lq/M/YqsU+f68VxDI6qKn0zUXiHXsl3wZBozvyxXnzgrEjoMnLj\nIHRj+IOe29Vkh1SBODMrF3aot8SGZArbP8hWIe+CFrXuTRdLKDEUolnPPogI\nWy7nQD8kDHbJF9n3a8uskX7oRc6cZElceFwx0/olc/eaEdehVbLZLm1zIon3\npViXVbXGwL4am1JN+jZYUMvoThp+UM9Gk9l7uXR81cxNou13zUbcv+Joh1m4\nrVDsQGAvlzvmsRQBV2VY703QTaz7Jz793gaXPj8nKauXxrHsCsJTROGzcfGx\nbcHz\r\n=/s4J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRJFrnEIs6zZEGWpNYJV4wKRCfp/0wCnr3DJTPzfy+DwIhANC69lKPIO3Z5SnUHKmO0msIa0hHWoO76bGlBg6akpn9"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0_1625042849865_0.09544919258176043"},"_hasShrinkwrap":false},"1.23.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0":{"name":"@sberdevices/plasma-ui","version":"1.23.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","@sberdevices/plasma-sb-utils":"0.5.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","@sberdevices/plasma-tokens":"1.8.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2701b961c731999e27695f3df1022b46421b519a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-QGZ+pGANptg+u4/eWLi1J/nGUcuig2A72DuCU806sDEsS/ovid9hH600S5PkxcCd3H1pBCQVaCxgzDqtcRN7HQ==","shasum":"ba21d118c4556b3ba2b489e083e7725ee843b7d2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0.tgz","fileCount":472,"unpackedSize":985485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3DKHCRA9TVsSAnZWagAAK3AP/jG0kF59NK1JE69QOhdt\np7SobWoeFfMh7me0izoMMbC+z9VTF6i+s55coldueXdx0reiy+UwS2gDdoUf\nvi5KAkEhcXvB7uK/X5BuE+D4XnNLwHrdT8h3JIZvSM50S1PPjFeRcBq0Ftmf\nSMVZ3ejHjPadtzjGDAQUOohFaUsToX4QfRh+rORwRSwAItQBAcxkAUQMZQOq\nLz4pPP2WNHbF7404vlUR+PlHpHm1B4PKa/iiepmeSL1kZJagCmuphEK00lun\nG+kOg1tFh3F5I0P/jXUkUMabCy6BRzNukUu8t5Znu9VwC3ztahStaFwQoBBD\ntWi42kE5cywTMLr8TCTmewnpXs1hpdwKCS+12/cygLuynKu2U3N/1otgBRop\nAlmxsrbT9xxj4I/SErc7yFobCXIfgqWjU/5fqnZQ8MFfqA9cTN3M+SRuL77q\nBca12qMpSE/7grEj5be2mUajcI91hEJJhY4cE875IyJ0aMy74RMteN1VG7ea\nq8KYzaO3szeYZO7YFft5VeolXr4/VJAKW/G5wD6E4AjwDkZNS1UU1WD7C8J2\ntEkOohHRsaPYJmS6j77aUPAiI8IrNQdlFXEDia5UWiW/aNMZerNmH6CBicaL\nG4G0oWq3YEQMUGgNOvriyTCf69SStUrAiCehsZLAggmRLzw5d6Z0aGKdd7/E\ntO2k\r\n=rbtd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyT7Z481rmZ8NyvFWpJE5p3ROcTXXE66jkIsNFtofWSAiEAv2ntv20xl7oUZxM5IVtwxDO1twwz/nzozD8kZNYcDUY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0_1625043590789_0.12465234721052054"},"_hasShrinkwrap":false},"1.22.2-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","@sberdevices/plasma-tokens":"1.7.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"131ae1ab4d7430bfb431b162f622550e42e4a166","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-yH3jPiOlSn5gVLi3j+hRU+sQZ9D+nRTuUjCMjD+763yXHZN/Gaw3ynDX3ao5XG2ss66dumVLrcMWEIawqisgug==","shasum":"2482647e34b7ba9fa6d496bbb32583e67660fbb3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0.tgz","fileCount":472,"unpackedSize":985431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Ei7CRA9TVsSAnZWagAAGL8P/38ucBB/xhBMVf4rPQ25\nNJ3GxagEymxhWKgQr4ZcKyFpQeu8desuUwonA3WOgpaRW/TQ7lzxJxrFjqa0\nz4u1mKWCLnnAAmpf8SHkEHsXU/xDJK2UBhzPlnYTM+e48OOteRkUMWJ9PJ6j\nyroYDIEUHarpr2dKETXegfB26uEuuJWA41o4MWKnS3mFRe7y7FRAjWJCg5hx\n+o6Fp2NlbTx3misGQupkJhHZbSoWlz1hnSjbru8qQAcHW2qYS4qH1Sd/W1bq\nbt7ikZz6UH1m9ZgBtEOw/DiF8DKH4bSXqAY66+quHl5D7PSVBiByhj6/ycdP\nG0pA14itRaJ2qikrcNemFa7qoCz9AIz11Dq0ZtDdXJfK+i8aYwMR6jHO0y2O\n7zOO1KYg1P2CEmI99IW/E+TUsPic6W9HolcwzDyQh7kMcEKis7E70CQwU+AW\nhnuRwm2aVz/U3AGNT2mXWX0SvIbc95MJs0gwS0VVIaQZrAvJBhyCHd/SJUk6\nsQ/DAyy0Vgr6Iw4Q+zF2zAWFgc/BynL42rFm5xDWl/UuP0EgJLV+4slJv0Ma\nidlJir34n2uYQ4FYBvd3Zwhycy5T+8BjE74Swc1kuqgB6PPGGtYuiX3A1yUx\nsILQWEWtDDdHOBBzkrsRIUC3NJbqqV9VonW+0gPjLZY7aot3PO7IGY6MpJ1P\nV9S+\r\n=wmh9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfBC0C3J+wfo45JKatH9itAySOIHkmvKJigIYVk9zw/AIgTLbaxaJwSHJEhnB2fZaCph6CHXsBUBOiB7wjg3H966I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0_1625049274894_0.3078837011313382"},"_hasShrinkwrap":false},"1.22.2-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0":{"name":"@sberdevices/plasma-ui","version":"1.22.2-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.14.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.19.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","@sberdevices/plasma-sb-utils":"0.4.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","@sberdevices/plasma-tokens":"1.7.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f9f9125d42f016165b110af34a263889f9497da4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.22.2-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-QqA6d96s6lh0TOu5sTuM2GgGA4viMYzRHivfTcAtAyEhuajsNuNHHrb22UE8EEtJ5/iBNQ8CjDFU1dixVL9GLw==","shasum":"22a133d27966277c4cd4a6880a2c7d24f410b959","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.22.2-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0.tgz","fileCount":472,"unpackedSize":985431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3E/SCRA9TVsSAnZWagAAE+wP/30dtpnE/+b/xsbIVMyg\nKProYpdx5FMepsCcJ9xPX9rwd/BRENtOoMFNRbIr83/6s7DEOxHRZxj3tMJV\n6aVjfxW76zNxjGcIf86En1NrTHqKH0Fdj30gqWV3T4Jsy55nT7sl4+wms5M9\naFwhB/clHFUr/wJQ7QPNNNXetnpxY0e2/10AtEKFSvJinAhUykoozrsiVAD2\nLs17/Izj513fECwFr4IxFzwEKE2xMMNTdMhh6HPHfXKUlVb3gBvvg+7CcIqv\n30/IKwWPPe8JERKuewlg+wfq99/YZyT2FEUSAgN+4CktAVq5R3bt52dc7/4l\nNzYiCYdutuMp82WbetjDSLbNm0belmLv5B9FKNOWnVSONL7k9ZgDVEG+c4HM\nK3agXSWYMYTUwq7tUzJLAe1Wy53XV3JR9V71l9w3d3aPlm4yir2BQoWY1Nz8\nEj92HQgwzW/N/QJPgz1NmRxBNDaXZhcc1rz4Me0iJbWtyNz6zb3HDtjefU3L\n7b+pGkEZM6CsxNcac4Tp2R6ekYA2iWBzV/z3YbQWl+GwvGidIDc9L1aH3pOq\nQcVWTuiqPKX7IoDstRoO7cd/JP9huAVSN4mxXGXqtpdBrf1ayF9MmxTA+TME\n+5+X9j4GTfNZrXgcyw5EW7cTNB9DOjkiCX6+RopetwmITx3+gF6XZHFMAfPg\nqzgl\r\n=hD61\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8gVZPQy+w2hv1fzDjOI4cx/B8B1Cs6/24c0e+/S4AkAiArEHULP8lyTkVglzJZ7b2L/wR9P/JWe7+6MuBQ9oforg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.22.2-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0_1625051090383_0.7431793162900306"},"_hasShrinkwrap":false},"1.23.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0":{"name":"@sberdevices/plasma-ui","version":"1.23.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","@sberdevices/plasma-sb-utils":"0.5.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","@sberdevices/plasma-tokens":"1.8.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-SYaLHj/BlGs5bhBolXHCxw0c8CbGxM0hOpEa6m5XdIMes/ElQieNytCOOtXCdkAxeWFsGsb8SO7aNLiP0PPS7A==","shasum":"7cc6baeaffdbfc6a5ad472ed28798b25580e869a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0.tgz","fileCount":472,"unpackedSize":985485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3IyhCRA9TVsSAnZWagAAIWkP/1pw31TpU88qyXF+ywng\nin8AUhNeduxEeAvuDYwOcDz9Yyh0IBWKpeChVSyvDOBymTgAcGSSvySHk8CB\nmN0qcacoLVr5/z9NURZuxNUMDZDPmig1ik+Ti8YFwSUKWv8wkvKeVTvHwTRm\nYsAT1JT/E7Ti/QtR2IT5AMZlrduJ/HhD/xPJcpUgGp33xwqRfME5yyerADIn\ndgUm3P+COfxw9CNRDzv9wdTrmeM4MZD5x7KO8f9QU6atxNDHGdqFjrcSUEGM\nyBiwnvY/qTxG6GkJnN4tx3A0wHDdU2bLqQ4DdXJnOpluXT/zGJcrf+/diPDI\nNo3QGNUt3oiHZuasYyYTnKZ+8QeUNu5ez9v0K29ZXwSS+u74VL99afqn5Qfk\n70AeDSEFLOoRx5G50lLUmX2I1I/WX7RUjRwCRP/HsOEdA+cs34O3bh5/y1d0\nG5A2VyCSob10JnVikAo1tZ4a/oCNmTElYTPiUJ1KgpnS3843KwDQ5Z0lqPG/\n/xdn7zVIgSROImGiuu1jqIFrm9vK5NftGZ4HQH7Y2VLleBs3qKH58yJ6WjI5\n2Th6wxXTK6iAEiaZgxRoUy7tTZi18uBzDRMHrmHXFpcCRtdlOlV1QDZXPEWz\nOv9m7DRcdA1M1kta4KPJTCkXzfTlNr5+mwkWU6Ts5Im1a+0xKCX0FHjS2NCO\neNH+\r\n=oyDe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcw6T0SUGnA3PpOPNAQBtDzOp3D/dhxJ64iDh+NM+8eQIhAMH+B5PrQ48B3GYs/oGDu9SNU+kcMylFSjpNIt+bqCjD"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0_1625066656798_0.6834223089113689"},"_hasShrinkwrap":false},"1.23.0":{"name":"@sberdevices/plasma-ui","version":"1.23.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.0","@sberdevices/plasma-sb-utils":"0.5.0","@sberdevices/plasma-tokens":"1.8.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ad573e183576d0c3ea1d0b1adf03a3852b9dafc5","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-mQ6vZUtblws0Mw/NQGt/Sf74DhE7CtLxehg6EIKJ5n2ssV7pYKBQILxR4LJganigR26z3ZWL4L58Av//0Ze9zw==","shasum":"1b7b2ab84183893302a5e38c4e323e1b45aac7cc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.0.tgz","fileCount":472,"unpackedSize":985795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3XGhCRA9TVsSAnZWagAA9roP/0SjlgDSpIA3enjLMO5E\nyBsyj5n9JELno3VIwdFCRZRc/T53zg6EjGJIC2MynnRqUgkDXcTKWnqqcFPH\nyogB9kRNJfKytsHvjQjIPAE+auyhQ2zG2oGvcUS0riNJy+iAi/xdMk4Avvx/\nu0gjqVhBJzinTEufz6fDnPKKShxd9VGPQyfH5pJz3s6jvnyE1Hu5Jw/rVe2T\nqIHh5onjWAJJQXbULx5JwIF74RePAKkzCfv6k79jtWPABiNCXNonCGMRIUjL\nCdxtnGA8+O40SfwsCWv3q+azKHo32YbDvlBlppkbWr1aGxD7NGYWlSbumeGS\nG5E5ycWX1KETlZuhyeT5c/P7jbSQ75AFIMMioeh8ThguSOFMJjKfpRusDzA+\nuRnb/4yi5s+ZMtausqDZRdyxlvd1yiHmbJptaptBIfpxt6gekcfrAjQ8yATx\n2prQwGmiD4Y5YFxvL9aw8M8Pw0DtkDL7KHZp+zcyjxtMCtDTcKm3kuONnC15\nqX8AZdvIGbLuOdfYo8FqeptpqqPwPoJhgFc71UMrmOZLWZo7W+W20v7ULTRt\nC+7RFWPl9fRQMEUs7VbHYmBl8aeApxiibWNAscxqr+48h9SaOmrPT4kJBx73\nAejSGHSAV1cSibi3uAMZuK4VQ42V8glvsdSBMO7tYVVimmI58lPbskdJRU7j\ngCQI\r\n=dylN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZHyrcjBDZLB6e1FQtbSzRSDfhiq8oh7+FMz2WDct+tAiEA0A5VlItyhfiiaUkNgjiwR/PvX2NHgtKh945lrbX2V6s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.0_1625125280690_0.9258603002602124"},"_hasShrinkwrap":false},"1.23.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0":{"name":"@sberdevices/plasma-ui","version":"1.23.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0","@sberdevices/plasma-sb-utils":"0.5.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0","@sberdevices/plasma-tokens":"1.8.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"736e8e37d0f829729b5a0810e8d3c659ad09f18e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-bvCbTNy7qjom/LgNMMCbggzeSUtTtBv/7ZduaIgEyWzFBR1XUMacXs8opHBsmjNZMW+2pktPkKbIY2VYtX/7/A==","shasum":"cc9c1040cb8ad333410094799c2a620f8dbdd1f0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0.tgz","fileCount":472,"unpackedSize":986011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3YqQCRA9TVsSAnZWagAAnbQQAJdB/1o/EP/zQGpEMdlx\nnry7UCEREpfXd6qLP8ARPlPwyQE4Nlgm/rdNrnpd6uxSh/hBwtcOI9z2X7o1\nbP+QNa/KFbb6oSuFLf4ZIDcECfBMma7wwX5T942k3qVXfq6I/l3asYp1R3Nu\n3DedRtk5lXfGBUWvil2r42FtB4wHiKEVSSRalropOPiOYsyPnptHUICXZzg3\ngg4+avY+tBKWkKvZDwLLr8Ji7xFlzkj3dj7sy15zwKc+TCAtq0AtuMwxgxNY\nZOodNJ36cD8NZgChcft1G+wht74XU1pwZpjy+dqYzvJbuZq7ZiOu+d4z6yiT\nS9JG21Jg9Yo4f2zFbrC83UlaKfiaZ0SeWpkcoi1uM/CeFYOlS8XSruY3d82u\ndf1FZfPOD5N2K70TSsS7TuqFSqRh65DOUVehntI49bKsbAwTtvFE0lVa6eM+\nmG9RmpEL+VGdRY4DFQWI4+wEjf0dzKrUVSuO3j2jU+PPUfKhkaIZ5l4JiGol\nSRROjBy/RtTRLb6OxnVBL+kwmjwvIFjeMXwMr9qIUlfD64VGd+Yo9LWqgE/3\nxzgvodrxypu0j15Rbw/A2S0Gx7wKA9zbOtbOI2yRlUSpY5HVKeS0x/EfK1c9\njBwfWuelS0+P2gwwvr9l95GRh5eMhvgxnu25X9M6FkHzYmmPvV47twVIJ/b8\njL8m\r\n=+xCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGATre/k55mjiVs9dboJ2fZ0L3YLYZQ9rgsd1d7KVw/vAiAOg7EYh2iWbUW7Tpo2i0prxJP9Qjqit7hQYTvtf6AwqA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0_1625131664134_0.5417869976882672"},"_hasShrinkwrap":false},"1.23.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0":{"name":"@sberdevices/plasma-ui","version":"1.23.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0","@sberdevices/plasma-sb-utils":"0.5.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0","@sberdevices/plasma-tokens":"1.8.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"771fe62e1a344f85420ab3d71bb7c865ba53daef","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-MGefbrdt12Bs1Oi7Opba3oFMErNIdWsVXzpLD87oLpy3ud1H3cQhDhA+Rj9YqFryB05hOf+yF7vz7alMwMI6cg==","shasum":"8c4dbe49858a614a6f2c525328ef85b30f2e84c1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0.tgz","fileCount":472,"unpackedSize":986011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3ZA2CRA9TVsSAnZWagAAEdcP/jOfj9Ab6F4NLhY1ZQgp\n8CBCATe35oRE2ldm6ndseYr5SVj/MhT7j1YruNG2qRa4EuxbSN3NhMhlfoeb\nJwBNW51sCPQq84xubPletwK4wA3w1cKTiRDGKq5gTzWVcLsHMjJoAbYOgfcS\nbrRBPgmKJsSqtki/Hs2owlWfrNm1di3EN72460g7b/9Yj4qVOGC2HfqIh5SN\nZcunXiqzwFj++ShhS7WZ7WPMqN9kCw6KcAZUKkE39TnVXIx6fGup1iDEPHZb\nx7AGNZHdXkYdqQydmrMr88N1UFqBh0TaO38Wm9hqFgm/lGpbaBqL1LDAd7Gn\nphCMG52tFcCEY9CwTW6kYfF38J48iqowQaw20+U6br2N2LXi+GeD6NisGRxH\n6bLpxjsjgYp3asbKxtvLRjI12mRNmGWuAvzckxPQlht/MRsaqXGFhpjbIcIN\nTDNwXB37+HiOuKDJ/CDdXzMouxOQWBTdw+2kaMgB0IH8NL94aqjmuJMiPXw/\n3ISq7jRmmGJu0glaM1dyeLudBsMruNdIn/a1gIRAXwZIJrWF7bLDB+h17GLA\nj0Zh10JxkDeE8iv9lhBceVu5kuDJtnGloXDWwkv/ztDbeMGci+zR7O1HnIbY\n5ISfERNB4SLKXX2VAaCvQiVIzoYqWQVkqEqK4n0FVUU/lVxiPTXnNsmovs4Z\nW8Il\r\n=vVZm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZSIhUGrwHjYVu/evYkjTImwmrxLIo3kDnrajmo35vnAiEAgxNYdSCphuImWxnjmKy4AT/5DtCv0rkqr2vSrkr3518="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0_1625133110034_0.7369156423709746"},"_hasShrinkwrap":false},"1.23.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0":{"name":"@sberdevices/plasma-ui","version":"1.23.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","@sberdevices/plasma-sb-utils":"0.5.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","@sberdevices/plasma-tokens":"1.8.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"07c2557be80b207998657232d7649c4ab4f105da","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-OFd6gf7pa3QatU6lZHTl9O5BRqouS+r1jZHHZiJ3EhjGx9dNSxBuiYk19bGeQaT+DlNzPyWXjGpKq1I9nb+wZg==","shasum":"16132055db3360bcb350ec41d1a2baeae7e9bc51","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0.tgz","fileCount":472,"unpackedSize":986863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3am/CRA9TVsSAnZWagAAfj4P/1WL3frCy4Z8+EzBDV5e\nPf8DyDQUvoBGLcvCfrIl1pHV7bsYMud/ddrv9v0MJfghy7jM2OLxrNuwOMTB\nX9sinOxbkx+8/MH+PpTMu8vCWhrlwySaVHZgsh7FrywNxWgS7/cFS3wL+fgZ\n6W0m3yeSaORFfRs2w6mvP4+3tx7JFJKV/nxtDdS7qs+IVzE4J11sEuomgiwb\n1gzztDgXRcapxL742f2Go7Zdd3x8qzgumWQCfVuWVdr5dIvwbLFwQbvqsIBE\nA8FbgOTfZxAF5UtNyK0KXXhbfbcaKdw9o+RvhbQiqB4FNkNxBXTdcAqihYpO\niI3+qN/TJIyJr4jdzHTo0Fs629Ftia1TX0fCCmx9F7+g0JSGMiiom+BncVO9\nH4Ctyuf50TBJPhEUFw/a0LlUVXmLqQZbmMrw3oAjA6t4nPvFNrfWctbG0DYh\nuqQFdXgi/v6gKxc1Dvj9QWLKjHG+IxDnaqrudD3CTjPQXyrn0+ypd3VKJTl2\n+jAMu6SDpp/e+HBH0dr7ZNFh8qaah2WtNW1krsF2RCPlTm8i5SjW9myf0oQQ\nHxeuH6LnVM7SmiyJTSt/KfBkhc/igWYqeX0PuF2iMcU6TdOU9qXmXoIIofBc\n3xtLIfOLOB/gCH2DnW3eyv+daqyCbYjNYvKO/b0s2eZsHfGoKUL7xyIb+8Lg\nRY5U\r\n=hQav\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNesEcj6WsFNy2t+pL8oH6nPqzCDvPpiK5svYCbzGMRwIgfbgVCM2yjcvRaVs249HEiG9XNEwh9hDlLROcWyWHl1U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0_1625139647427_0.45195558822988935"},"_hasShrinkwrap":false},"1.23.1":{"name":"@sberdevices/plasma-ui","version":"1.23.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.15.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.20.1","@sberdevices/plasma-sb-utils":"0.5.1","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bb4f2aef53af8af782b7dd7ba8b642b90b82ab2c","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.23.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-SYY76UAo6TdJvVL9AlKah+NzQ4/fzX6MnlS0jXSVvwjg/FuNxJP9oNKK1hTqAqijNOIB1H/xyWcYAb0i+u6S0Q==","shasum":"661a63a0b7fd672892ab108228575bf04a3da377","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.23.1.tgz","fileCount":472,"unpackedSize":987445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3a0uCRA9TVsSAnZWagAAQ1UP/Av/6iRgUn1iIfnC93hs\nLPA107nnn/iqjY4J0dxJHGrh84BiOzbn2tyhbTH9SK+DJxQzdXx5Tw4qC3P3\n7W+fFXBciqwr6d/kYMACCG2WbxWqZYHg7CMkmaXo0VUuBuii8RLHLxRyq+mX\nrHx8dcs4w0mBw5I0CRcv+R1XT1Cw7BF9o4k5J5h0gVnXDi7Xawp/XGvywcnt\nl7fphQLq4KYCIW+Iie0wQ2HYP+dYkI0w1KuBi+TYhkQtCA4uDZIAIYK4CoXV\n66P1kNJGWHb0784gpnZM1nu9HHiA40XIXMPbmp8oSXwlDIzfuMlBajPZeCyw\nKe1+7qPrGYOzUwAsOMjwQcW3tl57aTpWQICdWYrRtcx7KsBg4bNN+2OfEZds\ny1PV/nrq9FL+M8h062dnJMtn7zUg/1OtZUD3JszSLmty/oROvwJh3HZe0GQA\n1UnNp2WknGtyxGp3nJ879Sjhu1XSxIhlbxthI81bJ3qJLv8xoQGz7lKdCIaO\ngHgXJGt+uE7J+NRo3BzDV5c8Xd+c2xP5yzlWVpDKK6dSGLWm6L1vqHqNXJcj\nOPYObsL2n/LULJBUmFlzgUGccbD6h2lW/El6+KUce45vVP3nfypHfzCwufLg\nE7bN6B300WiY4SQxkQO1p8gRaKtWPHDdqQFhiORZ5Xfs/zZ8uLEyzdejLrBV\ng80u\r\n=9dlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBaFSR/a1BoSBznyu4MHmGoTWVpT6TSRaWhVrrM1FwEWAiBsd5c3aaFmiY0jboxkbSFyklNHQVpRf3HfeAT0YqpRLQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.23.1_1625140526094_0.8456464893658264"},"_hasShrinkwrap":false},"1.24.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0":{"name":"@sberdevices/plasma-ui","version":"1.24.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0","@sberdevices/plasma-sb-utils":"0.6.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1078cc49582ba7afd283dd7a942ce5f75ce6cbe3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-naERByNl79OqaZFKVpDfWkvDXxY9osuQTlC8AH14pE4TQ3NcUsZw7b2uOFCG/78aJHDavr3Q+0kKbwfCu/J8dA==","shasum":"5697dc00184dea78c41655997dcb1ae48d916da5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0.tgz","fileCount":472,"unpackedSize":984634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3iXOCRA9TVsSAnZWagAAVzUP/1CIvci7fpL3tbhDp9CZ\n6OH7DKX4cTuGu2ZWl2mR4uip471ehFJdwpqGolFyVe0aX/z5jQ/L5eCbWPBs\noSjLFCqYJMYGGkxPxFpPyRChPM8WS4ffbc0xAGpQqmMsmVEtSJsSB0FwGd8V\nD7z/bhvdSri3Pe/MfXLifCseQqVceFhACNam1QitGSzPQ4uXAHVFzEEsj1Ts\nW23DetqgszHAnCgHABLsG/C/jD8m0ghj7m4j4v8R5im48XWKWwxI6PYNWyqR\nzoVRfQqIrseuyHn5pc8NpQvJgZABP0/V/tsobylOQBYhTjzmNPpx2vHiS1nd\niAEAgE9WdXDxZTF18DeZHqKOp7QKI8kt9G/jBWef+JDKLDZw/Im9QsQ7xpU3\n80BSwgSw7E4X0rZFNdaLYdEoDX/bSHe6C4GDzQoCAhunCN6ygpOHdlKqKgNM\nkIsYfsQc5cfxzXdrdSR8/qiKbGqnscGlkAt0ITWC+F00xRr4qk89Fa5bP9Ub\nWjeJJN3S0FDcWClzjEBLw0dN2slEXCctIQRJ6edkPMpByvkSPaUSGDlMLMce\nNfca4omzAtcWiZYYjFV2TTHAqVWb8I2fsxcIoRCr5nCmC1U/PofznE0FfoGz\nfQo2dnsdwPnj+ftoyMW56pZuqacMqgzrCnlFbtmaJqiVwqSoT90T6NWmUspI\nwgS6\r\n=UVoh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeC3nxlhTT6i3ESFIrbIjHSS7gvJ/khgzOW0XMDYVqeAiEAq1GY0dukJJyds6pzvrjRwHbCoZH5KNHwTuu7RjFeHvo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0_1625171406280_0.2905528077085209"},"_hasShrinkwrap":false},"1.24.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0":{"name":"@sberdevices/plasma-ui","version":"1.24.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0","@sberdevices/plasma-sb-utils":"0.6.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-9hPxIloTXEwrBhT/VUt31msLjvKlDWAx9f4cLV6t+ejyRqdQi1t5w9JKirQn910AUZ7uTVzObFI2sE/LN9eZ1Q==","shasum":"c96e5def088a337bac4bb4849b76c316299f8107","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0.tgz","fileCount":472,"unpackedSize":993780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3sx+CRA9TVsSAnZWagAA+5wP/ic/lU2xzpD9JItc9F7Z\nPPVgEm2KsNR3G7hvi9NCtQHPPd0NOlQBN9wWOdqeNLDC/dOQnpB+mfycHEl7\np0dJ0h6kaWKD40ha7EvUevjghX4Fgd8wQL/EJkOFv29Iz5yi2ujLmJIdRyNi\n+77PnO+KekZL/W8erdSy9Iuld7igAGNxsuNrBi1oqHNxY9SZ7tBrntAAuxR5\nWCH4ip0osa7hWIyxvnrjq8DEE/2BtZvrjJKCWduUooT5sAu5xhrRY4etz1rD\njcabfVc8iu6ouIFgf3TTlTwycus47y/Utyc/KU8RXjgL0zJhUjmn4yDtfa70\n7eR1kvbepLCVvHhmN/8hpnpaKj11wQIGaJq/QqiSntmzN2aa1RpnThj1eSYa\nb97REiy6BpQ9bri2dG5gcTIbh3jx5Lf2opnWDbInwdWfNOEl37iUygTtY7kC\nVTkhIvNPMaq/nzvF/AjhAdTSvp7IH13ytSoskr6rvmSPdJFHH0vRih5uM/K8\n9/inoxRiudkfZb+2bamSM/CUdcALhdEPesDRUJQLHiIhDa3pKDsZffWrWZNL\no/dGEG616QLRKcSmWdris3qU5zYggn+VIgr5ESBwAdkAXIHDb7AsvGTgDrQZ\nkDaqWle2XsNhiBgGD11YvsjAX6pbd6D/xx4D8RQct3/ro6DO3UujX610KQ4D\nWDn2\r\n=UyOQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/jxNEksvMpiJZytH2ETVnQE5QE3SOP/mORwLt0K9xiAiAyQ0bZcDxPqrgkmadG7r0wyHnuPMghNMT6+39txj/irA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0_1625214077831_0.7050851192448699"},"_hasShrinkwrap":false},"1.24.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0":{"name":"@sberdevices/plasma-ui","version":"1.24.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0","@sberdevices/plasma-sb-utils":"0.6.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9a78da8ac38b059aa7393d0e0a08028c5305e2a9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-QomfXei87u3MPrMfpVRNYgHboIjFcEssj7+hHdejfLzjHhd4I41puDOFsYZ+cN+gNC6y7vXoM7jEsdE37BLF+g==","shasum":"398efb6c483e1dc11a235814682df059a1923246","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0.tgz","fileCount":472,"unpackedSize":984634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3tCBCRA9TVsSAnZWagAAvMwQAKUazMN0L43D2NXfd9ed\nUi2TX4QZpa9Tx+Zj0Cv8MuVO+VOoV+ofQ/KTy5jg1lhAuPlDq+bUGF2LViZ6\nh8yHiKqS407XJJMIAAME+NXCeAYjgGp2Lmud31EI1BRRreBTSTbt5IOR1CRG\nZY+hXMH27SfI3cbwaCxLcSkPzTyR2gNOrCGZTo1HIFZcpLVGMnlQEPLOJPrQ\nJ5g65Bs9jxIHgg4HfriYo5Eh5rJIXD+V8HvoJXT+0k8P+dbazgTJ0mFrW/RD\nDze/4XoTmW7z0k3EISyNsNqO4Yy42Dl9E0i103rs7J/wh6Ts2+KTLZ/uYXF+\nAMR4BeI4rSuhVqasENj4NimXwto0SCRdLiiKPf3FITvG2muT+7iZKY8FWgF/\nY2nvxy1izBpac7ROizvMpuDjEq4wVaqD615lTwMUvvJ/sapAtzu+Cxj1D38B\nA8/WHpxlHtmZlCcSd5PKXxcm+B1NiqhKCMEFe+Ra01LBYMFIzz2JrXDFG1m7\nxOicZHq4J9ldkz22ODnMmGi4KLpfHLtgyDKGds0XEpLoLBiKVG8FD/yOsWQS\nas/kXa0cARIoKdVkUri2gTlOrQ/hnIMXiUoxfDxXZzaO0fLUC3X0yPdTIDjd\nlpCXbylmL2fQumborFqvACUUpnn2QZPrCvOHmgc6445AnFNjR+aH85sHFxSM\ne8Ma\r\n=RGkH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGc3uB378VO5F9oRVPZ72UCbkFUy++zWh5ew3WsvRi78AiEAxTUsHUJfaCwIsII6THpzideXgr3laE2QKhxQOrmHE9g="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0_1625215104461_0.050078094879515644"},"_hasShrinkwrap":false},"1.24.0":{"name":"@sberdevices/plasma-ui","version":"1.24.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.0","@sberdevices/plasma-sb-utils":"0.6.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d529e182547239282bf64e919b05c0c1a7cd1740","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-0t9vHx4ci+o2PU4vQkJ1V1VL53bxereLOh5dL2H8TEFIa5vVMui+zOVbKafTZJhc3Df/8olSYtFG2lF2FTrGBA==","shasum":"5f87bd70b2c3f13e760bb574f09e00f40777784c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.0.tgz","fileCount":472,"unpackedSize":985528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3tiuCRA9TVsSAnZWagAAmZAQAJcSwaddH80hpbluiD7T\n5/4ynKGCnTuA28Jlf03wW9BplZEJBXphBsi5goztwwHIu2p3ZsSapE3hyHPR\n5Aqe3yTRw149vvTtfFq5IrKea1r797Btlqm0tqG47cQvr5g4ByD8rz8lPWdy\ncSjiHi49BexhuhdgHLohVNgNEUdOHuNiNWkx7ToF75G3hCh827jW72YSXnBE\nDdIUNIH0/bsqvmOex/7ZUw0nYjsaw8/MGGsjp+Zc782eG21lfNBCrFAMV8xn\n81IeC3v9pQKyKRNt+YBOTULHbbZNTh3QMLiVuxl2lIzU1ZAQ3yTrfvtMWa6I\nI+aprdEJ3ZfStd0XKlwdEM2jsc0bMsmRvA6CEKbM7ZfV/1G9JvtP4hHINwfC\nX0BIkFBaIuvmQu9uaMTYVp2Z+nYaKpIPbyTo9k81Idtq8EPZYoGBfRR7wVKK\n9aef79tima+Glvk1LCkYrPc0WcQq9yhoYzoKBEwFXVka7FSgHgRCxvODxfMl\nyq03WaLRHWQtj8kQKIJYJKWW5nAvXGQG4NXJCdbw0XzQ5me6dHgi9hYu5nRu\n86pp352Vl8Dr1t/Wg8nHazbWlq/eGh9NrTgOG9dgGbM0vh1j/0ikq82AaXLi\nCYtZaURqKTHltlhipM9gu0qExfUArTklqcYmQTDa6u/I5PamfBVZihKdOS+3\n+Gv9\r\n=Btcr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmg4xsJDAx/Y/gOc0JGVGsnKoQn1lutQcaB7OxYjvQ5AiAviCPzQY16Fs0OfLNQuyf+yQY1XxcY71kDBdCsSlUOlQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.0_1625217198524_0.7817912734254866"},"_hasShrinkwrap":false},"1.25.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f6d8b675b46e3cf5064a6647a33ea3b4d00913b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-6W5Zlso4EkH0SpNj4lpY1fn4RkFLyitjKhAedJTulWPaguxUUEBAI1ARZFiCHTlfa5Ah4C+O0PgcCOyeYPl/hQ==","shasum":"21dc3b8e2ad93cca9094bd4eb2cb0f78ec95b77a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0.tgz","fileCount":472,"unpackedSize":993789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3wrfCRA9TVsSAnZWagAAmK4P/1uMRFUfj9FXK3z9LyXz\nfn+/nyDq3J9VXuNvffSolr5hbRSxY5oOUHxSNeCBhsw5u/nS3gQcMZbDPVjg\ni6I7A0x4fYp+1/SyeA+Q0NOR5+m2R3K6ZdtDN2YSs2tpmUgW7K/Ky2IFeNI4\ntVml89n+4gLs2DxjRH/19PnFHTN6NzG+raKkBd9AZldI56ubYhstNaz2fs8k\n1ShahU4R0SyJ9zGbgEvmajpcsUtRRNBukxt1Mi2zT9O8LPu3IFj6dUqg7iea\nQMLw7fvAl1VtUaARiiOcXkjy0Q4UpoSKFt9hnX+V12fo/UgvXZ4Jr9LwOIy6\nKEqBWs/41WSQ+Fd9eGMV7H72kfA9DyKdcb8U8/AMkBKEF86IvT0EwodyzE2H\n04/dOSUxclqub9mMNmzktoMEHwalAImjbzYX5qmn1ekNm8hrlb9M8pL5pEGb\n62mcevRvTbQI5g/PxkeVo7xME5em7UMFMNRdskumhioFSZeH9AF4OpIQUFXI\nEd6EsVuFh/swjXD6M8k0p0BWJYe8yR+b0kIdBCIXJYGOIHOvtSb7skGWcy4B\nJg+DAuh1ueFGjgYcRp9qSuUaiRtKT5+o56Inkmtv5Eul0l6AaN48yRTHXc+8\nBgqRkn+RvRR01700hcm3SNh2mjnKERIq4lsUPCkUR3236J1LjHFgVvcpmgtm\nEASb\r\n=H5PF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTyo/w6IcNo5UoLjp5cfKn6rK88fcX5iEVsrXAHFWPaQIhAIk5O945cAKGX6olsFIvN7omFRZQKvQslZzU4kpXWLOG"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0_1625230046446_0.711399876459448"},"_hasShrinkwrap":false},"1.24.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0":{"name":"@sberdevices/plasma-ui","version":"1.24.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0","@sberdevices/plasma-sb-utils":"0.6.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e793120a088f5ed3cd88249d43776b8cb491f19e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-rOhOUh4nGBd/g6yJv1uYthydq4nRvC4Uu2cQkOwBR886SUBs9wAkihUV6NKttPp86ezMhUvBA53sHpEi4ubuKg==","shasum":"0f8750b1feb9c093ac91c31e17f18fd5895a08b7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0.tgz","fileCount":472,"unpackedSize":985690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4gLTCRA9TVsSAnZWagAAjkcP/2IJPMQaRWwI5yyDJWkw\nVjAgmvCSl8p0bgkG2VM1nI5vk9px7y0QiAZFc9pZCPsJSczBUn4TdmQB5S0X\nKIEnaJNxcJbeLIdYi0j5ZBeAuEF9LdKb9vAdCnxRMS+0uUiX41Q7+rPDEMaF\nr7z3GBBMy0R5Ck3p3NFwIeOgDGnPr6+1YjEJkwALfgQh+J9Frb6TzW0aZs3f\n0swJ3ClQLUfjqIe7qwqzG6jqNDvVIW2b289HJX4trkxhN3VR8jgTXcrXHcdn\nb/1ly9cg3mDz+OlWlc62WgGdhQmWxNk9LrFCKz15rnLEqr4z93uyN6VNeRuI\nOFNQInV0fvuSEyXsO1w0yNGgJTS+SV/gOrrhvkGLfheS+DtgTpE456a9AZB4\nqmjtPrTY6oESVUytBZyO5hU06OiyCaj4nyaCgzlXhbQtKtFtMjKGq62KjX+S\nsIJgxiIuoGk0Ge1PHvXUPeGnuVluR7KuC0sn3v6L6hNU/M9vFdfddfBkmaQI\n6E0FKnZpwj3HJXz/gf1tIDC40/weBlDl3MeIhOWoP+VAgN4XjpcncpfhVhXJ\n03gnxj9kVqT0rzV1ng/1T21ZTxiw7WyO5X35rBcQsdY0yh8jamp3oYjCSzYF\nwJxB0Jhi/HTZ30Pr3N5kIYv0BPrp9dP65ZBdrVX5E0smWGBC/vxruQOKZnuh\n0LwI\r\n=IIjQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOE7F4QPq/rROkAuCHW0lM9rq8dS/+oKi8S3PjH6u+QAiBoTpaP8sOFULkgnv+z1YfGY/dbPMfq3L8zB9AHEm+wSg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0_1625424595289_0.27756917652017377"},"_hasShrinkwrap":false},"1.24.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0":{"name":"@sberdevices/plasma-ui","version":"1.24.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0","@sberdevices/plasma-sb-utils":"0.6.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eeef161e7a4dd31669dd5935846a9266158caf28","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-a5PA4Hy+I3kNOWgrZ3MRoNJqcyXbDHWo0LQDIYbTFG3AG5ZNtcZqAoEHUSMz6qSBHO1VT5TYSjrZmLlRw3I0OA==","shasum":"3df2c5e5382af96764bd6350553ad6b9c2035a2d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0.tgz","fileCount":472,"unpackedSize":985690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4iGLCRA9TVsSAnZWagAAqqwP/1tePriWHHJW9attHmo4\nwz5taG+DI2Pq87/l0dF73DBfn8gaIrA2uKcdB7P2G+dlP9BJtErz1LfAqFDn\n9ajvBH7kReaH7VVE6LEYv4UBJkUL5XVrx4/sFmZ0jWpp6UvHwPKTNK8NGJd/\nz54Dyw9UKdgN1KuMHgYvSFjjA308fgEizhnPYKZ1l41ElYT9eu3WD9vIzfSQ\nTPjCYpjU2522k5r9363srr3NateFG8NLEWqbMfFR9M2VFbgkmaOAmPKQreD4\nfkO24fBEZWrAazUVspI9e9w6DkHGlq8wgdvmLiATWq1srOxYJ2L9sWUDmfQl\nxo8d3C/b7a0SjUphR11kUtp16om1cFXSPCZo7M9qKCGenBBdBV3cpCfh74MK\nwYgG9uQTqzFF6edHbXvvhe8r2ALtI5y2ey6CSP6m4czTHV+N5+C5vfN9rOX8\ne4gAeh7aLAkjIS9+LkQZO8DvoDuo0/sTqWcvNAyHaTvJsc0KuZMi2Zy8Vshe\nbUjH/vjEZg77E5NQm4X4VbdUzShMYPGgja2iJdOZyesH/qNN0SQuJgD2Rah7\ntUVTgD61gln7K0yfNYXNCkib9/Zlq93VHzI2FnUUskr87kn9dRrPWxH9wHvZ\n4kKdYOxBq7/p0foS9OB8ddEipdRdZeI4rMSQzd5guBQRvR/zuybMjh9xKz/+\n4Ppm\r\n=y5SC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFr+wqe4TTBhChuFLuxG5tj88ClB5+vPUTdiY4t18LTxAiEA88nfkEcq8WBvgP7ynzdM7G+yu3xbR/BnDQ2pAd1GRGw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0_1625432458382_0.9679099940681373"},"_hasShrinkwrap":false},"1.25.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d6dda48e2033cb1baf0dd97781a7e7df416f75fd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-W9m3+EFTaMmqQ+iimvxnyzqybd4DT9l5Ct5mJHMKZUvxMheAwYS6F4jvkTyw4f5J+DuWUxibC7VfQtDWRcwPFg==","shasum":"6c2ea85af46f78ad918cc3eadfe131b90aefde2e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0.tgz","fileCount":472,"unpackedSize":993789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4tf6CRA9TVsSAnZWagAAp5gP/3u+oWlEfYTX2pZEutUJ\n2ju4QzL34z6U2Ckn5jWpPoGblhNXVYypEwii1xzYF1PiDYbB+SsESiACdAfu\nhZ/vjb3Px8pslwYQc7tj9TetQDySBKxNchnAYD+BxDFgIy+GTnwx/LKwrGIc\noz+WCRxivyGjVcbsaCnWnx69cU4uqyM9Fv6nUAaImL0w6IKcxG/BbkOnGUO3\n4wIM4RDcOHphLFeAzTlJ05xajS4UXzdXKlCWSC/U/zOq59RYvympy2IxfCwr\nl1q2oU/ZChu+B6nJ/tZmZkomXgdSSPOdVRj1b2ehauZXzvqh/2Cp4LAqZxIR\nl3KCihOdieIytWQ/dUs1HtKTQlPowbwcc7pk2zeWUG8bILmxjMQKB3wTpbzh\nTL2wz0RwtOYm0a9/RmJRJWEsb8cwXudTsdqqpTB8GII+hI3qSJvZ4wKjCThe\neGFIbKUNPuvCrccunfU+QuN/DATWseBjDXBe30/0/14KAfho2I9qz3ns+bXJ\niheyOtqA/aymKexZIT4HGSiAu5KTk3hD/y9mBhHK3yIdMv1XmNzeXC8ld2l1\n8BOnFeGit0T7Zr5CcMbnkpidpSweBUaQ6NQeeBDZYiQX9chp1oGyjdn8WUb0\nDin4rpP0bt8DFJ5Y4jSzczXro0Hv88yGWv6DIDXqeg2FyiEmt8QQGLiu++t9\nq9JT\r\n=zPmw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcITrC0Q/U6sbQMqafOkYGUfgXGQ+93nWL/Hx/ixasOAiEAv4Unr1sIat8zv1DsjAZcOa/GCVM8DZZopLKNNnaE8FE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0_1625479161850_0.1180765741660681"},"_hasShrinkwrap":false},"1.25.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8eda6da6cb25b8b26a9693634f6ac9b940354ece","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ABHvR3Fu/c32vK9jbkHSbpXbUSlJPyfFwCc3bYjZFv5WuymEp5HiEIk8i2ojCjwNw5nvPr3uRGGnRbjUbHahhw==","shasum":"de13bd80531353d5bde476e206b09bb6cb7db2be","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0.tgz","fileCount":472,"unpackedSize":993789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4tqiCRA9TVsSAnZWagAA9lcQAJmo0fV/hIpHqTxDE7F+\ny9PLMT/Ae8Q4sTFn/tv9Pept4cJ44nTn4rgY+27f9u9FuM4k2A80yKbtXov6\nOsogO+R9yRs0UB6mC7jnoYFvRAzyp+4nyN7qrLXIVYi43D0xueifNzglfXzg\nxG9p1i060bHCjQDYakhY6U7fewxOprMO82a4OwJryzCVgTS72lNGK0zZ1L51\njMoBvPDVPQkpJ1pVD4dYeAIet07RoCRQS0P3a7rvjoFdUhatF5kmxYVWS6eJ\nOglep1niwdFaLbCMZYdewBfm6ukfjvOdc6WIxIks09+LEoApgsdOC+hxpbTB\nnnfaPlfUd8bmQJ/6KFR1oTJwF2FIKj9LIgmU0SFqE7H8IOwfnSjB378njhZW\nhWV3x4XZkP3ME3RzNTY9Wx9F4vpkJV1ujza30uF9tFoUkXdCKrlEyylqfTP8\nzV526FmFlCKpUqlGaaJRnF5f2Gvcdg6AoQsID9Q0jUR5MFGSMP3tRHN6iPd/\nfMozCjo/adB+4WWu+/3ArlZNp+pcVBsXr0qssnBvu1ttw7jUSjVBwVzLZMjv\n7sA8En1pV07gQevbi2otfLnmHrc38q+WZ66BODFXd+f+olqi5iLirS0Ap4a9\nl4rc/xkbUz/06ptmmvt12Sz4RT2yj42rTYBTIiBmCwRbj3E6RV4lxaUlZ89D\nz2dv\r\n=j9aV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAetSL3t5IQ6L8Hs3KumLERQBHZyfYfd6uTi/QyXjnmFAiEApOLBhh7C391Gx+bOftXaS2UaUroIM3XpMZDJ4rx9468="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0_1625479841596_0.8351628032776635"},"_hasShrinkwrap":false},"1.24.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0":{"name":"@sberdevices/plasma-ui","version":"1.24.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0","@sberdevices/plasma-sb-utils":"0.6.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7565e3782fff52203fe2d9b50b4047ffe800d419","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-P/KdgtZPiKF3Zlpkypvwka9/NAX/839HNQqC6DzajFhTPmEPRf0e9r/Pw2+XS1JIKwVY8THtLpJmYd5w5A1zZg==","shasum":"130a6df374d961f55850ae5cfe849cfca0a3ba10","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0.tgz","fileCount":472,"unpackedSize":985690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4uY/CRA9TVsSAnZWagAAYaUP/3SlTPTW50RWBdsyg+fK\n3746eYTmqcozXV7ibWCnmUrlNNhJ23FY5Fw7NhKsiQ5YV/+sGsgIhGhv3aiR\npVVJB+N7KArFpYTPktF4rXpW+Fh/NRFDn6icl0hJuB7b4KgS46uiAn+0f7AG\nj0xe2GUQ9sybGLn+pIbaETKIFwrPMXq4HU8JZjspershKYuXGuK5aTrcLOQg\nhNBs6KM0145iuJS/Ceb/vdjjhVerMTaW+BU0BIjp0fZ+uTd6MyUNGVyoTHUp\nC3AXcbRZqHes6WZDkNmEltxKHkZZuwoDZsaruq6Xdrj7ZHADOuOhwqXx7t/6\nnPQIR9gBkNL7z3zk/wBzopNW+jeCmY9AMm3cpfjFvRIRcUhQyFwZB1pyMwsV\nC1QjhmZF+n+DhENXZ5oNP+kDG0IP+kLPX0cdXNyzj1cBEFlVcVdKd32jQ634\nSdl1J4qlx5VR1vL5O4VXZ+ROxXiilT0hDraHr/fYTnuVIrPMNiJVfBpVQeMI\n00f7TDvD7l0JzWXPIbI4XH8yM7QFYOPS+p6F2I2i1FIjEvD3zwmv0B+5zurl\nCHH69hFOyGlMXLPRR7EoYNXUhhsAX5AgXWf4mBKBBw++vBfSQCcOCfXfpmsh\n7K0L8shpfn6sd7QTMTlmfFwasW/HDrL4ziJJALJ0BGjHQoF+D83Uy9ikjd8r\nWDP1\r\n=eHNo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYgd++ATYCTeSO78YkWsbTx0i3xUMS6ipQNHTymkCQFAiEA6YBA05e4Wv9M6Wjn8MaoQRV7QS1W0IXh+m6YAtf2Smw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0_1625482815001_0.5975839593775047"},"_hasShrinkwrap":false},"1.25.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5972de52f9946c4c8d1d640ba6cd29b3faf5d42f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-tsU8viIQIba5N3IektTlaj6FHoXSSOH7IuWdHacYe31Y1QlyFwIj7quq2uNoISmX2/+S+40XcJZNiXbVh5sJqQ==","shasum":"add303cd1c1cb342b0936f1351aa58dbf4f4a830","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0.tgz","fileCount":472,"unpackedSize":993789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4ufACRA9TVsSAnZWagAAPVoP/iE3DO7m8aN7JlUOOYZc\nKD64LSnLe8iEayA2bCkkgm3fO6vY+R5IwUM0Mph7FHjj9ht92C7I79laYuIY\nPSPe3s5O4Wcz+pJSAqchkQSK7J7k+MS0j0dStDTzz8o5k3bUhqgrgtfhPfYI\noGzWEY+kRF77s568jHD/c6rqdUK4Gjwsu2Ws98ZpFiPwrrhkBGZezn0wC6mL\nMiArQzdZDKSkcPLLV++QRszg/mbTcHvcUdxh9XV4DdCedvsr5AcThJZaoju/\ni5Ne8xkh8HQUjL1FrbT5T8b7fvC/t9CH+pBY3QXgLjA5wQqNsKYvMAtz79zf\nHCtSfVQF1GogzUs8FHZTTeTUFkGST+TgWJQXbQJoWQyBUDFK+hlURqKVHb5T\nFxDbM6rkSF3OlC5GBNzfO6yQUsCoRZxlEv0cWZTKZZPAlxspsMuCzC4t2YVq\nIPcz3O+AcsPy+IAywdNcxqM+yN3Oks+QLps6rygzWiPfGaguK73bV9wVoe5/\n4NylMv5xCaeqlN+mN7iMFQcGjrj+/pVT3x9ye1dMk0BwiRBrTzXHHRZaRQpo\nbyQLMlh+7kvwYaxVKhq0HGMC6EIUj6z1oIAVaV8zsyzuKvjo/VW6paJx7xVA\no6CleWCvTjeUtvLUJZFdJimfIsMNY9sBPtHNGjon1CFb7ydJ2Mfgpz/zEGVc\nPtby\r\n=SiMj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATTnuuEOI0hbOok3v3vkpY+PVggZmZOmAgqxSb2X2nRAiA2gICBNNxxers3id7EuUa3jIWlNDxspCUsDRjne3Z1cQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0_1625483199733_0.5894983023926668"},"_hasShrinkwrap":false},"1.25.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-rRPcHWQsTQ26I+/Ch9JRq6qIQPyXMT0EItdoEHyBwjrj2EgmHvXwzr3aWwZ3PTJLTxMdXegH101VRApZnhnlbw==","shasum":"a230b3730310a2d3d91bda01b3d6255c7a500928","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0.tgz","fileCount":472,"unpackedSize":993789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4u5VCRA9TVsSAnZWagAAmt4P/i1BUtNM3i7bwJDT2pl/\nBIOwGngRz/ZAEnuAPV2+B5rWXR2DvsejQVGzbeFcMX7ci3cQZvmI7Cv56mJT\nWKzz3K9INwbuEykjT4ixZaCnSG8wldhulXDWxHxgEuCRAtl0wtKj3BWSNP4D\n20z1JFL9NGAq2QyjrGKDZXEwkMoPTIGxixspdIA4lAONXQLbly4AWv9oCjNm\n+jG47900zceSAoqaFGpziLJBG+Hen6Od6iNjFm3l8fPQncNXerZepKFGySL4\n+ZtTxLWHkf+tU3cNDU33jtUudivtMJ+1xuTAcx5DoeZlyLATJ4I7Ob4MVBwh\nINTPzXxDu1Wglgz5PwiCuQUA0yeXjVvBCmWruQvY80KlHzoNRC89ufw6CrI7\nitT90QV094YJ8emtvibsBhOkcMcyYaN7pQsHDIgPM4FNB1Nnw9MLy1E5weP/\nc6Abl5YFpnescYKN7lQe7kvOTst/kGi8iksBAws8y5NBDzuEPd0W+kmbn3Ur\nqnmiQiZu97Ib+lwqy+Cd5F6vUztsRDNEhnd2p+jMvm9L5YDrN49inaT8ihBp\nrGIFK9zNJ3ZafPpzM7Wo1n7a2ViP7vE0jjTf2b3TSdR2QiF3FaBWGH72qvwb\nAorwOcWtaBiweVJiMezog/B+HYXcPSFt9r1cKWGWjbVgXyT7gf3h8zF7Wvs1\nt+k7\r\n=P6y0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5FrLO++MvxOlXvkcMp2QGBcv80fI0XNeivhdY7ii//AiEA2X9KQ1RrB++bwtmjwT0R3+ueQDn1Knn385ThTq/ua8c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0_1625484885285_0.7547554249853639"},"_hasShrinkwrap":false},"1.25.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1 || ^17.0.2","react-dom":"16.13.1 || ^17.0.2","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"685d587567246bf76e642443bcfe2ae3e25cd744","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-IlUDKNMOIyxu1zCd3igzbwniKxQ/YHw2DOdeqGPSdNzsrVqNc5Y9EJG+r9jcdDMzjJ9Wnn8ulnuk6wIbemjGtQ==","shasum":"df60817f60582e50e9579d5029307589322f9b04","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0.tgz","fileCount":472,"unpackedSize":985788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5EVkCRA9TVsSAnZWagAA7+QQAIvPp6lZipNG3b0JWh+Q\nRpSVfRXyNOWZSbVX7me/snDPVC39dZ+W+ieSly5dBH7exoSllHdaCTWvHn3/\nBFbnbAMMBP19S7PXG3FeOpt0I60Pn1Er0NSRmV9BhXcwqQuNTGIz7rTiLNeb\ngIZG0ZWkbldBDZmhT2+DMP/7mzcwpeZD01w9DvtIvXYZnJeXCtmXC/GWJEvE\ngcCOJGKB1ZRwt8rOyKlStQ8ytWSD2r5TO7Jg1fQtXhsxTn5CEe2evK2MCpls\nD8jlwvbJF6HuLZT1JqvkWQgL5+Ht2sO/ar9jap5ohG4DXcUUzPK3VsGP9X8H\nSZ7vtEUP7M4Rti1/JcPQsfjV2dMvGPFBVD/huwxNK9st+qvyxrUlomgkU3Iy\n1RUeBIKkzCfxvTJ8VyDm+yHa0vUfMwsYW9MolBP1lwotKR81Ea2fXkrf99nL\nPyJVk9KwzYQHdHKPe3JHI+Zqe9dnT/vOxe1zq7psntEEGAthNOlvfR5tIHIx\nk/wZVxq/QkT6QT96iDt69e3u5W3J2SqWUow3VRGL0T2Kerg3escpya2orE6h\nU2i9rRZdGEjyg7aj6nk/ZBL+stjie7bO9LlAQXbfdH0RVmQJVdqJ0DfeL+8Z\nvaBW/dn31b3PyU8ZN96VwW4ivWWrAHIIA0j0UvE5vlJ0ISQZqqQnw0JmYdK1\nAVx5\r\n=XTHG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRS2mFUtG08Yw+EYJs4uwcNCkBXpUHu3NuZnmx+74JIAIhALkgZa/AaebsVIfY9GZQQQrer55oa3xZR1gkp7V6WB6J"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0_1625572708007_0.35941617573968276"},"_hasShrinkwrap":false},"1.25.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c43ec37abd74fb569337064531b1225f28b31ad4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-gc/5B6wUgbMKvhf/nVaSEFGneKfdWVRiSnyErPxbos/qFXJ3o9mXKk5oX/QVsXqgO/mpR/p9uCAetbU6uE2IBQ==","shasum":"addae197e5d56ea0a17fcd400694dc2b69e8e11e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0.tgz","fileCount":472,"unpackedSize":994553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5FVgCRA9TVsSAnZWagAAFfUQAIXs4RCwJzEnJWR+noD7\n4fzSP/G8/J2aIf1V1zdU5R3lTGXrW6ArmoBJXioccLhekdp5iTKcAQa/SGNv\niYrb37agpHOy82o6ljIaW76686htunPGuHblSpTCS1Cn7HQ92649IzLcNDFq\ntV95yrX9tnMPFDloOXqubrnqoGxoHj4UcvlSrMqPjrYaOCYxLLYswka5KnYK\nPi0MGfs5QHw8eO9Q2MLoSgVfCXD3V4vepNIrUwDBS6YTlRm98+UsmuRvApYO\nfPOHFisZ3RSnzTPKB/OSU0qo5c1Yvkn6JvSqJN5EWkRb2HGcd2Vj9bdGI004\nW6e/R/xLLx0c699vcmG0Utj11QPOeViYgfgZX/e58J7KbKD7kyiwqO903gNS\nbZdS+lD+fkeCscnKkVNTFD6WQ736U9mR1Akvsnjfu52RswH5DWX+xrM2u1ad\n5OGfiKTGM0oVaDWtEhw25MdHIXnR/+Wjev6orFzHA7b/QsreRfT/MEnjN3wB\nxAIWI8XaYHwIAEC7aMpGPaYqrZBbKEh7Hj5LvlYo8P385ST2JgEssFyXelYE\nEgJ5NXTbhpV0Pb0ANfsZlF/sWgQEbsuYeKErRn0bIEIdvKuYAf82QlC+hPFO\nSol/PCSXLU5MVO7k3MHo3Lh/tikOWVeiYRt/2AtggmXeWdAXg9lhZlSbEkya\n7/Cj\r\n=UCja\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDX51N4w/AhddR0aShxjdt4lsd9T3kJpL+EhwCjJrfncAIhAKsOdIvRrYihHXkqJaXvh8jnxc/+SVYECcZ9o4TVFM6T"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0_1625576800232_0.04189508611959902"},"_hasShrinkwrap":false},"1.25.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf6dd25434b0af037832d8231d43f1ccb05ae48a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ki9qBVHEBD/Ef/Hg8gCiQJEcmRjk2lWEWJ/nC/te0K2XHvx2vU8YETsZ5qctxQl2fsaUyxQVfTkN1TLfaqKAOg==","shasum":"ead1eb155df226fefcd9fb414ee56c4d96926226","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0.tgz","fileCount":472,"unpackedSize":994553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5GKqCRA9TVsSAnZWagAArFQP/0R9dstZGPXI0g5rV67R\nWdPxq80zlG0x+/uTCrtqg9VLc2qza9iVooTMdZKaqsnF4CVaAB6sM+d0ivTd\nt0srKISjfTKjsSAUBk2jw5zr3wBmctmPYDRTSCB5Zwkt1BG435Okhbwk9ppC\ns0cph2USk1UKKsMD/6Rm4prE36ROay+7iUambVdVgnqcPAQgzvvAKxh9vG9D\nQA4KMD3sFx/Mc0t3qRKuIuSJiAsxL6rPxGuh8za2fdO0uAuMlCij/aGPbLTL\nSqU+tKDYNVMKA+BvF8/JgwRNbMGY9e53U6AWam5APTD9tRQA0kBpSd2sKphc\ng2/VeEqj2X+TXiQHDbVSNNJCUuwybZeDxbpEzOlKeNwOxZwXWNk9UHN50sYd\nYvfXHiPiwmZBRSn7SjTwYniy3JWzHGIAysNV2fLaFyrytWPK2r2lPpXNG2+c\nRYt6rJWT7SLDqegThGT8urw8nW2Ha4bVGXrk4M1dJoO9/kn5pciirg870fa/\nv9ThZBWaxFU0zcUDkW+khrJaFOH3kZp2vbixuoH+DcNAKXsJn1iPPzSB+z4n\nKeh0BVdLWhLlDO6HrKWtZhwivavDVoXQfpizM8+Sj6KT8xYpYlhGA/a0U/kh\niuJwMLSzTaKa6FQ3te3z8Bxa3yDzkjG/8LMg1VeLbVJYWMkUs15UncxCAYR/\nRhnt\r\n=LjKh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBLCnTgRhMQVwXhdYGIo9rb0rJ5wTSRzgT7E93JhD0mAiEAsIVddgKRHgJ1BEOtOGNrGgEmqnINBqxVJEksBamrOzE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0_1625580202213_0.20313962702598665"},"_hasShrinkwrap":false},"1.25.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e52a26e86f17da4343881003a3ce46f6d41cdd3f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5fBOL6JBCh7/hNsFg8602hLRs1FEXgdXYydtRCVaaU8TjJKCo2kDAccmVEHz26oia8eDApfxK5aa2drFlQBkIA==","shasum":"d9677187e8acdcae58b112938ac808138b867917","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0.tgz","fileCount":472,"unpackedSize":994553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5Ge1CRA9TVsSAnZWagAAnMkQAJAdWGbLsiCrg0+4T+Wp\nRikCqg7L0msKNvK29H5kwa2xHYjQUZK6vSu1BXlWiN9t7QFb/DPPBj9AIfDM\nw0gyb68xjq2mRyVwyF5ue0pNnn6QxA/uXhKZwa8qTLsgAmzE6RRgGFBHuAEG\nfu8h7yqwAV3EeZ+TJfwE6HRsZnKipEuUsegwLaNrH0ZWnJXLyPXPHQNaNbcI\nbSP8map3soO/bs86MpjSBzND14BeRBsZAtoWvYEE1QIcT/1jDtJQxRwFpBqH\nXNFR+SJlVqoOZ145xizHG8vZRGhvHl6Vyq0j2M2IHnCczo8wzmykGWuatZgX\nSV3aTl3/EcudzhjhZUwOvir0oPOrOxjPGtwzd7n8oibb2uycVmgsL5c1xG6M\nwLDGXlFeA32YYrMYk/d/wLgsWkcaFfVYBGXDVHZqMoMbzMjoKWinWUVEWr5h\nRMTWDP4PNMEHMzqW+WAfjTbzqnj4hbNq9q//vWWt/UYARqDEg7oVIrRqBf4m\na4V11B5WJ78wTI9ztLjTOvx+MkacnMAd+QHdWf2A4FkqSKV7Rawg62QJunug\nDhBTjAGgp+yrzvSTT7XIqCnJ1s9Ip53Splt5SR9WNVtaZXjDfU36YfwecfjI\nz2Qb0f30vVDvusHY3Ro2zYD8oQ8Qp4awxHk4KfT6a7FkceGbkMsGcxfx66Ia\nP9bT\r\n=RIHZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdhTtk9UxO/sNF9RwoQA+AcwG6R7DBTN1h/dHM0idfnAiEArAd/2G5cIcHOX+xXCCWvNKNMkYRH59jru3of8cxNxbI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0_1625581492740_0.49307660211471216"},"_hasShrinkwrap":false},"1.25.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"731856e5c0bb4e4c8fa8a32be0db92c19546a51b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-x4usLA4PttcNF3XfxaBH/j36Qc3OV2FA6I9yISJ1GugaO6uECTaYtmt1JzDdmlzf6p8cHwf3FRY0BZaU827hig==","shasum":"251ca25ddf7ea07cd9222b2fd99e419e01004fe0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0.tgz","fileCount":472,"unpackedSize":994553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5GsgCRA9TVsSAnZWagAAiDkP/0/6g7KwOu7kgimPnrEw\ngb0tkH0gSmpZe6w7R6DpCF5ZB3QWvlR7xD7N7IaWnYhuX8bYhY52Use3s5vS\ndtTgbU2F85mxz+aFvdTlcoyENL6VtQmMlafkIaWjo25f/HDjNQ3CqEn6Wo6r\nj8QeKV/J4hRsAycxnb1n1i8OV4NYqySNLFPV9n+73AqM/4RnJyTDP6y0SnvI\nsaaNVNT4qLBbjgXPbBDxOA6WzPfDJ1yolSFoVG4G3q4J9HgBp370/1S4R2p+\nRadCYbkrprK+3gAf0kwYB8coLhhBX6UZuqvhSdPb0xjQeW/A4il9RrIK3DiZ\ntuucW0cTG+iR0xvOUOUDY69QT2GRs7SmZY28r01l3fpXFpcUX12zDM8nZz4t\n0I8YWchANOw7VHfen/B+JrWaw7Lo9feMXOrWx5/UUkWfWQmoJC9m5oBlNdfu\neIu18BtTGjLgAeDiFFu7mG2J8xhbwFZKYICGyId1j35jzocbm5Y2E2ZsNM76\nr0R6z/751VUhjbPZBSynaUbKuzu12hU4vnJLaQxBy6lS2hOm2p4MQrW/RYzt\nOo9VwzTGGSenJmpW4mZFW5P+8eAIgLm1OyvW1KZB6R98mQ4CfDYsUC3th9A+\nvnXUCxnLHE6OcQl9P2hRDyKdndH9GPhAmyQ4KjOr/d4HC2Mi8D3NBsJxCdeI\n7gMo\r\n=bWJa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1NTwpcLeA4eA4pKfoG5c/EYsF9EJMVi198xzZZbabGAiEAv/tY8fvR3WVZjxXdg3vIbsWZS8BHQ2f+EvZB6Lwpd0Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0_1625582367349_0.5803078911315367"},"_hasShrinkwrap":false},"1.24.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0":{"name":"@sberdevices/plasma-ui","version":"1.24.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0","@sberdevices/plasma-sb-utils":"0.6.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f15071f3244a33a1325d491b83538e602458f0a7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-UYW4/Nmm1XSOgi3HNm95wPlCQtrseTwWBwDahLJ6s4Ya0cHzZON9ZmCWuq7zLqQhSNWATuRj8QDFp/o+h2mTBQ==","shasum":"12f4a19947d12cc491cc6f830e2413e858da1343","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0.tgz","fileCount":472,"unpackedSize":985690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5b4pCRA9TVsSAnZWagAA+oEP/jstBz/vWOnwboEoeny4\n8vrxt2yBmQxq94v/OaI5YcIMpssEZJei9BVfg4fD+eZQpyDe0eC7DIY208Hl\nxo0GbmXar6KSQYJ9rhbACid4xGZIVWnM4sDHvQKL55mCI/T2mcYNWEv4jE/1\nrPBrGdcstROIj94yPYVjPb3OyDlrKZqTfSybSncmXaJC4KK5Mfu6TH5skiUS\ng+dTrKingtycqDOKapMFQOOdXSJVhmGAFpXh6g6sn1AKDX2CWAERi21xeYO9\noDp2xPv25H02K+fO6LgR5Q9Tfkz1JYlypCJUsHXC80vJs2uNuwiW/Gqp9rib\nZ8Fv6ZJehk4Lvh6rkriZVfs3/wvYrjbvs2GPtCYv3hMay4rKYoIuJOzzYQHe\n27Lx8DuhEUfgS58YGQB/Q4+RPYO83KgaGdsu4GMh9GUozlb9o6a4Z+mvXvsP\nolOnfFpHtv8xiwiKys/jshoto8jtHLyCwRDPP4/iqqW8NDMQctFT7empSRmw\ndUMfLDeFeupxkrOiu+1Rt/QYeIa/jt/DwiW5JWQ5viZQsK9Qy9Pb1ntou9dT\nqUvLDix5PwaV7LaPnrn6JC3wtDbrEMjY2bn6gHTN/ptm81lnQVKA3yezMH0l\nIp0N0BMmqZkprY48/tyw1OCz6lCqNMgcJcWp1lnnEGsll7tK5wAEj8Vg6vCP\nsgC3\r\n=mLrh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCliGKS0cW/YY5nFYpueauyRRqnCqfhhGB9EWIyXYF3nwIhALrxXzg1yD4p9JjP3d8xYJJrir6EuNxdlnLx1ehTjhVv"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0_1625669160742_0.9510478496748731"},"_hasShrinkwrap":false},"1.24.1":{"name":"@sberdevices/plasma-ui","version":"1.24.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5ae597a193fb2604c0d538a711815739ca2e55c0","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.24.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-C5Q4JqezUcAbMf2UqT888dCIxpCRoYkYHzZi5EGOEZGSJSajQzJFCUy3f6ySiI58v/zCOkkWxNkkQH5+t6l0ug==","shasum":"cb0b1b92617db5ba3f81c75213b04631a86b6d95","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.24.1.tgz","fileCount":472,"unpackedSize":986608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5cD5CRA9TVsSAnZWagAARsUQAJYDd0sWZbAyfwZXiLzY\nd/AfkzbpJ4TFX4TR5FMZENkaHX18+K5kdTmszdYWt8I5ttdc6DmZO39Cc0Y1\n6J/lAeADhpiKFe8Wzss9K/QVKr5BPxz95DCONJKRS8xJwBN24/QLjyGZqPFS\nRPqY7INmfFrvm+jC88YqRIQOJLRjj9RmoCHQZZdJEg7MI4ruVLsYxBkl6o6s\n0aeoNZ5Kh+zS3/LS1bWLe3SI0mkS7tsaOCV4szwn7eyV2TMV8l6Zc0fSl+TQ\nwUAC4hKR9aUwE08W92bf2wEENiLtzqn0qQy3QygMy5PO+IiANlUU6rLiJXZ6\nzpB0N6LTNipDzt1SdCyUfGb4smKhW3ABPOb6MRMHS19MmM4+EjXxGUC66sFX\nmOEh2Wb8PYlGcdoU7NFs4FjS+oq6mV423VaeCDxn1VqY/uIdjixLxJPLT3AQ\nV5+OAjJMIWdaLev6U7VMrBnYIexdkBsYdnmmZZmym7p3P5CKHKxYQM5DxMpH\n2y6y5WUYZ18Z0/Q9QrSn+Xp93aqSYe6Cx6FJgBZgKgt2vcXscExNaaqWWyYx\nrMUPtHcm3dC9mFpjxiknmvzhDdxwr+ZyvWGFmHriLXVKrS83NbC5tqR780n+\nqJYvBZR0PudvGgnShx3aiEtmTzL41l+nG0rQTxNQZm5MtWeBh7jEH5QGFW6w\naoqQ\r\n=hLyu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIYTmbZCMI+2CDiCsPa+Iz65Hle78qVAackn5C8vszlAiBxuikJ0RSsOXKdVRzmirIW8wdvatKgg5f98c/3wEJ3vg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.24.1_1625669881059_0.5312473965411848"},"_hasShrinkwrap":false},"1.25.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.9.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"762c92625b49eb4fbd6eeb00aac860f6ff13990a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-C2jCVDNGmVNkJlp3nrH8I6k87yMHeTzobDyFx/QbW+kehwnopB1b46XhLJODFXzXCJL4yQRNsEjnp7tIBvqCiQ==","shasum":"f2de59b62e02aa721cd0bccaf7d2730841c98a84","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0.tgz","fileCount":472,"unpackedSize":986716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5hKLCRA9TVsSAnZWagAAVNMP/21zotHrTn5HuA2GDKnm\nqKcAu10/wXJsYhl6GkgRaF1bZ4Z7qgqmEYjuo71RIbzMVvufBqwNIsrgj0U+\noppZsdI7PuBKEVl/bjYWSskCvcP4gocrDRg50xhLjaahquZlGRyqF1+ShKDh\nzLwKbO2x6mTnsf2uBaRykkpuH2DOOqPSCbETv38y6781J1B5t7OdlY+NLS6f\nefSxsxcRRoWxC9VErKIN5KbSDXTBum3cAVcx7ah0EH5L2g/EwzWieyiBtG4V\nKr5xqLzjyt/AEaNSx7qlcXy+WqsYpfVhQqI7mdNb2YeqZmAeKPauRi4zKrIK\nVXlSTR6mbFfL2Dz3r16jkZtvXhEFEPIbt10Yi+IR9TEaUGdB4blEArrNIfz+\nke1fNPoW2Fu/zke9pDElVWR1GF618NKU0dVslaS62+U9wki5AiNL29hjXsSK\nEFGx4wwB7sXLcHqvX4SE0s4I6gGym41UUgms56faIGOePxa491N/B3UIuzsM\n7ltEpHEnywm30+zIekB1G/mGukGeVyXKPpF9A1D+QWl2B0bHKr800bH2vd7L\nkd7h+hTWiYGuB8k8/KPJdLeGC08QXEonlkyiQdnGxcrFpEG3hDc6dC3HRD3X\nNGn1DJJIxk1WlXZRfmjRznqmpicqrku9Whusv5dOVWMEp4yegjFI8XZzKbRT\nKYMQ\r\n=MohG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaE/8OryZh67d3HwAsAfC9ZkWGKIxExLK1+YwRsg5/KgIgRh7SXy4uv9MrlZ3NX4pQg0Is4Unzqr5q3V14jalVfhc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0_1625690762758_0.7873428461231835"},"_hasShrinkwrap":false},"1.25.0-canary.516.b07ad708e640e56eea6aa18888de906cbe747165.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.516.b07ad708e640e56eea6aa18888de906cbe747165.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b07ad708e640e56eea6aa18888de906cbe747165","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.516.b07ad708e640e56eea6aa18888de906cbe747165.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-asG9DXp9HfU/urxbA1fK3m9WEYkR650AlOTamEdsUZrQnN11r0zrSuDQS6xYmOzhi6nz2DEZoz29XQygyfe8iw==","shasum":"ca1347e1c2a03cecd604f6c28c38943b76399971","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.516.b07ad708e640e56eea6aa18888de906cbe747165.0.tgz","fileCount":472,"unpackedSize":986897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5qriCRA9TVsSAnZWagAAmzsP/2QjCtF3T3SNfuwZ1xsh\n2qRWHlFTs+vkNqd7Vd2ZmIfd/ZG6mdAE72U3X0Irmcoyt+QyzXftUCcAjIIR\nK5FThpaxfBf6aulnQ0u23kLYie7NxTnkFQcrYTeJVHcuLwG9yUsolFe3HOkl\nEHpezoY1DWtHtZuJJFFv5Sms45xlQzybpDyMYvAIMl5nq8r1MLpVsn2qblvT\nD6JitOAMXf330khh+t7l4U0jCYxh7uYNYZU22upJb0uP6X/631j7YJKcekfF\nAYvUi+WZ/VlDymRCepddhN643FJRrNTnS0BKZZoZICLDLHoKrqGLZBfpdcxC\ntZFGWm+7N7FX/IOUvTYUFFRjFbNRy8DGiJqn6/KDd4qXlnbaG6ZhYjtmI/7R\nKS/Zq8Eh3dTQudaiS9Z8OWG1/rVWjC1cmRBIIII/di746zorBPkgt8+aQC2c\ngPyzbI0kxYNt6aqoGkJhCih4AC0sotKMy3fvPHMSzcptVmSCrfkPCVI5QRGx\n3NzQftVDhDFf2BQn349A6wjeZy5nMZ1+7f+ep9H4/dpIKJeHzeygVBZKdfwA\nybquSCe83ptaKnc9uJAAKC+SVyCAYVAVJ0W87cltcHJwSStnN4JM05EQf56q\n91YWeU4t9N5nBek9vSJl+WlXVDfn/vBB2YTznfJzMM0djxd+phvE8F3fiaXk\nj+Wh\r\n=qFMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr2Yg/a3Qx6X2BYqIC5XklLHht1NircJqYiHokY5h7cwIgMn5Wv1+z+NzJK/rL5UzE309ZxUHEDkuZ0LFjY3Ug7KU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.516.b07ad708e640e56eea6aa18888de906cbe747165.0_1625729761607_0.1194723032143874"},"_hasShrinkwrap":false},"1.25.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"46b5bf26adce9350f2f8dcaeca473058fe7ff13e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qujUjNp/q4QK4a8Nmfp2OMQggojogwnVnc1Fdde1UiICjAoaBQWgfG3rSTk1YAxabdCcume5dsP7U7nvVooYJw==","shasum":"9559689f6589bef66fea381666d0a82812a4c105","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0.tgz","fileCount":472,"unpackedSize":986846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5sH2CRA9TVsSAnZWagAAG/IP/j1i1PyHOZKc7J/sHL0g\nBFWKfRAJMFD14mibBRAR8o6Z8KFaQWIYwImVuUzG3vDXdDfXx4sHli1ZfH8U\nOGSLDX16XMDb2IK7cyQKiRK+jhncmdlYWd5+JYZ1619UCTOy2X7W6i13uN9l\nYUO7wuQNssOLJfTlXnQfi0Qut26XxFXk3kUytcXuOi+QyzA6o/xvr0JD34e9\nzD7oClGxmsUDoimOSHjkHROf5253UUbuJcCez+xc4QqeyOWUVfV3jfWq2NZ9\n54SZX8KcaPFXh0D7bqQDrhyWGuvwZppoB+4txJhbRTrHQWcsOj+ipTbLiBbK\nd8d1DOYIfUFk/R8pmN/HXDUZc20SE8YRnV1tP7/Ael+XepfpUX2sabh/Koyk\n1ANDZz7j8/qkWE6xm2iKLW8CPGsbKEAI8VUkOdjPQd32YtiOLt6sQ1rb+TTV\nyHFNRUa4/F9ElH4FsmDQOZN849GgLkHqGktUjJ57fmMU7vVEXQwAMt2vbCaj\nfcmtHxyPq9xUnplXwI28DkN+uQR7GJkbqtuP/oqFxhV4Cfmst2Z+wl8IOLI+\n+rEey0beTW5nacjqZ5U69EWapp+UFGDMlgBOWevnhjnwQKvzr1EBP6MpcYu8\nkOi39Ux4s5PfsasmoDG3yzHIyBNGaJLxkV3UUB9GBqV+THzU6aRYkXFe5gh3\nXEGV\r\n=GNrh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAcN/hR6IcDBVofxyca8AUQhWD1hZ9iCfSzvxaaY/p4IAiBEGVW7tygF9Tv9Yp2KSzKi7GOz0YMTLUjcnGDavipqzA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0_1625735670360_0.9280490202249878"},"_hasShrinkwrap":false},"1.25.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0","@sberdevices/plasma-tokens":"1.8.1","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8b8966c8fb270cc539c9ea93816340ba6f197a10","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qM+UmBOpWxt3myUDd4/00xQyZ/P4m6p2nNubHGStfjSZrOr5xAsoW3PNwu3/hvNZjJ+yiR4S380+XUGNoAgSXw==","shasum":"b9ccf0096ca06c03139e7835997166f1ce474271","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0.tgz","fileCount":472,"unpackedSize":994869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5sU2CRA9TVsSAnZWagAATxMP/32axygNJjN4cjzPLg3l\nK1+OgO6q+t4sB2TB1DS36CoM0E3G8eJFKu8Q9LkTjkb6OZk7vo0Oi6RabSZ8\nkX/78sjMpHD2ygGd8oLtg0Jdfsjs1594HjvY5pGfOGsn3utlMh1lF2h51tsH\nKu5rI0scrY2Dakma+Xy1eInoiYvrty37X9diMFRAh5lPt37CXCLlfmRAVesR\nLBfu4QjMad+Ws9Sd0pLI6sJPUroqaiWEf+TwjSm85yTEVGaBIxshHJ0yetKH\n5H6/EyHmEE6e5i39F6G8ksZtLyHGcEx3WFrQhyQnHW9fVdB4aGUqihH7mfTi\nl1Q68apoiJ5QiOgXyH0TwzHZ3mMqdHjoxvxJmdqsUUcScz7Aa27Hi+XNHr7O\nW5R5OGS4Iy/+DXa+sbStWgkXP57I9j5N1v6o1hMmDZytGcpLyCKqyx3YJanJ\nsPD4G/I00S1pYrkz6EqJ4Ml/1XlVBU3PqRsRj5C9pAVNvVxzGEwcW4Jsv78C\nfYmfEqGLlhteQ+rO47ZPdEfGoopQRF8UU5XQd/JGpxYZIkbXu7HNGE2wtMNr\ncl5NMNkEZHlt1U/Km9IHFEKlIslyRy3yZasFu7+bmiWtw4Mill2amqtpIQWs\noBjmtx4CGB+QGzUh5UGZX06Q07C9J6VvUiMwdfOnAxkA6LRz6ebuWCUYmMTU\naEUJ\r\n=AmWz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiOkavTtDUsbxouNvFRr2f207++6uyIjeRbNme3BfsggIgWUJD1ujt5bajEfsDxl/9obXnWVcI9pNH4kH1fL6cxPw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0_1625736502031_0.0674390433111196"},"_hasShrinkwrap":false},"1.25.0":{"name":"@sberdevices/plasma-ui","version":"1.25.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e66fc61a53ef2622d1ea3d29dcb85ab21ec1dd7d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-aUTpXJYRuYmAmkUKll/yRfP57l5cAHKAtOmXiaiI4b8q9cxfvnTv0Tv2hXz3cnMnaYshJ+7B82moF5N4vda3Yg==","shasum":"b013bbb2f5e81fd1052a593afd41a9207992de02","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.0.tgz","fileCount":472,"unpackedSize":986838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5tLGCRA9TVsSAnZWagAAdB4P/2rGIP/5zhcGhTFijojj\nPKnYCIc6LSqyA59o8bGY7NYPEM+BALZJBbQSzQ7kr1CRVJcZdCReAfv1QlLm\nm7AiOzG8sUOcwOWsBMlIW7UE9gjTvyecsAwd9M/cji1OsqJSdWH2DqxL4ppn\nzIEpVaGwgX5oZMwpY1eSK7+YaFGdwTSC5bq55IBkBQvpDGmzP+clJAyZtyWu\n+lFLnYVQ/CIrNYNvS+P9bSdValDQIF0U8TPIrVK/XrjqYmkHe1sKCR6KBm3F\nv7NCdothS72WqiMEl0Q3Pc/q/dKS+pTF08WfUUCVoRkJ1m/QzYbp7W/5GrLT\ntg72MXLolZccgnxvPdmWZ+fcSogK8O2IPGE8ZtRFZnHW20ik6iy5WVNbbACz\nmcexRWSQPJcnJHlPxdyTYl3S1Fg8q3vzJYg8adlQ6o/nnDbspQBIUQkAGGAm\nqWCTOzZFExNG06RSdAUUHZY5qjZwEL0KYHe0/2wx6Jj+iq9BI+YgwMfgcPIP\nVl71gqUz1op3L84u+IJKOKXElaJIKbpvYfE7NJnCCWt6WdN+zvoL/Pf6P7ri\nxlCV6LQxGeTGzRQ4Lr0YfPFebx22q71dhG1ZmiNzSew4PJp+aYu0CmQU52Pm\nUhTa/XB/3U3+rjny4RHjPNIAhfy+lYDBAkwl7kuw8tNvYGD+sO6FW14eiiGc\nJk5z\r\n=ADAA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDxRubu/RGS3GY9jK6xNqr4YT1+AM+xouNrTFUfQx3FgIhAO+muQqhK4B5BeDIZZ7RT6yTdCrddLDA3gEf/OodZ/Qw"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.0_1625739974234_0.11602450557561506"},"_hasShrinkwrap":false},"1.25.1-canary.517.1c64e2bbd0e5dd4555fd585a5243605182d8b435.0":{"name":"@sberdevices/plasma-ui","version":"1.25.1-canary.517.1c64e2bbd0e5dd4555fd585a5243605182d8b435.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.0.0-rc.13","@storybook/addon-backgrounds":"6.0.0-rc.13","@storybook/addon-docs":"6.1.15","@storybook/addon-knobs":"6.0.0-rc.13","@storybook/addon-toolbars":"6.0.22","@storybook/addon-viewport":"6.0.0-rc.13","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.2.8","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.0.0-rc.13","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1c64e2bbd0e5dd4555fd585a5243605182d8b435","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.1-canary.517.1c64e2bbd0e5dd4555fd585a5243605182d8b435.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-E6zHGbcBF12WdcyXv4fzwIgY5lzVybQe4yJztRgEvGfCKthP2NlqSx8+czdPsJsQpq6+c6Q3vjwt3WjkhwUNVw==","shasum":"b64443364c07c231f0355b0e8c46d7fe975571b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.1-canary.517.1c64e2bbd0e5dd4555fd585a5243605182d8b435.0.tgz","fileCount":472,"unpackedSize":987040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5t7ICRA9TVsSAnZWagAAudgP/RM0yIU40Stq8MW8qzSd\nGLz1btzo4YwXtL94w5tPNivBU2rDRBaEX9iAZWiK4MPKSbO3NNwkKT+jxnTy\n6YlGsCtSwqp+0FbS56EGJ8fU6XNJCtW7WpWjlNAL+Dtj0jGqbvcvpkGORKNY\nciUgp/xR6PbhrcVPail9zqV1YZKVDivjqEJXAdgwqF5+uwU5roAPvpjbPS+8\nik0jqk+ScjbNr6u4a1PfmVGWg8QYsP9/810rkbSUqqVwJkzxZsxFc9T5+ZlZ\njQHPfXmqfeM4G+UTq/igC8/ZB0sk+uEbjaBO2ygdvmSmwnitaHVEIJHEKFgg\nNUieoCJt07LSQb/TMOPlCR1gEqoBXwwxpc8h4WEKOQiJipj0ZR6Byo6ZwA0P\nIobwojZQwiYxZkvCOzsIxpfNCVcodVT1/4jDHpdSfL2LuakRsbj8Kk3e11U8\nO4sA3kmhw8oklnCSQkqYnnjs34LYc00UoeJS4gP8/eku6xaOvq2OOMOzGIXT\n/Zj+vMG9BnoQYhVVAevJgpc4L9G0gQwLanaQZSPvw6MwNAqVJ2UJxhXUQ4Ng\nSCCosR+6Z7lV4kCJC/WNsMdkF3geRi26OGb5zgYfbXjub0GUdtkoz037iAny\ng/pajD0TA8DQOTPEDXTdTgApwB6AmDBMyEXC6fbVRCS4g/CNsoIdONd+I6fy\nfaXj\r\n=0IFj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+NGP42ZBMssyI1g7rFYq8hSDSLjee6jl3Ms16HQfyXAIgSGVXvoP3yXEr166cjt1DxCQKKq6eMJDfhMB2rJrVTlc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.1-canary.517.1c64e2bbd0e5dd4555fd585a5243605182d8b435.0_1625743047969_0.9349895097464465"},"_hasShrinkwrap":false},"1.26.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-EYeti5dx7amlEnU7pjuBThI+A5Nm28QJyPsImRUsalNtovhAMniuyeMafuBehmEf9jnI8BMXJ8DUAC2Zi3vDsg==","shasum":"59b94e3924cea8cc002bb42a021c5b88894432ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0.tgz","fileCount":472,"unpackedSize":995067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xVUCRA9TVsSAnZWagAAuSkP/RkJ+5QvJUqAkNRMzBgW\nBrtVur542Cc1m7kTjlRjL1+JCQUW9MCJMy7lblstvtL2r3LqvZ00GfX1UWNh\n+NmSromcTsiisKvLv4N6s6Nmdz4S2JmHl15ynmHGVOBAIEods3mMl/bYBMGY\nWiO1Pno5FsLM/491yssn/y5gXjVUzhtRqzUhHtW2aHBiOGaMZOe6htJmIkGg\nTm3q1yhxE7XKrFbo3yuZy+uD8ex4z34cszmGeY3TQB3qYj2A7B3td/yD/nzt\nqTls4ZIyxuOFrSBtzGpzOscpnlCMRcHGY36RhaXcIz2Gnfg7IzBODKsykHMT\nnLnDNeOskHJ0a/Zr0z20wM1hWFbLTe4iDN1PMuaxF42MVJm+Lc8ULOIp7Nva\nx3IcT+G1jIElAncSYzpCn1kGYfQ45dfcuSDrg9YZb07nea0lz8OpWMUDPLpH\nkMMd6d38t6QO6Ahsp1iONNsA/0hrhDcbCIKqvX4ymF2B5F720+svF54Uliw4\nn9k3Do6NZ9p2EmoSQq0gUGeC4JDEbJ9JP3ScOiJT2uAC0OBX1xOlLZWuBZSG\nir+d2URyRTshriu1V+HQldQw3DCmmFu0D0IPAISOs9eWOva9ZJGF2QvH98uF\nadJnzrkxoZol3GBc/NXhnEcHsDa0Pz8VvPdXDaoUmEOC86flJeuku6K+1D97\nWdoJ\r\n=3S5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdJb2dXRBooc0TBjEirYHhnVzS2VJlKy/eabcJNxyvBAiBQ2wtYXXuUrIeTREb2n0DDE1GHBw37Ry3GQxxd9ZN1/g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0_1625757011931_0.5829047423298248"},"_hasShrinkwrap":false},"1.25.1-canary.517.1ac9da57ce17cc818833f3384b78c0e7d7f1d94c.0":{"name":"@sberdevices/plasma-ui","version":"1.25.1-canary.517.1ac9da57ce17cc818833f3384b78c0e7d7f1d94c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1ac9da57ce17cc818833f3384b78c0e7d7f1d94c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.1-canary.517.1ac9da57ce17cc818833f3384b78c0e7d7f1d94c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-NTLo91zZIQso2rVPM69n5P9zQoBXCCVrdi6zeLSzqImvGTv6wzmy0cSJPrXg5kDiyKDlb/yvpyf/PrA34lizZg==","shasum":"7552e61b27698ab3f20eb69c3f88f4c6d6f3c971","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.1-canary.517.1ac9da57ce17cc818833f3384b78c0e7d7f1d94c.0.tgz","fileCount":472,"unpackedSize":986118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xt0CRA9TVsSAnZWagAAbTIP/AgU58xc8sdSgFXvysgg\nodzH6tBstQkckUUb1q7iH9xz1V2kY5r8X+KU1i8XmmoNKkceCLgOIJpyIFe1\nHQu3yBGMXbX1C1COHnlvF0DibDWNZyTl5jYVLEPg35BXXDhzQdf/CdpTFiRb\ndYjcSLwfsJvUf3pFM1r44Mh29pqYUNS8L+z4ouTzH3uXugyL3hgj/7LWgnJq\nY3HJWyzfuUDpKAqtHUAuFWEtUpe+08Au4rSegP4RtNt5rpFYU2TMupVCjFZ3\neCZpFPGXZ+pGqXgcbKsl1KdqYhVeSvgbQo1uXu/M4H3PxTRyWxnfonMd9zen\n4MKH8Y0thQcXJ80UVFHkcCekhCI/5FATfLzMA1uv0yqp9w4CX+HZ55NXxxfX\nwRphFGEeGydlBTfuzuK1LtLCTb6+pzGTgOTEcnclTe2CJTj5urEQjwPFoLVD\n2s3gvsHv190i8KaBFdoHhBGP9HW9dUz2ZnubI+SxcEJFPY/Pk27/kPbmGtfq\nvFhV0GL+vXIxMfO0+YWrgRVs/xLRLtww/Uk3KovEYnv9dU1MCg0z1qy7e2PX\n9xSGpcu+ARqn77sLF9lq5RzJp2iVeL1kl2ZrOnUUKw2YvyzoBkxptCPQiGRO\noRyI1opRdDDSV5hw/pwoUOXQlMgI8UvLk0L6rW6enF2OX/D31EWRPAp4FbC3\nWTt3\r\n=oe/U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrHmuLqVBA8CxJvRrP3qSQsd28tyQ117LsevBwMJGpIwIhAI0ijmou+dJOZy/GfsFSdForaE1vQPz9GBHWBMgpmA1G"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.1-canary.517.1ac9da57ce17cc818833f3384b78c0e7d7f1d94c.0_1625758580262_0.4091100141787003"},"_hasShrinkwrap":false},"1.26.0-canary.516.3d5bef63d6b7e924ffbda4a230759c73973f0ac0.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0-canary.516.3d5bef63d6b7e924ffbda4a230759c73973f0ac0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3d5bef63d6b7e924ffbda4a230759c73973f0ac0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0-canary.516.3d5bef63d6b7e924ffbda4a230759c73973f0ac0.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-0PXkSSkqZf7n2hi89esd8BwnFK0Rr03MclRuG5zeT+xmZsfAo/H0tkUI2GF6aPlWxxiWfO4llxPpZguati4DCQ==","shasum":"88903607a1c9a6ba487f15f3b619d2c65a6dce40","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0-canary.516.3d5bef63d6b7e924ffbda4a230759c73973f0ac0.0.tgz","fileCount":472,"unpackedSize":987095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6ABeCRA9TVsSAnZWagAAOFAQAJLrVwKg8HdSPF9lISfZ\nR8t5qVPgPBys1hQ1a8p+M+CF5V+FyWLfrri5EZ+UyMYxUemvtY1aqxzZJucT\nM63SDBKpWBNhpXDQFr6ieYuqtKl6hGM73UWzWTA3sfMTSO4btxvoZUvEmLau\nHqyvfXOVw5yd+cMkpf5cObcIlcJD13Q1sLkB6MLwB7uFmcFOc6gUDOZSo6MA\n7ikA+o2allMO1No9nNNXj9uXHYiI88ppRB2zIuozmTJFEqDCM3C1z2NBvOMD\nQKxkNq73JcLN8UPttqJQ0eP4NkrgOZT/8bfVC+zQ3P/9SND+vDjBewZRr1PI\nbZsviMIhbhAnhacSqaV6J9Xq37Y9dM0aaOZZToRCUCMxO0U5bUeNXPeHAC/y\nh4CU2TdesL2ztz4qPDI3TeXnNamMwT+VFDuobwqR1g/x/lSyFyc4019i0QgK\n5YwahuxjR3lWxqDp9K7ulPsntRJlDjBjsCAuf106mUDJWUxHXL9ehxXqycZO\ncOa4J+8Idjpnm9ErUAgdwQYXxEPaYqZoK/x3KZeTgocRJnVZ3Nh8NJzvCRUx\no/YJ7LeADbZSWV8PU6k3sJLgTLMc/gu//zqWNEeZkcEGtCC74IvicFFJZuVK\n+6fxmY2MAWujdAYDKwhEQ0cqpP0cpyQxXa3j6fd1VKsYJzgx46dQjf6j2YZr\nYkmn\r\n=47Aa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1okad0VClWvjNiC1Zx4PriJIEXfzGsXDFrVUeftIOZAIgVoFdRqZynyfFigc31Cok99hpHGQIGWFyDtMNI3k3Y1k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0-canary.516.3d5bef63d6b7e924ffbda4a230759c73973f0ac0.0_1625817182177_0.5988281240071043"},"_hasShrinkwrap":false},"1.26.0-canary.516.36453d84cfccc8c1fc83f465656a6d1d61217650.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0-canary.516.36453d84cfccc8c1fc83f465656a6d1d61217650.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"36453d84cfccc8c1fc83f465656a6d1d61217650","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0-canary.516.36453d84cfccc8c1fc83f465656a6d1d61217650.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-upSUednnMs60hAeWJVq0fsprcScBYBkWQj2H7/noEezn2Dnn6uDgUtRqnlMgrEvLkhreljWN7zuevLBqFTaxZA==","shasum":"085a49e816d2260b38ac3650bac912c50a400c09","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0-canary.516.36453d84cfccc8c1fc83f465656a6d1d61217650.0.tgz","fileCount":472,"unpackedSize":987095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6AYbCRA9TVsSAnZWagAAGUEP/j11ki1TALC2W8JD5xAK\n2027wCTdMnNB/yjLup6O0VXLznH1R+AuoZNYb1uBjqEvPg535Zluknt/iKEd\nvBn3XIFYRstk2IIQIRwgMRYyG0gurC0c6802/0qsY2LULoFfmdkReJpyRSc1\ngOHaLy56rD2KM2UFBJMT98zKnNiblIJIPYQ3e20yckPdLBbrAP6v0PyTGaEG\nG3HhK6pum8ZYGZxlSOhhiiMc9nMEc/enC01Y4pdNYRE0QA7BMdw3Xu7KsugH\nbltE1OTtJCHT8nKBttX7gU6NVedqa9iPOioMAoEiJik4NojY9LkStzmFhr6s\nN8wvqPkAenxtgDHC0uXQZkUnZEsQ6OZQXiCZj/5Xm4dYrdZ8x4hqta4h8V4t\nCvJOLY/tCcW+FGDKPwUFvJkBDFbOuMBovQeJvf7QEchlNgpejaxxXIMYLBr6\nqYoHh7q5DSaD1sEV1uYcxGcEidCR3Dpnd8I8/diO6wDlbBr3/9noVXFKPEw+\ngI3R6UJqyM0XJpuaZD6vbfXvMSEq8mYgkkdr/Sin5gX8k3p39DB26tPtnyOL\nA/E/Z8dNoCPQzdg/i9I66qVmQD2Re+qHX2NNBCbSaaNtD2PH+BIWv8aA1N8n\nznv2MRkPws8sJr4kxa7dO+YMc4LVpDIFj5KNf82Sru0yteGGEZBruov2O9IS\nVoY/\r\n=aYXt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa9zdknJ19Tbe2Czxh3XnhniuR5X46SRepB7/DNZHynwIhAI+esaCR29pxEX3mCdQBZcE+3PQxKRhkawPL5UMtADSh"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0-canary.516.36453d84cfccc8c1fc83f465656a6d1d61217650.0_1625818650739_0.11130410726745343"},"_hasShrinkwrap":false},"1.26.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"63622c968460c696afc8d17dff52e9e221e0fac7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-88mIiv8ckFjF61gbyUQi9mpidUH8CcSQz/j+3QJB0gOWdDvapnobgnC6n5APSP8psfqafZ8WOqHm1TJKN9AUTA==","shasum":"88e1eff7e3b6f7cc031a4118c472b5ef81ee19f5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0.tgz","fileCount":472,"unpackedSize":995067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6AxCCRA9TVsSAnZWagAA7vwQAIGZ8qzKYMe/gGrv7BCC\nB+u9ZaLTI6FNt1QkLh81rHoZAH7WfxeJrVOgBINaAQ/HnFMAP7dyOiM6g+O1\nEnl+LlHAGQXn5JPIQa/eXqZBqSY7LuA5c6E8scoM+vNeYNQ2i86/JopPCDam\nyjtVPVuUr2LL9YC2AI/Nnx9Bc2UmEmwegfXXvDx+egJTmj6yTeMkIV0x95ta\nGOM7JvCWCQMDjtlh/dS1vS+23jJoysxlDWRQab5lt9W/C4ycaWcGvvq8ZJGN\nJRAuy06bu4upESCfpnN5M4r32xyy0+gN9ix/zgMKkkkFJI5Oe7EqCnl9B7gi\ngFiOI6mqvI27B2QJnJU2XVrwPlxheKlyvYuGodPXhDyK5OjTa9RtcvV7OEYs\nB9uGqZ+DUlTRHbuqVRMmejpgdSkzB4Gt28i3OUIhydowbks16EqwXRNL2M+r\nnoo+meuRsW+bzttYgUIyj9X6j06+1gGAFmlZObI8a4OzZKL3JZicD+mIfBZ/\nMcEMTt3XeuOgrRHixhgCeRFcPECavvblxb9n6QlURzTA1XZmY98tlPJ5GAOX\nLCuvULKXDYyWMZz9NvV7/MVLK5YyUcg/6N7kLvycxOEdEBSfhJ+HT7yAfAVe\nbfb+fkk8f1zs2C5F5iGgeI5o3xaM+pnj+G4a4UurmV2SXDoPITC5+Mt4N4wV\nDTpL\r\n=mk7d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLM8xAV3yNbAQmCTFPE7lP3xy7JUhThmvCUzfAih50cAIhAOoT8JfnREceggSfwwFoGKv7dCzm91iz8e3MFGu6UPdm"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0_1625820225871_0.3530303716930048"},"_hasShrinkwrap":false},"1.26.0-canary.516.c45779990b30835669be130c6f1b0c90e476588b.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0-canary.516.c45779990b30835669be130c6f1b0c90e476588b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.1","@sberdevices/plasma-sb-utils":"0.6.1","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c45779990b30835669be130c6f1b0c90e476588b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0-canary.516.c45779990b30835669be130c6f1b0c90e476588b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-sT/3Mlx0vbUlKBt7zu54d1j9IqEznx59/Xlu9/TE3GI30wH1LSQ2yOmle7JMJLC2ONqQkyLjKWVsmHQCePGgcw==","shasum":"15c57945c668b5fd85ba2d8739b3b7cb0d5f88b4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0-canary.516.c45779990b30835669be130c6f1b0c90e476588b.0.tgz","fileCount":472,"unpackedSize":987095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6BATCRA9TVsSAnZWagAAHAIP/3sYy6Jg7EWLFvwmGr8A\n0StLP6MKFBwJdw5rgIxoJRfqjCWHxeRirk6zdPSCduUd6MAge9Xe4/56ScuO\nEiDndntAVuj5/y4uO88iSSEKfomtlqbGIELWhpsSofEdmc4ABbMPoO4xC3aN\nJkZAGVi5EnGxCXR29PVBYcVNrifblXxUTC2oERXoGjtidSlGcYP0FQi+I6Fn\nlWkjNKNBQkuvTnYTBo/XOoAGytBozu1hcS8mSeCC53G3SDh2IpDov5fPXCFS\n/QP5gS5z7qbKK5+LgDkTEzqoAJCUaSY9rmzln6iy6NHtjqebXEeUGOeBnntR\nRPjwzEdrZCfp0fb657UAZcTIxIyNTRQQeWKR4oCA9DlNQRo50QUx5KuFgobv\nF7fzr5iJPdGgEypK/lffvKOYpkmji6rtBoPemvpi9aShYtuxpOvksxGb/c4x\neRb18Te7yoXwnEJ5EN6k90gomYh5zzvsa3HC9lf8sNh0iS6EKTPZpAdbxYGP\netEtO2ciBeSDFc1n+tCaRv7TkZ6geV2hO3kYjt7YDpRo+4/fulQYO/v8m/DC\nCsQt40x2D/5osmeNDhiILpMUc1ZZHbLPrQ6jwcGbtW8UxuhQY/GeN4TUxa/u\n9TIOIJLu7TTzTUcmJlvWl5crWTrGhYLSB0cMMFGcQApW5GBBCW4/Ge9glawU\nD2oJ\r\n=3z5T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq8DpwtNFSESABFtvXfuwBJOyxXaYdB3ZgKyV9hD22VAIhAIaQspwfaqNY+7/4UINr04GeA8J9+Mm0NjU9V1wFCI7m"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0-canary.516.c45779990b30835669be130c6f1b0c90e476588b.0_1625821202771_0.6546022010982151"},"_hasShrinkwrap":false},"1.26.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d3a008d7a73bb4d9125aec9ec1d21932cbb2a095","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-/5+HJmVGbz4RiRsZpHU95oWVykXALvQp8X2IZFm5PWwiAH/rkpI7hs1PSf8s5hgWlUWax6QuJvjkIOoaCnhOpQ==","shasum":"72ee6433119583b44284b210e46d19fd7f16f4e1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0.tgz","fileCount":472,"unpackedSize":995067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6BArCRA9TVsSAnZWagAASc0P/1A2lIDE9tmiu3zs+PMD\n2W1Zgo3Xm/0CcOYBtL3PO9fhv43yuNuEqQlLumYBPcOoxejFa4JdDdByRdCd\nKDtVc9oKtYrQCBN45EodNJeBXKBsxNRijr6KKE+0WccRQBNkgpSgTi438Rpd\nO/IW6qiI01Jza5z73l5CnaAe7sGEH6HwZh96dOCakD7+BXXCpB4CFpd0350g\nEQZ2VAPs4HNNCVsExHVLgGmtNX+qlFFrZbkMOgzBZ8aCksLbJTqDe6ravdHY\nyYfGEJVuvt37rJRX6mM28tcrr1t7r4fHcZLkaezOjAedExoiD5Snpik7BzNY\nr4BKNSuY1zkCLkcrNmifX1uYfstZEiNhZ88ECtG+qnnmoR3B1f72oBmgLgnG\nUKbr3Kt0RbjtzIZWIg59Ce7JXOEBWjOnjlU8y1LJmwIicy6cJfXGzGGSp/Jz\nsuFZAJugyqh4HLkdhleIallEsCR6RtsjDARv5UJ3WZyZTydOXdOmTzdFIg3n\nsd3xTUbeksjRAcaZDckzpWGvEinW+tBjOrVUqhBrZS+0hj7U1I3T3GEKUwuL\nUcfjsHjyRGqRLb0y41ijw2nNtkbF911sFRhsrvuU36fIfFss+ZC429Yai0LK\nZp1+xqjOL75EB/TrABCbuvkdx8xXNfF473Vfsf+n4ONCFxnX449hwW20wHMI\nIs/w\r\n=zgGw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzo5OVmUQamOm55BxkUupvcwIZ6gedBTDkHtM/7DTHIAIgQlN7XRvrJJX4uMz3tuQTKCXXFgZiy2NGXCiZqR2lpWI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0_1625821227113_0.1167573983372232"},"_hasShrinkwrap":false},"1.26.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0","@sberdevices/plasma-sb-utils":"0.7.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c51dd91226eecc1bad8fc54f73bf8be59c5f71c7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-tXOKaxYLOOjBg744ISQqDANaJAW1RjLw/SNjDJ4/zIH/EwlTMj+RJsnqH7i5PllAhP1f/eg5TdIzxhvgk7S6Kg==","shasum":"16da3d4ed794d3f98641e0ca0b2f8e35249a6b35","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0.tgz","fileCount":472,"unpackedSize":995302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6BSqCRA9TVsSAnZWagAAZDAP/R9cGLm7IPlUV6eOsCeB\nYzdfKKFBmrx2KmbAe8rtA0M04DwSETIqIISQP9B1O/kuzcHKJ+qz2VYoqYJC\nvys1sTqPjrVaOcKhm9oRJD4ZF7JxzcbB8gdFNaOLP0R+V1jNM9DaNExbHAII\nUy4ia0qK5cnODfw+NeRd39m7Fcal1NaLSMaTmdZDOCrzIIFzr0USqOFVSGDb\nYUqZH045+nrd+bhRePym2RII+RKed+hH8m34vQqrmp4qVSkCBac+fDnyjbcc\nSWosZiWEy5cbOj92IlWhOJxTCuaPK93uBNE0dX0vgXkNqW+GG3h8ax345u+P\nhoCKPRoThgVKxi0WZoFQkMD8GJ09A8qqo9skOW1c1fCSVNhKR/voDX4eInJh\nWHDQnD2RRnsWiQv+CU3VLXzd71zD24HFlzgJUAP06OIMJXWVLRos+x4Ax09R\ns9d9XqzRNu48a83rDvMHDZyoyElbSbifP6doDdHkUgC7LNj8utnZmXOiPSlW\nIDWJbXGPeK3q+LKvJLv0FbQ1jTwZYodQUykYGTXApTinJOWY6z3KguvtVkmj\nwzh8poSmPHUjUUgsNbv7GE1ZWezhZzOVV0XHTaHaKsxXYrhdYcS1Zaj61Q0x\nMFuKlT6/W+8usVwqi1pyJyhEBg6A3Nr8hdY6ni+x633H6iO7u60P1f/SjGTz\nlc3Y\r\n=tnxx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8AmEMwzw4FcaU4Fw/sUbmZjxcTZZ5uMySGi036S6dEgIgOC3vDFtF0qAPPbEw2PnhDr2rtmqorjkU1sydG1tWUJU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0_1625822378434_0.04208633446812349"},"_hasShrinkwrap":false},"1.25.1-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0":{"name":"@sberdevices/plasma-ui","version":"1.25.1-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.16.1-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.21.2-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0","@sberdevices/plasma-sb-utils":"0.6.2-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6362184244249881b20907da6ea9cbf88f3bbd65","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.25.1-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-341jKA+TIcbvNUMQccBvd8w3vxgFHjA1IaPMGT6L/U1vuZUF9JOV4igEQm9dl1jPhdxM5GTN1bLufIM8DaBEPg==","shasum":"93d602c820e47d244b597c86af8943aeca4b627b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.25.1-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0.tgz","fileCount":472,"unpackedSize":994743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6BxSCRA9TVsSAnZWagAAm24P/1wkfH/8Citp+bUI95kN\n0iyy6Xgel7sDTq2VWiP5KAGNwbUx07uLnA/Gpv2bxFZS5faWL6GL6zcBTQTK\n0ZfnBbYEdfozFl1vj77ezp1lN0Hd8zS98Sjz/oa5a6jysboZuqzPTCWOkeyi\nvMzNhsbt/AlENuE/hw9uC0No9QRtNCTZANm/s8WdB1j7oDt1TMlNC6A6msle\nHUTYI/h9fm1gCOpUqpgPQhpWVL8wmznWFvxKD9AF1Gl1MaWCiUw5NjfxR46f\nFuw9nvNFwkpHPqhDVBTmzv0eSbo/Y3ESkNmvNpr2Z3MDrihlW8JKr8PG4vuy\nvBVRVf+QBWHSymhIsDReDJUHXf5pY1MUpuksjf4UXkbyBI/zmXFVhy1fbE8w\nWQu+VqJ100MqfzLW7dIA3j1pzDgMMkT0v3J4YQWIwNzHta/PqLLj3hz3Duvb\nCAAdgFmflGdJmc1rmp9uQXFJnkmdYmhI1vwd0oMDf72ujV+C4Rd5ab7rDgwG\nkRC80hgHTGpCoX2IBV9kJVbvNnsVdS690rkS2qOVNjLFnfNSgqNz2YuvYkSn\no/0hbXFMArokiROINC+v7CB5mfeHsZdxQklSQiUJV5/0G7gNGcjJSk2RAaj9\n7PL5OGPd/1I6mSJuRyz+NiZymjNnXdIUc0P03ca5siJMvGtFRKn69wuGfBlu\nKt2q\r\n=7rNw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwk3OQWKPGNRQUH8Ahtus7dg2E96d6Z3JsJyBqXBHPXAIhAMCQ2SIxYODJR13fH71jqHFzaaWSEkA3xMJtdRDuhxvp"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.25.1-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0_1625824337920_0.6344867619361378"},"_hasShrinkwrap":false},"1.26.0":{"name":"@sberdevices/plasma-ui","version":"1.26.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.0","@sberdevices/plasma-sb-utils":"0.7.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"64df3746e0afe1b280ec75e886d7968242c736dd","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Iil4EgnzZG4NXoteoxeQOoUmtSJ+MO+RW96kvpDz/A2KL4HhjFDfcrTFZrbJuqdlTdVjs/W5iTQcEQIbLNi3ug==","shasum":"54a1bf960f956e5a2b7e585134b4ef5e71cce200","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.0.tgz","fileCount":472,"unpackedSize":996960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6B/XCRA9TVsSAnZWagAASz0P/RuzBIEpR8K8qojf3UY1\nbnC3YgvopAoRcf8RrI89UubdmimmyO8bD8FsRYwGKEFDnTJ2S79AnjuDebqu\nGdHMm771D8oOqiQB7ib2s2cJfe9lS7wIBd80ii2f5kSJfQlgdWWRjQdjAK6h\nrEKzVB3ssyTWfM1/LWaCsp01oX1weL3hkufM2XpAOP7I/ca7EQlLxm00kJrA\n+BAd4/2ElS/SLVDySn7HjgDMOFIb7tjFw0JbpZcWf5BghUIl0HRKgUIgTFDk\nN0YhUQB69deEOBh1HHR4UGkgpqS/pIwzwWMPLnQYUrJq7iuC1fx8S/c4VfNL\nt4Ln3MQQpL601dkEX1I9/gF5L/p87J6fQzaazJARr/z5y2dQRpu/RujhH680\nH7K35QX748qSphEXwUZXqUGbDfUCOMtLJNH9jfPhzGh62SsJiER7LXDXwEan\nyndBsPmpoD0n8peUZ1wEBdwST147BFcVsMN3wad5YNvZwYlNrAMeyLsjgJwL\nkCExhgOkQIuItiAfiiVTD2vcUjdrTFQ0ZcfC4zF9AeaW3LA0Jb3qXbJjZXhK\nqhuJfKzniPzS48yif1w82gd+scdc//92Mig3PoBf/fRqXRN37SIBVv4ImVR2\npHbjOd8fWOWwWU+qXdAoQVARg61bBy3PM7w3spPw1Nje0MVkUeKW6gOsK3ct\nj6cc\r\n=oFel\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlS9Rl99nD/gma6G69b5IA+WVYH+NiF0R18ZC2CYfPBAIgMJfhzC0H8yWg3C093kRPo74Sip+JqW+esqneGYgsH34="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.0_1625825239370_0.7717962953314208"},"_hasShrinkwrap":false},"1.26.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0":{"name":"@sberdevices/plasma-ui","version":"1.26.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0","@sberdevices/plasma-sb-utils":"0.7.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"167dd7e82c42fb8e051211a9b7ae066e195ee95b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-1aaenyQ7Qj/+Az7+j2LOCBzBJVSwazMXGaIJZuRjt191WWfOr2GbEo7GiSJOUteXO82cFV8Qw7BStNng8xXNSg==","shasum":"21222ad65fff20f759331464a3f7d714bc0385b3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0.tgz","fileCount":476,"unpackedSize":1004020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6CqxCRA9TVsSAnZWagAAQQQQAJ1J3j9mA0bRSyrg7uzt\nzZOYCp/6NtlSw13EqOAsrelj8yBMtI0vA6eE6k3GvDzJCLcrqR9LzOPacSxt\nZSU7IJlrqDlLfVXpKf91sHQ0H8gqHaslyOwj/Uf6at56Va+9Swgp9hR3qyax\nxz5BfZCeYDLzu9hEtxjR6NzpkjmDFOwpO4QckAuZF140ciZdNHneLdSqUG6Y\nRcfppFCZf6toCtMnIy18S9UGZ0Rw3Qtsb3PAwWMNWraSye1V7QdWRX7rNguP\nEWJ2vgFZ+XAGkNFXDP4ypn0R/b3QccviUzNdQg8N91XUb+7OlilG7EdLW0Cn\n5ZfZaTUid59yDjaBSCahh74AxiqcinLthII32brteKiRVfFRe/ueaFhbXowU\nEs0IgZUDgfAtK3I3NT60RtIh6rCqXKl4e04vYuBZX/3/gTOTJI+8l2YvFYfS\ndMn3si/zruGTX8OSVa7cKX6MdaFJrkkceBS48TVqBuigvSxUdkTzsauSxj6w\n9ykRiklvIr3HW9xXrkVjcfsn62O2WYbFY5V3Mh9YmqItdY4FyMmvXKsy6k9F\n5Ri7avS6DIKueq2/bj5EuKXNv6PK26I2kPB3VGH1t1YvYlgfZqO6yWrpASNR\n6K2tTH7nX2ImEPKB33TJmH48bGbz4h9TE/o40z+EjT6SI2xY9o7d0u0dMp5J\nxE8E\r\n=Wsaz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtLs/djuzqkPjb75t5PBmQAr8zoiPaym60d/0pen0UwAiAkfQJj76JoObTsg0UGQfd8UA0N76jn0V0XbwVUC4KBvA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0_1625828017165_0.48819755179686886"},"_hasShrinkwrap":false},"1.26.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0":{"name":"@sberdevices/plasma-ui","version":"1.26.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0","@sberdevices/plasma-sb-utils":"0.7.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"126095a1e23088555e80951d26a6e0258362d6df","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-/mD7VmOprbJ6hyypoKkmoHTn/I155+4jaZ2tEFmSkVig2BaEcZAUFhmwj3gVJboxv1ZamFE3+JJfd83huZyuAQ==","shasum":"116d79acb007865212916a48713562cb40698515","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0.tgz","fileCount":476,"unpackedSize":1004020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6DkhCRA9TVsSAnZWagAA7A0P/iu1PV/95BU7CWuRagwY\nLBV1xq8NS/uG4JVciT8EfRkPd1uRAjG9SbXCZw/T35KElDmgY1YDT+fFqfNV\n2xluVCigSgHRvEqBHepy6Z5LIHeAmyq1HCWrKpkSgQEjBetEE9e4u5s6SekX\n5x7U3IrfXIv1LQ7DqsRRWgInpVvPXPmS7pqJ6YqEWsvE7wELF8hLnqnZhUYe\nn2WAu3vQae3l6CJoB1Oa3hF/5VQn15hledoqonIEpjdixi1X9Phi9E4B3QRl\nnVCybBNQopophVeijn9TVyWn98ToZaRh574a+K1M0xBEaygUO9KAArcuqcBo\nx0ta3n7/JddnYWGr62ntQSNkf/psEXx7KHmrhw6U9Wvt6h+wcYR4ESnAOHXt\nrueBnChZb+6k7a/EZBhscC9XMFInqO+SGP7g26h3NJCpto4NL8R3sAUP7VMH\nzPg/arQ1SbfYpz+p/U6ys2mAqjCXF7USLl9PV96QmJluCfQLaUlCXdJkc68I\nvQ9Q+NKbt58WmBm1PJHI/gdEWtU7+2eQnAiC9lf3W7sFL1wgBA0XvMSSLPLN\njW8vX7/YJnj+DCn6zhqz3d39zpCagYO3aF7NFOl/L1ebYvRiY5i9XnQLp1sI\n4OVvYOMFlIoIcjBBEdiLyBGlPlEcyhvMSx0f/lqTQMpMi0PzYPssmI3ssgOW\nBHqf\r\n=hY//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlVVhZw4aoy68RX2ajDjBN1Ifi00Npcs368HYU8x5tZAiEA512amuqhx2LpN0ycrrlG8naaTWHxIJp5LiypKPDvuUs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0_1625831712822_0.28390815924460133"},"_hasShrinkwrap":false},"1.26.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0":{"name":"@sberdevices/plasma-ui","version":"1.26.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0","@sberdevices/plasma-sb-utils":"0.7.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9111fdb37566bf1b6af1b741f470cc65fe25c29b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-dG65KPwUqwDtZSRJ3A70emrSS8psfxK6mHPX7e36dWxTp/KSSkpFhaYj8Ai1A8rq0cfjArOFrXwgdKK2E0l0wA==","shasum":"560e7f4a7151ce3771981b0139825f4088b1707c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0.tgz","fileCount":472,"unpackedSize":998142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6EePCRA9TVsSAnZWagAAKu0P/0sFjQxdT7tCm70/Z1QI\nBLh7WoI488/ilHdznvso5zbEg1LoXe+o26atSvJCnWBes3mVn9ONz6mKsxqp\nebgj5G7gGqHuDcB9Kg8Frape1ZbrTRPaEbw7iCEinwXITzKCTdASZ5sfmMTm\nlO7JiZAwYU54mM7MLrgi5ODLNNYNGadFL0J/D7YGaoXS2M2zR2sYKan1TlYM\n+akHcW/tYNbFpdU2cmZ9AT+J40tRlP5kvlBE6aZnMEOvAm7q2nLni5JJjDFE\n95rbXYTrGwGVcYSr6LSwaFSR7DtuE7eurqAAbUL2YgJolh/CsJPQinPqGdCx\nqG7MSQghoIfAotj3K8cOBztsYCAo1WiMce+VrtQvLCyOnk1fUCPVF94vDYS1\nLREaFrnYwIcGN7eC8IQEfaXR3ApTz9oJhHXxju6LMi2oGW9KHdaL/RmNfTSU\nrpfbDz9ATkcIkvAlaco/rpizvwSanNgM8s97jB3V5WPw8v+GphG3raaIbdU+\n9jN+iez7t4U7Z5sTqGpntEDsRO5C/o3mgw017HVSmn9B+tPq1COzX4m+gmev\nEJaGHOrxuB0s52ujRuQJvPCvGCcAmkidqGMEHX7va+VpQHVVeazIbarAYMCm\nJD1iBNjGSZ7wMX2mZSDaZrUK4SP0RH5tFbah0MOMjknP2X2KBNttjWzNfXHE\nla9C\r\n=j3wJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMEs2qRCXLWehMnR1+h89ty2ZDYWg/XxNYE/kBVnYpzgIhALshd9Axgn2LHbUEJO+SrTxswSnOmIYKiHgdQBtxsV//"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0_1625835407376_0.3735875873981016"},"_hasShrinkwrap":false},"1.26.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0":{"name":"@sberdevices/plasma-ui","version":"1.26.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.17.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1","react-dom":"^16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.22.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0","@sberdevices/plasma-sb-utils":"0.7.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a3c5c0eaccbbadd07018dbd6aafd36388bc23653","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.26.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-TC2UG8RW9x/nhWt0JT3Kx+cIbue1u50o+ZxGSeiVj8TfZ5rAMOWc6nFv+b9hHqX8PcwrhP/Ec0m1Y4GWtPCu/w==","shasum":"547b5b919cf9b26ff15e0d688c8416b77a3c90b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.26.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0.tgz","fileCount":472,"unpackedSize":1000102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6+3lCRA9TVsSAnZWagAA8kIP/jEcp68Wa0vOVcdyHBHt\ny830qOcN13b0kl7GjIFFqcQJ5ayrs6CR1gWNCKTCPOrR3NQI3gGo1xRBmLSo\nzOzbKMEiM78pFx6xDa07MmxahueoByVjAvwOEXWEQ/p3ZZ6wGjmrQ6tQCz9s\nuyJYjife3FdkcLFQFsMXa4u+/Vf3P7AS4p7l/h6i3JxkWAaJuVdQVkRNhR6D\nHEJKaQxogpNhccg+HKtd8g9Fsg9KXNpj4y/vxNEPZwJeGHHnCXDvmBcaTRSr\n4gMpxQE5FgZjhAB5Wjg4rLipCqFvCl3aGbbTdbNvpiy2nco3Thw0i5mukEwl\nOdaNwmSDTMI9/1+l5H5ufoWYZPjfv9p5GQXc4qcEhleEZdOGQ1PIML+Kn8LE\nmFDB1TsuPwYVjB2fqyUf6Pi4Hc7umKKaoWpCRYSBfbhds6xYJyw43qGyuJjz\nD8iKd13bm4hvEefSxq4gzJd7b4S5HV1ohcpFUVcpbU++91OtYM4uW8K36YPp\nghdl5THqKb07pqcx7PTegxNQKmOxHMVAATaMctkaW+AS5c1DYFAPHKALFg5S\nPYrXR50/LELLarr+QBRdHOe6tGtLN/vHTtGvfa+8OWTNxKEvBAJc46rnEiI/\nLRvE+LCopa7E4cZndBf7J4Sx0gMBgl3ldLcpYcsDU2q4Kdcaq1GrQDPc2+jy\nfrS6\r\n=SXEP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxb4P0HqHYU5THSYzX3DI22b9nmaeb9OboXItaxf1kUgIhANzdNmBQ92JO47RGVF1dMBII5xW0Ue6q/D9+36jtqiyB"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.26.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0_1626074597284_0.6296766927488529"},"_hasShrinkwrap":false},"1.27.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0":{"name":"@sberdevices/plasma-ui","version":"1.27.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0","@sberdevices/plasma-sb-utils":"0.8.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"287477f2fd4b022501090abe2f17f8590aefb120","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-8hSGcr1JPoZBAl8E1RWgKQzfaGHDOvUu4X9/yJeNlWMhoAvMvq4BL4VDG2Mp0NOJTYVKgfJXIDVrvvwHpwUwbQ==","shasum":"764bbdeb541f1dbb5ccf48790ea3fe2012018bc4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0.tgz","fileCount":472,"unpackedSize":997198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7ANoCRA9TVsSAnZWagAADekP/j4fBi/A9Mf15JANAIi2\nSu08B6t28R0/MIrzNkBXA6Sh4izlI4tKgs3vmeujtuSIkWBSEQFh2faG+3Op\nQBG/uhECGq1rDYL0z9YhrXpO5L/Nkuk+5OswzGpcJ5uIGe/heXXmwj1Axc5W\nhdxE9qvmh6Id7OwtkFeSDZhuHbIngPZN4VqKuMaTO4SdvVj3ceq/Lmnv9CV7\nlqhsnmRwJ0+itro7pTKZfqou+aIPnP5F6tOIl533qymGqOz0tHWtrLqgciid\nQNjDM7h92lrvCPZMj9OtszmnKskbJRxgmd+fBT675X1SJr9csQZB5wcK/cLw\n6+SdJsHQTe1uXAq/94rClZRt5X+VfNJ6tttgOX4F/Ds7TEiTScTLe1UfE+Xq\nKlF3o6twD6MEk0eZae08blxQIHxkhpwHcARkw1lgF9O56Oy/lrT/5tjuA0oE\naWUUbjd9UOyEjNBsnYvtNXfwwm45QcjYgKv9RzKZyOugSZzvVKdwMedHC8yT\nX6/qdB9L/7tbKTYjpsbUvqB8MHoi9qNMVDrJEy06i27JIfZaXAftbur3Yjme\ndqvWTASZlNi8kBArOw/fEKbiNqvmEKZqKqYSkq3TQzATYyhXQd01nMQPmAHI\naAK9+8B/+Kjktte0b7MAsQROked/d5ZJlGa2XvjHbXrKtls+gwXKTbql9r9x\nWCLc\r\n=1G8T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/j3JYGXYp3K+6HN3p3GeIvCAoQjGIYu2uX+jFXLjAiAiEAxs3KlkaVN4A7q46PF1l5u8Ez5/mZD6bO6DZQNjhmtU8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0_1626080103516_0.5066793961407365"},"_hasShrinkwrap":false},"1.27.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0":{"name":"@sberdevices/plasma-ui","version":"1.27.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@mdx-js/react":"1.6.22","@sberdevices/plasma-core":"1.18.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0","@sberdevices/plasma-sb-utils":"0.8.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8a94b1be26dc44efc07a15e1cb6aab45edc11389","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-4g4vI8kBZFCvNoDO/UMXKDYr8E7VlQqC/e8xXdcS2DFz8vRbQsE59SpKQXdGr3/mt2jhQfeEnUswWqUdcrKTOQ==","shasum":"d7e28835be5f7e7ec2aa43966d18d8756433bdcc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0.tgz","fileCount":472,"unpackedSize":997233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7FeaCRA9TVsSAnZWagAAcdAP/3ovxMlgkAws+3m1QTCr\nWT1c7qVLXkULK2bpUYnPycgsZnmw3l3B2rgJ8zrB4kYbndCoyygPoxdzOZdG\njROg8+jcaitWt+XtPkk+mEGOWx/xwajIBK8TdpnCjL9WSn0ryy7vVZtItgpf\nWW17moGjSJJCjFWN2KOlbvThxgu9/x/fFw2cJN7IKt2YBris/3h4PyO7kzZ7\nsJbfHvdehpvc40JD0afCDO6cGsBKw2qSoa4LQzL2vtfMRdxt6Pg6crx8Ys0Q\nk+Q28lMjj7jmNUV1cqp0P3vMjHQ2bJoofSUZRHeFtcTMyl2ycw2vJQTi2bHH\nP4A7g4Yewu7QVdJw4glGdew98PPm0RXMuvbb+qZdYCr1tjiR92RuqKQE1P9q\nrHMtokfT9c9aFw3yLRQ0/BWhpD4CiRS5mcptS4sCMjYoSSiiM0dxi0/sw3qW\nmhA4e/1Nm9ab9xEGF5BVCcZn1pkz58dr7KszcczBMYl2+ww2l0tLUTU5WQo+\n1medyaiGpuQS/V2kx+HawacKxPTTGAsAOtjiC8Qm4r01Ub7aDyAjnEixPLbT\nh21JuQAF6fPHiwMwkFy7HmOdq1lVUhcl/W5sE7P2JBz6SiV8E6l0mwEyyIMo\nYSu1Jp+2N1CfRC3/b5kqJB/Ics5jKNQpZBDM5inURHe1qoH4hRzwzrbiTGNb\ntgJ2\r\n=CbfO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8UojzO04/ni3favqfQGWFGSwKD9ON/jxofmaJVD3fWAiEAmnFShDx6dorD+2kZnghDwkPYz3MZO3vnHBzpC2O50BY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0_1626101658428_0.7300617898342039"},"_hasShrinkwrap":false},"1.27.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0":{"name":"@sberdevices/plasma-ui","version":"1.27.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0","@sberdevices/plasma-sb-utils":"0.8.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"743d444fd732ccddbe4f851d700a8ec06ece05cd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-xydfD3XCv17cNvSpgW0KFeJHob7xlgvPVdu9HVWbDu7oKljX4HIizUY6A6SVtDpUJmlilUQ2f+EW2fjgiVmNZw==","shasum":"4a7caf223c7d93f9155bfba714b10f89f3c34e12","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0.tgz","fileCount":472,"unpackedSize":997233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7IC0CRA9TVsSAnZWagAA9B4P/iOVZ39EogdbWZxCMeyh\nPwF2mrrB5TpiqGa9yngJnFSUDFSzpF0DlD5lCO1ZVg9jGzzwFTkeySr66JzK\ndoq/gdPb72+rRLPOZduvr4q8nySLpnvU9sg/pdyLOSpKNCH5sjha6Akl6bcE\nxKR+ASqqCOwLEdVs5ojZQw8tWweuT543fi5CZF/CybvQXOwmkciW6ulVGvGR\n5uSqIA+no2twS27mVZfEFUp73DN4dEhMokiz8uP2DoVT1Hu3Ji5jcYNBOUQO\n+tjAE1Mq6Pf8SUAzrOmzyob+HKqAv0s0OBJG3MLmlss//pYA3z1hrLXkZG8W\n0+YGsaCu4nka/ZFQnyfXiB87G0fDM7Owsw4Y67p7V5gsgW9PUOduvhOGyJyl\nEObO7WB6OnZLOn3fE4oZVNxTc4450i3WSe9UlFYP22G11x6chYpcQtMxnM9a\nO0sThHHGwoqeoY6anbkTg5DTxkJnIowdxfybHg6sXSqbwxXFqEyCodXn0/rA\nvBt+X4u1m6yFqeOuuy8MC552K0XrzChQ6+IZOXmB59u4fvtbtr+N5n2vSa8y\n5Pj3V9/AffAcHuRahPAKpeHaGAZotqfE88zwT8MEVbf5aR4OHEbMz8pwhh9Z\naKE3v9b2OEy8jxw5kUSawdYoONy2ujPhUw6ySX3W/duu+W8CfDYe5v0AamRs\n/yIn\r\n=WZzR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZzCOYgOhsR0yDqrBMiSpZjAY+69sFHl+CwlVllm9J/AiABpm+g+w6xF6w1y+I79BzccQ6nUXckicFx2Jw/XG3R/w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0_1626112179912_0.3990293003251424"},"_hasShrinkwrap":false},"1.27.0":{"name":"@sberdevices/plasma-ui","version":"1.27.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.0","@sberdevices/plasma-sb-utils":"0.8.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"536da0085e8d67d05795e26b6819ac02e56f26a5","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-csipQ1ATdbLs7Naz4LbTl2gET5PItM1ODWq7Cih3shz+/9ArPKbbgJS7pbUSoDCsHd0baKO8+fs/401N1mCWPA==","shasum":"62325afea9e6b4815d3588395abd3de5be63c92c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.0.tgz","fileCount":472,"unpackedSize":997451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7Ul/CRA9TVsSAnZWagAABJcP/2Ym7W1m8twOdzilRCRQ\ntZ6Riq8LuDSNjiq1drFCqIkgA7EtGtQ0jXah+JMTK1ImKCFlYxNO1+Dpkq0u\n/uBd3m1tyk+WoIlZRAN+imJkxJdeviOWnaF9DgoZcwOndIpaPWmFov4/GNkm\nFbfOqo3R15ble0B+1uY8SzyIES3UYgFy6XGzWsgkjRtW/jP4xe+ywJHGYGEK\nzc1Qo9R8AoNLJpmV2ORa53XBo3LJrEvkYn2V5/ABueVnJyQdgr8RMB7FnDqv\nMTc5K73Uomqep2ufvIaAna69HLteKYI5sRJ5XFiVyngowt/Dm9Y8I8q5NKc/\nZK1GKMvNyc5KcQ5IqdP//N3kTA1bIrlIV3iPYLN4CmoxZRhysfzthxp0+aOF\nWOrDPgkqs0QC2Ph1cnNKwxqo1ai+p7sYg7U41UR91Niq5ADplc9uBeKrPF9O\nVOzyJLs5aGFwWvp7MQXVYObsfXt/BAsr2+9pntMTkZHKrukkKH9zGlnJGzUb\nfejoEyhP7NIO6k4gm3fmifWw4WtWBuGsxa9U9GBkUGegetzotY5sKhaZBaKT\nVmBvkYbzTuy21tL8QMQVdwFyh/19IbRdNTOd1cdlLBdFiegW/yXP2qodg9+2\nq+TkIXTYrUkmMiSd0fdSYGkeVfiH6kbXJFYL1JmtLk/QP5fyURDhyVKZFWeY\nVHDL\r\n=ivcP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd2KB9TS+Dl7+5diyfJ2CsyMVwKNZ6ccX7CDX9chB4twIhAKL6P/Q78NMXNh0IGOY7S0F9EAYJ+RFdkx4wFNZXqJU/"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.0_1626163583202_0.5253436651007293"},"_hasShrinkwrap":false},"1.27.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0":{"name":"@sberdevices/plasma-ui","version":"1.27.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0","@sberdevices/plasma-sb-utils":"0.8.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5c60d9407455719b8f901610ef8f23db832fc4f6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-awqSzFtaKiAN+7CWUuMYVtJjvaasCr3wTZkMr09w2+Jy4YGjhitdFKEUEwtYciSNDGzLNevsGEQQOgZcvqpFxg==","shasum":"9e3771d7b4ba3b1a407aded6a94c0b61cbe0d54c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0.tgz","fileCount":472,"unpackedSize":999844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7WtYCRA9TVsSAnZWagAAsdgP/2xsuOdiGp+m/DlmkM/t\n1fZOrLqs77avv9fbxaR4k+vtEgOyk4f/2b8jZvdxxoHJzzyhRUNk4aEx0bot\nA54hw51HupnQFvQQQyblgSRGqISqAQzS+ebN0/UMG/SH920QtsWOGLI/HsI/\nZV5fM5k/r3Xlb51MNyrKuaUb9LoCclBQDTXizD+lHu4WCR3r3yrbMOrtfP/A\nBzSOTzoxw28ZHEpj4r5T7MDAOXlYbtUHpFj4Y0tjgBwT5lxkel0y+9XpEmq9\nkJhj+Nrnp26x9Y7JAqYAqriAnmKHkpSOQCzVFNZ+YJEo7klrjKFQGO9suSwZ\nvSEnVwoF3BADgswHLXrmspP6pfnni6d19g2HYKjiedHDxRrb8yjGdd08unc1\n2FQid/HiwLv6VJL4SiSHr9CCwnr2t/Ms7Ts+EEZDyHcYpvCnah7STCeHQYpp\ncAbzgghFMwjb76MN0DpLQ38Ohgfxu+Ypgb7ms6MJYVfjx5IxyU0OlEu/2e5P\nTzrlGMkvUmVsrHyB1tiCxlkf2hKoDE8ltcWMMM/HgMQNYsLg+A8/gL4aJJOO\nj2/39aLT5IF34bvzF3v+E8gIz9+JA6cre3ExdiuPpORhl/ky2j4xa9EX1Hte\n5dzB5xypH6HDkpcezMKB8Wv/F7RTAyUDBbzQxfEYIbcQixZCdILEdOIuTqXt\nusM9\r\n=UPFE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnOXiXlx+xItjHtw9H8ZgPk8P42dntw5ZfII54Kvxx5AiEAv2Dx64UDh1MXvnL/TRY+EknOjV0m58r4XPoAFq6nhmo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0_1626172247739_0.659780391222762"},"_hasShrinkwrap":false},"1.27.1":{"name":"@sberdevices/plasma-ui","version":"1.27.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.1","@sberdevices/plasma-sb-utils":"0.8.1","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f20497072530b50cc18b7d37594404becaf3fb39","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-XcvVeh9weLgv//vKDUlFG6wuZS4ZAmXN1HiDRD5tH30mBmosP2zbuwyrNLbjR8kudTQ0Wlwuqx28lBoljFB7rQ==","shasum":"c2d9eace282165b65c9bc170edf372c3e0254a7f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.1.tgz","fileCount":472,"unpackedSize":1000065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7XIbCRA9TVsSAnZWagAAk5UP/34+HDs8myJhZnrJuhSp\n+aIV5/bNSd1FLTPi/RQ7XZSf9qL2VHV/JoZlXKbw5eQW1CtTSJ12CrC5Oq27\nlHZ6HHy0MVtmXxlAeVkbXQlVORpwQnVKOLaxFr9bST8N6mOVXusdaR+OBVLw\n/h38Dl6D4gSedMj1YCS62ghlKeN2z5rO2MkydwLPMNSkoM/RT97V211Z97Ln\nHPLWWy+N5yqVLBp5NHxDvPpKuM2eTFOeN6VeEGR7LojXTq9Q+LgomLs66e8I\n7mJaSK6tYWPSUTFYTpjLaS+sbw0NdNEBGqF63XllEXQAZvPUuskQaFRlrtpe\nbZPazAWi2Q4ono6YX94SM0IODnuVkDHbz0tSG8Dd5bVSEThh1Y63xIEZN/LN\nQRE/O/b7+/HctCR3soDDW0Y0/H9+cCtpFdtYumRv/BQHvAQWioNGBxj1ctHN\nI5VrSb/qJT2kOdcLeyt5abyD/uKOkiV0ZayjdAZ+kBVa8wacRXYVnv9ALjdL\nxjNmK/G+KlQ+GgnvpZLG6DaWE0LfiVgTjn29SRaMi6jxa1IPUo09AdlQ6Hax\nCLrJ8UGkciXhlhkMcUkdNVPUBsPP//o0a9U5idWuo0w6738kDPEmDxTL0DJq\n2NhOuH9DA6FFU7EBra1ro51V7s/xHWNywxk+EMvHBzw0TYr78FQhaQqcQqva\n2w0W\r\n=wuTS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1i6KabBAb2Z4b/EqFZM76eU3NiwhOM9YkMVUrt/sW7AiAIuHVwkJrnMnUoEb9Snrijg7Si+d430MO4X06k9z2OAg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.1_1626173979403_0.8975278397187851"},"_hasShrinkwrap":false},"1.28.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0":{"name":"@sberdevices/plasma-ui","version":"1.28.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.24.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0","@sberdevices/plasma-sb-utils":"0.9.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7eb191c755606bf30993b0f3d462d9c310d33dc9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.28.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-fFQSCRQlOKo3U+DriAwdbp0WTObmg+vmU1pjiK/OoK3XFff0PHBThWC0OE99LniphcQQH5uNelbXAJwS5wOa6Q==","shasum":"fcb063c8a6ff4b11427311a622d7e7c286c99015","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.28.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0.tgz","fileCount":472,"unpackedSize":999664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7XJuCRA9TVsSAnZWagAAT4gP/j18lD1g24EYJkDhaWtQ\nHe+2I8U08p79OVIcoWjuZdmdWZHKgz3co8b4ZROd4SdxzX4zfsNa0/CY2rFB\nLox7HZK4C3mtyo8p9oBs5Qf7xMW26a9TRlEaekxHRI5WyyBhVYpJpuL3BbxJ\nJ5pHz+XYTWDk6Lp5QPol/L2b8VtKgoss1hz38eXmlxZmA48GyvPCZuERfmIE\nY8QfVw9z4UhCbIDfyHbVhLs14NT0Ob7ZRtHT78LsbHMXgyUhN43LkHOjYjvQ\nxV1QK1jxd7w2xVTZXZdeUyRT42lli9sh3rJ6BQbNUyYY2rPvivKP06MF78eL\nBbIW0Gt4512jXbVKB4K2EeGWUDXiAKR5KR5kqkILM5bZ7vbX60BRL0lru6Mh\nWTL9srV9Bw5fRAtbkAM6RlFmfOhiBCOSX2YNN/fzRIadhkDjRaGpCqwzA9T3\nnUHJqcOIoTBbvAoyp6/3l0mzvR1yr0T/wN/YsBnORii4BZBjXFvmBGj7lcyV\nOEHugv71U6665GhCiBVhx6STmH2GHonMOvYnI0zjApfHffBhn/Nm9Rxt/ADi\nptlVNgyF0Ddfn+8Y/BHz+J5mjc23V8PUVANFbyV4G679PhcN47/HGRizUJhL\npGGevmBYl1xkc+DFODd/HT/sxO35NIHmogY8uh3ov8oo8dshACDYEuSewfbp\nuIjb\r\n=YKil\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4w9FKlFQtLrz6sk6ZdJEsVe558F4CL1Gw7PiV+61CnwIhANPhcVjINQT0fWQwzbSjsDhtLYKNg/vWdWzEIXvX7d7f"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.28.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0_1626174061746_0.37898851885091145"},"_hasShrinkwrap":false},"1.27.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0":{"name":"@sberdevices/plasma-ui","version":"1.27.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0","@sberdevices/plasma-sb-utils":"0.8.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"182247a6d19776b11da9cb0f56d815d4f3955971","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-MXLIpD2zUozyvDfJrc2HrF2A02KxW93wTOuJhfCG+n2Fxr6kee1vg43QZCEeYjLAi0r7APah0V6BvufsofFujw==","shasum":"190facac0a7735ca19dd7704f87901a212690709","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0.tgz","fileCount":472,"unpackedSize":1000227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7X83CRA9TVsSAnZWagAA5EQP/0fFXuLOZ2PbZoVIVO5m\nst9XB3ktEakd2U+ePJpG4uo9HhhEhQkmXdRXX7x8nphAagFKvq2a14YnIXEa\n3thnClzlAKIG/6YvfblOFPEwcqZYfM9n6zsMsgrmJdxJp1DhFsj/EEtE0k3Y\nWILTM8Kir64tKFtsGDmRGfTYBNdzZFVoJ9i2W6JeCuPqDIo+Eom1I4uVSrHp\nqy+Y1kUlXZ8ehl/GqB8CAdAVS6KRe7c4qAsprofuGbr7kXRsJrCP9Y0C2WUL\nN6JT03iJAPWWaZHP/H6GYRncg9H8co4JTVtYTuR2YEfGaZx927S4Wq5teyV8\nA8Ua4uDMV0chYTDXs6zcHQOrjq2FN1eZNOvViZ6YzVy5WuiO0bP9/Y3tfS7d\ngJLrzA28P4H6bbVLS72u+WfBOxfTcWjFiXJ7HgNGrfcnlXixYaCyKiKEFmqu\nTZqiBCqFDfK0vC/psFZpNFcvfgkalkD6Ml5Qd9p0Ybk5qZLOodDa6ITL1Zu1\n3lI5kl4GTWEqYNacliP/gXABnnP2KMW7aCYVtL80brw31cOGBFPTWYQweH25\nWDeP7QHn1P9cW9SoeoIN64s6Al4qrLLwbnrLIsmUT67XXRL+e1Po+SntZkvt\n+x76sHQKNQGf2ODELlU3HmWZtRT1U48ezQDXjqZXK3rgI8EMofWkp/qZkaNS\nsMQK\r\n=UT9m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJv3h7UPhEC8rZCC85OFxJCjwRTxnoyJTEXw5FxHDwwAiEAhqKxSl7qGIVc5VBMK5OHaDBIsBZXFJcSPhGk7B4LkN4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0_1626177334967_0.7197624812565508"},"_hasShrinkwrap":false},"1.27.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0":{"name":"@sberdevices/plasma-ui","version":"1.27.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0","@sberdevices/plasma-sb-utils":"0.8.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"90276fe6b24b303451dc601816d90e730b065d2b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-6gqLWmoA6LEMLFXIGLd5ptZVRHEBs1x5MBgqIqU736xHLFXnccusI7Y9QlADq6z9XqYCbphPxoINnEK0V1nTvA==","shasum":"9f563dce4e38d232c256ee86eb433c0ce5487520","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0.tgz","fileCount":472,"unpackedSize":1001805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7YD4CRA9TVsSAnZWagAAUQcQAII5EQzUc15DmD85E6+C\niJhurBzZ3C8bqxRPSKjgi+YsF2OTvBAvn100/YTdxyB643BKZIYpcUOe0x+S\nABDG81bnmJiesM+3LtwF2FF77PuGlpySd5lapl5InLIiEzC7G1v06dzBdDMQ\ntA7xIN2/QF/A6rXHwvvL6goudoMz/2K57s1T6WQ2aINHAwFdYudazrQNdh3X\nGAkmO/+kBsXwEYipBjZOwaKz6r0PyumMf3pxY9BWBe+lmj05xL8mWDRuMEC0\ncsa4ResYxm0BCAmoKOUkrR/4EKj7C8r10L9zNk1nbrsd9RwSlKrMLGWIT5b/\nDkTq0j/FVcL5+6Y6DyNPE39T6R+rkrMCQOb+yxrGyDIVHyZuYgy06ONsaPUc\n6/Y9mMQ2tc3aqX3Ce95nBzJDwHQ34gRwTpBYT/ht6f7QVs4/30zg8q+K7EQG\nYHUvEf7VWEmQgcieuhsuJOjDw1tFpY9j/7B5dlSCAQm1oAyPufgecMinIFXn\naMAbDbEXplVsUyHshY/IUcrm2kuqr6Be+qsRT7oo13rUWWGiBCe0PoeOedfO\nWSefW/jaLPRVSqqF5IoVWyxbsDwc59Wnv2ESezYZuqNuwFEw8U/35y8Or2vU\nWoLSK+yoddrGnWcOd0F/NZOLlLkH9gmHrvCGnolxbUNcvNXM4pE3kS7IT6IY\nrHSy\r\n=LeUY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEs5QTick1KocIOCxH/QS+XtzDcKoBZU230noyhwW8lfAiEAjAk/qKPz7RUxfPcr9RopuNYFJA6fdE55eiMMnLsHRGU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0_1626177783778_0.8441872230467025"},"_hasShrinkwrap":false},"1.27.2":{"name":"@sberdevices/plasma-ui","version":"1.27.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.2","@sberdevices/plasma-sb-utils":"0.8.2","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a2fb06f6b487140b6b7046d10ccd87e89afe47d0","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.2","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Gw06/MklWqmC9jNqTZYgpyI4nSavM/2W9wRXGCyCiyw2Y0nJIjIUcwlFJbECI+DF6bysTSXNUign4j5eRXom/Q==","shasum":"b6c3f8e985fb8cc04bc65777eb29b9ee851ff45e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.2.tgz","fileCount":472,"unpackedSize":1002071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7YSWCRA9TVsSAnZWagAAiAYQAJurNrmDdFBB420bq6Fm\nZkh9L4apn+SzP8f8O0GwtoFFPsU2LGwK9xL4UEkd4ueGjoBfZ0pXwkHlE92Q\nh92LkWVSmLzkAWNBL7gLHCnI6bfJxBxSYVw7OmIYHUxJhtIE29nvfuDkOOr7\nifkzKCtcGY3GSamgNffvogSGpPTW2Na+TktY7dsiE5Web08CGR8Y+n4Cc+1T\nNGJUwtorzBTf9ngkOcDnY9fsOVMdy2MaNw3iTl0kGjLt4lxghPwQHcF9V0B/\nXZSCF5youiiaa0cMmdaBJ6YOKKCr6d8VHhCPloDsMHYrpwRE973I4/o6hE+U\nlN4DzVlpxxQpnO/vULpJwPSHmpfFLhMNT2W2Am6Q4J3H+hWZW8n56dPgTnw4\nZKCMyoCifSpnP1Hud0ApqKtpMfyAR9a5c/wVn7inbb8ANrmRvxtv9K4E7/VR\naicxuBYrro5qR2JCmDfMbBIT0ah/G3xYklPoqlNplLpZhCIVhwtiTufMbemD\n0Z8BiKxzlhSNX4jVGNfQU+tIx3muzPozxkFnpyDj9GAAC6hNb0OXx/i3gNen\njZkPTQNWfYQiza1vXuLHeErwZDLY++Fom4RvQJ1KlTpW2wLt1MFpWK3ui6sP\ncvkKZKbjLypQB/WqAObidyxlgPyRxm0eudzDZnHyLQ0orA9w1qi0n/XBAh/l\ndY5r\r\n=PV+6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA4XWvLO2MPGe1GojzzHewyNLa9tHiGQtMHxgVBRZd+7AiEA5lc0erqXs9EKgF+llX/8PNERau8n7j3FEeyS2QwZEig="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.2_1626178710095_0.5278321142574836"},"_hasShrinkwrap":false},"1.27.3-canary.537.d3c6eac97e072ac3b7cf39600631123850056823.0":{"name":"@sberdevices/plasma-ui","version":"1.27.3-canary.537.d3c6eac97e072ac3b7cf39600631123850056823.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.2","@sberdevices/plasma-sb-utils":"0.8.2","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d3c6eac97e072ac3b7cf39600631123850056823","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.3-canary.537.d3c6eac97e072ac3b7cf39600631123850056823.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-WsgcEp4mv0N8rPX2kC4sr/S+le1l9ZtO0x9V64hnC+THHc/ZJ6CjVVQkPi9a/TaPMlXgbpDzOVpxIuqgp2nBsw==","shasum":"80d7c578130cb15e88c31c9210ea55b7a5c5baf6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.3-canary.537.d3c6eac97e072ac3b7cf39600631123850056823.0.tgz","fileCount":472,"unpackedSize":1002139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7Z+VCRA9TVsSAnZWagAA/CwP/1+27FIfIDkrD2ega/8y\n4FhQn5x2ocwkKWsJkpk34KkFBNKc30LlDYRlhW1idwVVnMY5zUw71xwXW8L2\naw00MWqFAj+sQWcXSxRDa48dUijvW4hw1sE+XhYMQDlyHyR6Zw74iJGLUok7\nWIKHj5ZUUBusrWes1XwACn9iLApVUGsF5SV+eBVvee/xXzz+2dt5QUk8e5uV\nE1DjdjtNr1DOQCJWZl7KClbJ+G65AukQqeolKRWhgZIeIkRXje9ioQMbXshv\nmPavyh/5v49HmaCZ6sFaQD9cBWVldoVW1H+5p0HhckPd4u5YlwDbw22c5q1B\nYeJszDWsTdgugmjibyhW3GpoBMuCVISoXSp/aSUeRefhEcug3+ru23M5j138\nD9c7sgqwuSoUVsWA2wkT0NxE6NbkQVOeytcZVpugtgcpO6qw81xtC8+affKb\nra27Div7zyQoQzr/BWCMjhZR28IsJDmyIz1HXxD4dqmZzqbLcc8Ua1WO26VA\nwnuRGdfBB6xOCBjnzQ7o8vIJ168oleGxqVYfp79GCg9Mb48nqw1+5HE1Bcr6\nvKT7wULUk6hGgg8InjuL3pSOtJiZuO4PDULJNNWwdlEvjlQEPC+fw6mwGGhT\ng73Cd6IPQsusL7LxCznrciHfH6e0IP4hvJuhqstxhmBhWiRyJN5xF0ZpZiw1\n0oL4\r\n=kfh2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkI7AgqPwdTZFc1YQ81/ewy4fWbigQJM8qo+7Tf/XTbAIgVzr70LqmK/m+iO7KDvaNd0zM1nIeLj+G7ZgYx6b6Xis="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.3-canary.537.d3c6eac97e072ac3b7cf39600631123850056823.0_1626185620911_0.5163858272188078"},"_hasShrinkwrap":false},"1.27.3-canary.536.5e19a14db10061816f4d988131df10f89b67a2ca.0":{"name":"@sberdevices/plasma-ui","version":"1.27.3-canary.536.5e19a14db10061816f4d988131df10f89b67a2ca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.2","@sberdevices/plasma-sb-utils":"0.8.2","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5e19a14db10061816f4d988131df10f89b67a2ca","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.3-canary.536.5e19a14db10061816f4d988131df10f89b67a2ca.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-o5DpswB4PIoGhrNsXN+j0tH8ciXUd9nJ/4Bu+LzwtNqp4YQEmtwxA4r1GeJ2dN9Oax6UvNSWDu58ncbRiyUJoQ==","shasum":"5d1efcbd952fe38552fbe26988db493e5425da38","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.3-canary.536.5e19a14db10061816f4d988131df10f89b67a2ca.0.tgz","fileCount":472,"unpackedSize":1002125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7plpCRA9TVsSAnZWagAAYp8P/ik/abvyW5VAmueClctZ\ng15Y1swjtFeKpFwHGB9jpy+eUEMMcenqNpnWLgrphhCsjmDuIt1wm+Ta1V95\nnszBZtPfp5CS21CLKuZBInw1CMMrx5X8zjGsEq6OeWZgiNqgImPQD8Iheeqw\nxJ6OEHxP/VN/A6VT5ju8wXH3qa8CM87mq7X4ETEpM3U6CqbRUdcxD6So0oHO\nLVWE0E8kdPhSn29zPZdpek3aQyrIZb0ROs2W57qYWgmuuGByr81LGsZ5uLVm\nXtExLbKR1IKHK16TnTZFJXnCvbSH4a0gpBh/may78eDFo97LJgCZfovggOfP\nX8jlvRjRWKshi6tR32g8SEfyFqhsAlY1FEk5Fzg5utgK1D9b4wGy9gajiwbK\n1lKKJ7OSpLKkXzi2IGPAc5TN4t9IyVebgnODN5kmlwWmZqduTLs4/hft5KJw\nICDT+c7GDbbybzRLf1A5I/msfND8+jk+acQTQ6KaVaDgBMQ88ng0WWcHDVb7\nnl2Z7EqiFeS8Zs6XVj0B2NnRe5BTAPKK6qNr4TM0ehNY5ymyxdO19f1f+nyD\nNPET/LOVu9uaGwWm+qw/S95gSmEw6kG2TX9bpGXBbrH/eKRUnVGbpxGmFgQV\nZjFBAIfLnJ0mHGNBSH25kGpYGbTyXmXiTV8sucZ/4Hr5ESo80B4yvZDd0Dlo\nqi80\r\n=pjHS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDY8jMIOYOAG57YunbhJpc6X5Uw6C/QexrddjkKFrZxAiEA8JjBWd0e9Kj0KNdjC/xkyXOi4tqWkVCEQZje2BoRMAA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.3-canary.536.5e19a14db10061816f4d988131df10f89b67a2ca.0_1626249576724_0.6705016061221054"},"_hasShrinkwrap":false},"1.28.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0":{"name":"@sberdevices/plasma-ui","version":"1.28.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.24.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0","@sberdevices/plasma-sb-utils":"0.9.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d6b2090d7e18a864cde16debadeadde8054a0efd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.28.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-w7OEGdjYK97F/VD/i1oeOk9gZesz/iOKp2stq2+FfKgHLusJRMJO/jx3D27sWecNLsorFdlUD6Mzz6Gp/+iBXQ==","shasum":"b59496c9d3f99e4e02a913894f0d413d06653f7b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.28.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0.tgz","fileCount":472,"unpackedSize":1002107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7pqyCRA9TVsSAnZWagAAmicP/A86Z9FAaZexXxWCEai+\nct2xO86s2UgJfjoCVkG8O+ZrZJjQid4+vlJ+OtSSYNkz4AGcuF8bOaXnaQx/\nMq8qnqambW1HD1dtjiSdYtoJifWibYjKXrYAgZXl/Y1Qna09avFyPlbYREk9\nRGs2uoypcXiVv4X0/V2NVYsY0PSY08dy7rogujnsR8j7J4c5oBouRcWq49ba\nS9R5atzbjAine5LlrgxHEhtcybhU51zYoQ3xek8OpxSCWWJJ0GLJ2FXKIncW\njk10RbhS8Fb87EPXmGnFOzwneyZFBd7catQecGwlTugqCty0rKM89AcuM5Yt\neOXJMYwS844hlEG7dfh0XRf9Xi3j+/o3y4b2e+54XtekDPeFXBGDQf8Rjsp7\n5vbDcXorHOt8MebzxK+YIAyb92UXbD0Zf7+xCsu7hFRe7TSUOriha78AyKBv\nEPljOb+JRPS5e23dWGhM9guin9+3gm8ZprNLH/SqhnRv5yyFVTuzzteP8dux\nzaEN9gO5PsUtPCICD8c8+TQM597TuptAwcSsbXll8Yeeg/gJgeIIGrbOabQ9\nSX5Ht+h2KtwifTl36+ECUxKzE15k+23QsIOGF+szEV/6/5JG49e3bFcFqCrS\nh1pPFKmhMSziEABOxHbRKRSOzdJTqQ3Ws01n9OdlFhrplBZwn7skBJiorjOf\n5DG0\r\n=4SMA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNewirRj3InObjlthb3ypeHZItNZkv3och09H1Iik3wwIhAInoTBkTci5I2PtL+hqQJxo7kx6DRB5Se6dHPah1As0c"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.28.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0_1626249905991_0.7803228299145502"},"_hasShrinkwrap":false},"1.27.3":{"name":"@sberdevices/plasma-ui","version":"1.27.3","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.18.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.23.2","@sberdevices/plasma-sb-utils":"0.8.2","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-actions":"6.3.3","@storybook/addon-backgrounds":"6.3.3","@storybook/addon-docs":"6.3.3","@storybook/addon-knobs":"6.3.0","@storybook/addon-toolbars":"6.3.3","@storybook/addon-viewport":"6.3.3","@storybook/preset-create-react-app":"3.1.4","@storybook/react":"6.3.3","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5e62a651ab24b29be09f69491492a0487830ad51","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.27.3","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-AxqS4cxktT1uvnLhfFRdmsLjDjb8iBVQPX65n6znZWBFWFSkLUpAP2z7BfgfDJf4zGFwIy49pPzT0NmkqNJSNw==","shasum":"71c893cf86cb48ee9d5894ad35e2aa685afd8abf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.27.3.tgz","fileCount":472,"unpackedSize":1002301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7px2CRA9TVsSAnZWagAAac0P/jrjunWiXxAnFO1ED8jR\n3jPcyOpOXlClIKA4gWTQJqa3McQPo0EL0eqPulaAGGC5G5mPNPULoSMfoJ5C\nIF0ciNRwOUiEQk9LsF0DKZdQ/6uwF8ahYc8DANPOoPXcfn2gT6knbel32Ued\nv89XAIWiBlpO3mTZSEfZymT9yePv/Dj/8z9n/SSBS214agsITA/eL09GMlK0\nouw2CIu2j4gWNIKIDWFs7QiHnhF6OpHVHTToLIVfqbGiY7xiAbkTrXIQ8SK7\nlxVvbmWI7I+vodNgpZA4HArIPz3xxXcZz5DvHbrYDbZIhh0XvJj4S/c8bIOP\nSIGBRJu+7cI2DYejtTIk0CRqtYmvSq4aCHqTESMTgkZjHb8AEkbCtyW0FSOD\nuI10qATK/FLxhsGmSd7QDsrfKiw2juPEvdLPgdTUGuGldYoMnUZb5/kVAY9X\nyK1dPyaGQvYM4MdoSJ/ZiA5yGUTVfKcLjeAuNk3gjIFUgHDodywg2xraQAmI\nJ61UHP2bvyK0Meyki2efn7Zs9uZEloCDaip9Kai/wtHFXlrfhqEsLOe3nPF6\nAk0fWvvJr5YaaKnLBlS1z1rVAbd8P1s/ftyjEFEJqn4hupQvKoa576Qg/pJo\n4xHVmUVL9TdD28Y3zZJBG4lw/v4bFFiOFoX5fDlRuO3Saq+zgRHu1XNlvf4U\n3lhs\r\n=IYsa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH9WGZ3TOHdFfmnAvhQzR4hluisf+vrt1wT55C09iT8wIgAPJQLoai5fb7Th9Z4WJ0vckPjYGWB67QTONhEMiOuy0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.27.3_1626250357934_0.09875176964599608"},"_hasShrinkwrap":false},"1.28.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0":{"name":"@sberdevices/plasma-ui","version":"1.28.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.24.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0","@sberdevices/plasma-sb-utils":"0.9.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"39a039ea83e7dd384ab84cca5a7bf7872959298f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.28.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ogzVO/3ThKQt8jtXIHUjZgJaPkv1xs4vuK2ddJFp3j1iIUZ5udY8JhvFzg0bw1B5+lbsdbrzEfLCPGSI83NM3Q==","shasum":"f9de238d6af1a8b50e29acc0ce9d9ddc5ab87d70","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.28.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0.tgz","fileCount":472,"unpackedSize":1002337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7qP7CRA9TVsSAnZWagAAyOQP/3bTK9HI1OYqO1FjVccS\n6bv2vYiaP3GG8wTrxnr78ziallGMBnGlbuk1/4+m0oM4oTy+g22aVipmzssK\na48JAojwiAGxPkxaLJaEBx2bbi3gvNFn2kgQXuc6RWLOM7ST1N0VTa3r37CF\naibe/cY1f7C77x9rMDfrH2KfK63BtQKS78qTnTpxvjjNCvpyGZPVgI++5OXH\nGM0WxJv+c5JJJRbXtbGwiULTGmzb3yxCZkHR9b6gb7jRUDTGWZNaFFp+o6ov\ndibUb/NLDvDcTUVPkIiz5cXBdKYItsaNxFAGsGQbm5kr60ncwzYBycBvBEzA\n0j/lQtfdqqYYqDSi323picMJKI8eBxVBqj++9m0B+IVqapIZ41OSXQG9baEp\nxHZOobiV04T858Inwe92quYdwHqXTA2ZhQ3NzPGmfTazamtEjxjk+noytmY2\nfKkWPXAIPJkpOq2Ep+0kjUB2OM+k6b5TKbdy94GW0bFaHA3zThP/UGJ/y/bY\n1RuhlTdVEHeAExlYxB7D4tQu7WQy7EQ06NGzkHCV442MfKj8csf7u1JT8FCj\ncJSVF5UdH5Qy29qYc++ddv8wQePOsU9oY7Dh2jzgqA4DrMZdfsaZ7ugwToLq\nfwkEZA8L2nG49gN83VO6eE/8hRoKNwRKjQrhs7uhXniKXaW299SDRq1G7tQy\n6/AI\r\n=mrQ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdLynPuGSb5rqgCDm6tXzdHsNdAUIWJt1zHvRULiyxnAiBrqLo13P238CLZuxbUD3JH+rr3L1sGtoESKnx0riOwaw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.28.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0_1626252283277_0.9192239955475607"},"_hasShrinkwrap":false},"1.28.0":{"name":"@sberdevices/plasma-ui","version":"1.28.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.24.0","@sberdevices/plasma-sb-utils":"0.9.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5acd97d04fc5990dc8c88240e999c371be801f7f","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.28.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-8bCFl9zePu9oYw9L15bUfPnXTjUurFb2Uz/vMblKHMATwSYvCqtSSvTD4BRPr3lVP455JuqSUTqjPTdzNejKEw==","shasum":"65da133690f6a4bca3b0a720704f12490da9c786","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.28.0.tgz","fileCount":472,"unpackedSize":1002399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7qk/CRA9TVsSAnZWagAAZeIP/j1ayNDdo5cBYZrS+I86\nv1j2140p4f0bpTTlAeJVfXemg/ZSCABw9yp4AQyo3qOXn51qGcnWV2slOSCz\n8xd2as6yPF9ub7tRpJZie4UXluKl2xvoJSY/Ni3ljUolrZANVlErcEc06bPY\ncE7q7t8upkALh0/jOsbsaoRrUPIHoesLcPpgcYok3tN8ftC8JNTRstC8qSHO\nnWtqzSLD5NohAHIiFERNBMvostffIsrepgaQ9mkJEnLBuZhAnL9rPglHfZwJ\najHbVl2OrR2UqdcG6dCRLbqa1sTP4FgyiRuaa7KTi6YqqIqxyHMnjvQ/Se5O\nQ+y9Kn96SzAEfKrRB01nbXxU5VgllC+vQ4rnsPWrhwpKf6x25q/8THK61C2d\nZNqk8IpFH7MbGTKnG+DlcggSi95G4Nx6WUxe4WsyCbokmc7nhW6Oj+p/u97+\n/J3cRz7nCYD9hzAw/60alQoGVAC00FOJ8JJzf7Svl05Qciv+2GKIyXeS3fl3\nTvyo5RPpBLA9hZ59V4hsdoG3f8noYHRKee3y7ZOBhYqXybbSXenMtD4dwjGb\n44wNcwsfCFsvv50e5kKCLEU3ikDrSH4nDQEhXRpgBavAeMNF+w63C4wbkwXw\nm/fINkJyMCMdN7yA53jG8ijTlBD5k2VDFR4mlwJEctFqTeQKCZCf7Xs+q0EP\n48ol\r\n=QYlp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0JFHwX/U/SG9R2ooGDjqmubPfvAnLAy481IJ8cQBgPgIgH8a0qjqlnEab5cXHQpsaJsHAR+7dNUfayqEu2WCUiF0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.28.0_1626253631079_0.8356580630634938"},"_hasShrinkwrap":false},"1.29.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0":{"name":"@sberdevices/plasma-ui","version":"1.29.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0","@sberdevices/plasma-sb-utils":"0.10.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e86662d3c5ab7e114b7f4756ae56e4dec468ee24","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.29.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-VasLl/4ufkDj0bK8DprOYiTyGSPNf3fERouvXnmQPbJum/coU0ZXgxBVB4zdyatPh2GWNh0kVw0akaQmto2a5A==","shasum":"d2a77cafd41fdb462d03ad3caedc628881b1c462","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.29.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0.tgz","fileCount":472,"unpackedSize":1002562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7/v7CRA9TVsSAnZWagAAVkMQAKL0TOLaLPnUOGvQkv2+\nHTj4xI+UjrkoHIK3w0vSBT8ULXlY0F4nbqmpbOfyU1DVBYLOOOLMRrAz89LN\neaGWo4X4RHRaS8TmUOFoJxFLRm+B6a/DLhjji6hxuFasHvyz1LgKRTl6cNVc\nj3kFXUA/8O9WmvGNYz/ber77j5ioa6uOGgk1m/JCsxz7kRQLFX7SD/hXeerB\nuwbZYoqm0Gik42raF80rBt6qVscjVmqW7QL3V1YFGRLLS09wI6HnpFr6+26c\nDIxXs0EKTOOaNI7og9tUQ9+xLrFOzKXDCct+OlCH2LB1kMbeLZZLWLHxZZLL\n0lad12pXVm5nxWI6l+PYBfsX2K0xVBMHAXk6LqSbueFHX7ttAZs5ypEE2ngv\n+/O+Umi+38yWCB+vioLLEXT7MvrSDz6cegpc3cFsAKsSssmg6Nin9nC9nRIU\nOaeLTXXIqF3fGthjcwvL28dIovuUQUxXf5C9AfMD5VLvMAQdBK4VHrf+MxIw\n7TY457uj5P6w2OG3m0dX5RjXY66IXy5ajotgmRjgesJ7ZA+0d9ONaRkT7axD\nnrCkBr0NO0Tgr+zrFuMZ2+Wyh5Ms7PE2JBfNGRWfkZmxmYQSpyp3GDLPNrNH\nopyjqozWWpU1vNtb6mwZTn4glW/C3JzSO5Ayvy4FVtq+TQpftjn+wMFdQLB/\ngRD9\r\n=O0tU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpORk/jQX4XsNTrHGGsxbuYrjcnA31PtjhK5swLex2UgIgaPBIoxiawOx5hQCFXnrs0qSjxZ2ruIqE+fCCb4dNjf8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.29.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0_1626340346686_0.30179487585028286"},"_hasShrinkwrap":false},"1.29.0":{"name":"@sberdevices/plasma-ui","version":"1.29.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"655a40dc4bb72a2cb27cbdbe94c8b07977357070","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.29.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-h8FPyfWS461ddPlUoSgH0tVFHPHSgwj8JiksIRkPUmmeR1KUbvr6uCSWCyPpRhGQBG+94IGcOsUkI6qGYJUq9Q==","shasum":"9fc92755c1c3a716c73c53c73480a82d3888b21e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.29.0.tgz","fileCount":472,"unpackedSize":1002630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7/9PCRA9TVsSAnZWagAA+9MQAINarUrE/a7rj4jNUlYD\nGeAny3ozcl+MMMC6j2q1gyRRlXoSuCQ+/WQSpadEFMzmLOyK7JuAM7W4c0Wv\ntOhOr0k2xD4toahXyBppDx1TQrd2pwQVdE30c1ZxNYtaQEQj98dvQ0k2LZXt\nTlV+tPxI+EMDEhNHUovZYgCfOVoF5VkhAwCplyifqTW5iSC2mhkkzVPLdj7Q\nCXQvdCFKfWVtoZEk4r+NNnrLI5XhyHTUqZmxuILsDRIMDPWzg39qa71oJzkV\nAmN1uw51V/HlnljKaoSf4wfEHfCACvfSljZQmLGUoP8h6sAbXl23uVvB4fxZ\nntYzxdvydfmdF4e8uGZbVPb11x5S9Qi1CdjDx67iu/Tt+WUuEZkrbh4YIh8k\nGtUvYw55POTSeqF+46Nx43/DtqYCwjTZb+0V5ZTvWmcN/CEEfwxuaTk79aiH\n4gd/44VPRS8ZSpZxkGH97TkAdDQSoSvdpJe6cu3UH+uGyLhbkt7TcGWDA8oe\n+95oPWAIWJRY12zv1JpUk9IYnPE9SuK4Z33BQDcIVMXq6VTpT6BYXv4tAnvu\nrOOsM8ed0fQDV19adA39ONVYQFDr/ScedGVKlXuz3nct21IAdXHNPNUONFYa\nidJnxrxi77ayl2hYz7oAgGsoAYRBSyEfI20OoVuduacdhbDBkRF6Ua+LQODk\nIJJm\r\n=SyrI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmsnN/Y5kPWyaGwJPEQ6j3PvuxbvV8vPbMlyVReMxjhAiEAi8xoHTd3z1R/ofajjby/+O1/mEh8FIyaGPXeS4Xv8LY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.29.0_1626341198605_0.8425725406905418"},"_hasShrinkwrap":false},"1.30.0-canary.545.944e14e7bf9d904abab8c6b223e46b24205df8f3.0":{"name":"@sberdevices/plasma-ui","version":"1.30.0-canary.545.944e14e7bf9d904abab8c6b223e46b24205df8f3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"944e14e7bf9d904abab8c6b223e46b24205df8f3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.0-canary.545.944e14e7bf9d904abab8c6b223e46b24205df8f3.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-h2MXKKR74k4m+7d/ohc2FkN5JsCqwWrk7OlRhpWPHvk4oLnDmkWNUmi5LTGyqdNN0+hD9KMM5Zre+muG8SILKA==","shasum":"777898cc37a01b5ddf699ea59ca377673ca3cc70","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.0-canary.545.944e14e7bf9d904abab8c6b223e46b24205df8f3.0.tgz","fileCount":472,"unpackedSize":1002684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8A7oCRA9TVsSAnZWagAAHkQP/23uWISFs2sjeiRgW7Kc\n4kFi/qQ0/gB8Ub+hudc+w6V7qHOVp6xj2o0StC8X3zQhsWwrHl4RfSgrMtT9\nDqORwPZr/R5gHGa0f4BQ+JgdLbHiK4XI+Mr82BCyQIoLHl1694hgFxuq8tmo\nKHgjtPDuFwX6tdbuocwVhF2ltVg/nS521NVIFdFsHNhm/qPbjaUOErtgJIh4\n7al/AyYfPBO2BWdZdk5sAgvbCs1ZgIJX+K+sUPxEdY55X473TB6hlAhKbrW5\nJaZBB5FcN1jfbPdA5Et6m3lTNgVC9BxWYSuIN+l6j8BjzhvR9HSC4sXumJXZ\nn5hQCaeT565BEDT2G4TfashuXNa6VM5R/SEutjZ1o4ajp75pTpid3XUsQe8M\neTwVHipgUceVazjc5QkgXsX/jZqXW8YW6DSWj02YByNiL4PRN3nsfDeYDEYu\nRuA/mGzezJ5HOJcGtCP8BaJbeJe8KlJoEwNnn71lwn7SlorIl5kRk6ih5/OA\nTA79z4nUJHSPhDOi2QxxIcJEfB2/cWv4Q/zsn/0s3QtQlc50DnMfEKCBgxZK\n6KE85JlgSJdyQ1Wx1khzZ8T6HCW0h2+dG0vbcptHKyaz5RdBjnr5BJYIAOsO\n20E/lj95iCboJ/vw9PYrnTVnq76IKRtdS45XSwVJTn7QbaBb3A+aaShelocI\nL04h\r\n=LNaq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChG6Z7xXdcU4li42YuHyuCHD1l/wj9I3GovvUgZCj6zgIhAK/Yr6aT+mDhcXId5hEeRpJl6yvMxqVc1j4mwakGO7//"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.0-canary.545.944e14e7bf9d904abab8c6b223e46b24205df8f3.0_1626345192145_0.8917815300015228"},"_hasShrinkwrap":false},"1.30.0-canary.545.87b61246843f41a23b155c12ef8295c94fd89f48.0":{"name":"@sberdevices/plasma-ui","version":"1.30.0-canary.545.87b61246843f41a23b155c12ef8295c94fd89f48.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"87b61246843f41a23b155c12ef8295c94fd89f48","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.0-canary.545.87b61246843f41a23b155c12ef8295c94fd89f48.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-yFXKf0KODKsBfKf+d9ACy53uIs6DNeaQ5pq+x9vzdRRJJ3s4/5R0xgt5hDhnhUpaZB3aQgrUzjzpZqH0SMXmCA==","shasum":"7b0bb062ec3c5791a6bc206c0c23ceee3d1a08e9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.0-canary.545.87b61246843f41a23b155c12ef8295c94fd89f48.0.tgz","fileCount":472,"unpackedSize":1002684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8DBpCRA9TVsSAnZWagAAIdAP/RMMkbWEw319c6suAjVd\nuV+3wa7+luafUnCSWeSwRhH4RDHVcdchk2f+9R051xmyRiNJw03FzXMJuqlS\nOLIkaaDMLrGe6ej+9XVVIjajIpTbXlwbBCTNctQ/Jpf/dgE+2vU2X4nLCQJ/\n+ejAcqULoOVMaPJg7QfhxreGj7uGJjtUHsxftJ51mRz2LXo3OFGrIPi6ZkJ3\nyJZWeEfWW9DhcwHRpqzCw8dkw5VQe1LubuZWTbJ3ZGdHSpOjG1nSYiOjGNr1\nlh3918lv1v5klWacijoAOVoug4ZtCxg292/V9u7uwhyANKS+OskEvX8ENjax\nvz1DlaQ79dtQ/GwCQOqvYEJoDJn2+wagih8xaJSkfnRQZwE3yKZkWxMF5rg5\nM1YHmh8qFPHNpJ2mMzo1XbPsCq9qfrF7icBZ6adP/dfaInpo9dbriuc8pyVz\nKQvBvuW0tjAlv5r5Pvk/bb+y+BYhI61ZgHdS1Re10Ba6kNQy6HhNM31lmtlr\nbxzxVLbc3KP05A/FgfW7t9qAv5lEA/G1u5OU+1SX+9r+35whJ7Piv3gKkIJb\nreQK5r3Ajsxqlhfnu+83cOlXumshEcE2p+AelKH2l7REJOVOG8sqetVgQW1k\nmC0Nnge1UygAaPyp3bOwobTOiMYM+dOelLPPbS7w0RExzIB5jvORYPWwz8zD\nuTCF\r\n=XtJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjhke7N0fbLmW17yXHAXGQius/hHafDtDniQ+NDXK3WAiAQfq9sbDWvcSRA8o8fwsBTbt7sRhYbESQd9J6rW0ShDg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.0-canary.545.87b61246843f41a23b155c12ef8295c94fd89f48.0_1626353769141_0.7883531685710241"},"_hasShrinkwrap":false},"1.30.0-canary.546.fb518e5dafb90d4c20c661a996379c55728a9291.0":{"name":"@sberdevices/plasma-ui","version":"1.30.0-canary.546.fb518e5dafb90d4c20c661a996379c55728a9291.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fb518e5dafb90d4c20c661a996379c55728a9291","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.0-canary.546.fb518e5dafb90d4c20c661a996379c55728a9291.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-q6D96W9PK1FbxPnV0T+Gp205F2KZN6NDDiH8WKDhZ6JGcyusjRn3suvG90fIi1IWRbXob/r2tMx5XjZtOJswaA==","shasum":"c81ae2fda191610d52e18715f3a7074e52d19230","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.0-canary.546.fb518e5dafb90d4c20c661a996379c55728a9291.0.tgz","fileCount":472,"unpackedSize":1004730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8DVbCRA9TVsSAnZWagAA81AP/3C29hhuACqsrpO7SlFx\nOH7sN7Kjlf1d/fQZ+nnh1lyK5EnquZpAWVR/XVum+C74IJViUBJ5JRGDr6Eo\nroYax22enqA+pP5jKRr5zJsr8Z1WDcCQUhTrpROcANqzsegvU549YgIfo4+u\nf/p9A+rrHHSGsn5R/5H2BjhMlEpwMtN51iq55rEzVa3u/IN3em7Po9285rFZ\nQQlNO07MvTWfwtombAprtOeANRHUJu6mmx76E0BfcjgByUHkU8Zrr7vZkWlc\nWe/Rh+Anz3onW8+xZujGbFme6AfgElFf42l7SgWg6xYW8zIT06fgz6yY4haa\n65bC1ruhuOKZP8Is8wkdIA+jmEl3Acl4Ps2BkaUHDUfoEGs4XRLJ7JgIcW6d\nc1bnxrG4TRVCOTRSOS4qGf2vSri+9ciCE+F0y2vrLBbRVUH1NReWfkmht1bY\nHeCWcLxmG8yE+OHY31RqOuJFbOGV9IWmxkrd1e+o5QMNsZdoVPGBtKkDYH/A\nEr2olepwNhexO+gDZJArdI97BqaB75FPABWhBgJT09JXu00n6PLmHWnZm9yx\nsZlpaboS/oYgKcA9n5D4CoJ4qGMoW++HE3l1I1QeL+O11oRGcO7V6capPBoh\nFCiLcFwAxqdJFw1oycDDV/ua7RzKJ/q8OAbUbvItzsHY5k/n0Z4SOnjlqnDW\n4O6Y\r\n=jRf/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsJLDvvfVWQ9ZlEuESbKbmuBExT38IyQBoMj9Eo/lM8wIgJaz7pNm77pkSsQV1ad9sOf33kPKtGx7SiBh8Fi7y0lc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.0-canary.546.fb518e5dafb90d4c20c661a996379c55728a9291.0_1626355035766_0.8523487373429246"},"_hasShrinkwrap":false},"1.30.0-canary.545.e9bb56939b7b12b45f6804788d9c9cc9fb5b653a.0":{"name":"@sberdevices/plasma-ui","version":"1.30.0-canary.545.e9bb56939b7b12b45f6804788d9c9cc9fb5b653a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9bb56939b7b12b45f6804788d9c9cc9fb5b653a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.0-canary.545.e9bb56939b7b12b45f6804788d9c9cc9fb5b653a.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-+iE85QQiZIggh0vg7EtMBg+q/iqL8bd0NRQ+alj+MTpOOAuvCIrvHn/qZKSVjkbJtZGB+PKG7DgOPvC98j8eGg==","shasum":"d290c3088d1567ba1881bf23d1aa78f99fc01f43","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.0-canary.545.e9bb56939b7b12b45f6804788d9c9cc9fb5b653a.0.tgz","fileCount":472,"unpackedSize":1002684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Dy8CRA9TVsSAnZWagAATuwQAKDY+2DhcB3de7X0Tq20\nTosbAypCI9c8DdZYVFEE8JFcPQTtaXCDYPSkeFUTW/SRrmW2hu3t7RxeB9Jd\nozIeyyOtHfGke4JE/kt1X1XQ/i4TwmnfKfT964hRpxWHsYYi9tO6LY9OngCh\nFwVHt97K3l+hXsAmnud7Gcog9h9TQanJ8SUnpoNQ2E+uKc1TgIbG9h+cdwYS\nIuwNq+XMDcIlqai3Fgwj0mMaVlg0+9jFiMbUXY7GyhblaN0MpYLgaVLioKSB\nVPHIJ/OvpM5nPFD7ynd0/tbXGBMAO6ZnNnanrOIX0S0e6jPCItRt3jxohCrO\ny9dsBR55tUxQ65Az+cXyogqY7/cAXncsoDNkb8tdPUedfbtKB0WbnlvFZozz\nE+HCoWSawp/jBotf1ntRnKohFLYRvZF0pYSVLi3WP+3fFO6SirXokaISfgIO\ngJ21Tf4dmMwibBF6xR1pIIp5l0K8UXt5+wttGLrQJC48pudX/3aBGEft/50U\nB3sSnFh13DjnqGnL7KvUtfMBYvMeu/sSopWc/X2rmSE+cp0Ituc3GwMH1RkA\nIZqinNt36K4VzZzagel5vTlnJOYJHHPri/eG14EqwMzK5uTQS0Z5VxJ3u3Dn\nYBCBa1dgB9B65sL5LJdxxJshiYBg77r8amvJQOINoJbDZk3ynj15H+wqT99Y\n+Ajv\r\n=GM19\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFOTMpviaLk8Q9jmpo3hPRRZXJ9mQWzpW3CNZTBmnt6AiAngXGeTI/KrWyQUvHwz4mn7ldmbavX9zVs2rouelFRKA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.0-canary.545.e9bb56939b7b12b45f6804788d9c9cc9fb5b653a.0_1626356923901_0.10650443126433706"},"_hasShrinkwrap":false},"1.30.0":{"name":"@sberdevices/plasma-ui","version":"1.30.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"926d3ee04409e57d46405ac4d931054c9bd59714","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-SJx4PISE+btgTDArIpS2ITG7NJAaOBdRnfGBku6nibO6sb1VZXedNnSyTw22WRscUha6wPeY5sN/T21toJ55Jg==","shasum":"454d3bfbe2235ff24342a8494cb83ca47595f79a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.0.tgz","fileCount":472,"unpackedSize":1005122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8EAKCRA9TVsSAnZWagAAQv4P/2HeSEq0ipIpilGTe+X6\nBFrWLR4mCA+Yj5NSZSl8HJs1VkkZcquc4HdFnrF4kW9sXGM69/8zVEQMi6kc\n9bccUtLaLwQpFfHjD4KBc1PVCc0yXPjYq3/gupYpvjq8p2wids/Xe5mSTHQX\nQIbaBrtqeQkTO0oi9ourvlwS9gfo/or5eQ41gkN5d99ecDtsxmrja4yvHa9m\npRqh6OSO29QRWDD2QE0BsxTnNaMEVtXaKXa4GqWt6ljFruHVZLnvDae9vWq9\nofN8pe2ZJ+Y2euuBYWXg4yLIK5kG1vug5kC0iMS53upW39XnNElkfBO84eh8\nWNB1oi3RuwF4Q5884OgT2aqFsT1xtBYwb2zbT0NSsvvgOFZZkyclC8i9a6/P\nX0Z1u42Sh3cHfD6xtdQJhstCF+JM6oiXmYOwMFEjS3rkZqbQkUz8VRxbYOK+\nu/3BOt8i1PXE0R3X8Fst3fXradF1THDXJq7xFBIMgHECAVwtC97oIb12gy3q\nATwwNRAArLieBl1K9Ddy8EMiJXTZXyTiSNSqdpjw5aQYd9AIkoyKLzs4Ghkl\nGtc/eDTwHTKs0n7qbqY3RoJfY3fe7ULINnMBbByF1pMZ1mWWqDgMEdjNbmE8\ngHi7iVbmY8HAWuE5tUn13Rh8pMt+yUbAShU7cGRZWxf5PCMm1H8UKb3umMjb\nqWVa\r\n=4s9u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSFUfdk3g+PNFvGfG9NYy8ZaJbaxF9E8Rhkar0SKIv1AIgM63TpU+EeYQzEmu/1BmpDD/gZpp72OaZZKh9lb28UZI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.0_1626357770183_0.9959804060618229"},"_hasShrinkwrap":false},"1.30.1-canary.547.2a82ed5803fd6e209fc89d7f4fa14171df4d6bec.0":{"name":"@sberdevices/plasma-ui","version":"1.30.1-canary.547.2a82ed5803fd6e209fc89d7f4fa14171df4d6bec.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2a82ed5803fd6e209fc89d7f4fa14171df4d6bec","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.1-canary.547.2a82ed5803fd6e209fc89d7f4fa14171df4d6bec.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-Qyrkg6kRyG/eL86HD3Q+nzRX+95pR0lD1zes2WxMlQMbzwWDDY/t/P68TZBLUI4kXu67CtFOVcQ3TBL3k6gO3g==","shasum":"a595b2f8748509faf8fd0fa1f7dc8b3ce120841f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.1-canary.547.2a82ed5803fd6e209fc89d7f4fa14171df4d6bec.0.tgz","fileCount":472,"unpackedSize":1005176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KSOCRA9TVsSAnZWagAA1/oP/iEeMs9QpNL8DWrhH8cL\nD2mJrMrUVvKFJ1Dd17dUrozCQAeLcVBWWEOGAU8m3pyAA/0qoxZIIzu7NMhK\nQmZCVoO4zEZcynOPxfydKnIGjYDrM3dKO/tSCU89Kd8GGa3FNv+DFVES5Ja0\n6D9oof0rXUVqikUZtISRRYK5tFeCU6MoH8duUmBZUp+R91oxXfXcGaYmabXw\nK4PdQrDRbUDPOfsEyEm5eCt2arBMwlpPK/RehcZbqMMqjAiqvuGRs5Hzqupw\nSke5yKPslxnOESxhkWqq4buKpuAqgIV5R2M5wBmozOxinO82tJBHoaKW3ZQZ\nY3gy4CRq3bHGgOFnMjEjaXPkVF9LJwod8n6x6spOa7+fyJRnn7c1YKJ639ie\nFyaZpTu3NUyyM75Lwr/702UdK6IVHx0dvw+7Ee5zkCNqF1rvxZbpIv6jvkQ6\nbfIZkc6Czg+HmS91+3CFRahOTw+LGB3tBZa2WWjN5jdNUJqjyc87gyOQQ8mQ\nUa+sZlIVbwoN4mob51KiEgT5CaNYL2ghXBu8lOtoqeZ0oW+/VwQts70zpB3L\nkY0DGySdF3a6DTg3NegAksSzZSbgmN9ZrV6bL78esdwuvkIS/uIh5GCCLHIU\nNAl7I3iWGlDKVewT2s02adpq3SjrEG8ttUlwI/ARpqlXx+X14fiqb9sGdHrm\nVCAf\r\n=sglc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOcrFD0l+VyO7bY8NziAWI8GrA/0BfSfCJu+ZjLqoA5QIhAPuDD8ymKRJvZ75qi5vXbjyUP/Izwk67+Ig4669OSY0B"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.1-canary.547.2a82ed5803fd6e209fc89d7f4fa14171df4d6bec.0_1626383502757_0.17182526689743938"},"_hasShrinkwrap":false},"1.30.1":{"name":"@sberdevices/plasma-ui","version":"1.30.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"42f5d04a51b54db40201ae5482211230c22c6955","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.1","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-UHyNsPInG4GD3A32qiDz6sEbTrpmdhD19t/hjZ9+1cdO1gozlvLsbm80gCNN3WhUOuRyF1Hz4zF2CBKs7rVOBA==","shasum":"c695b515977855ecc2aca68f44df9e3ec3abbf43","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.1.tgz","fileCount":472,"unpackedSize":1005392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8URFCRA9TVsSAnZWagAAJBYP/RC+h1dlVhzyd8wPpkqm\nj6b16vaOve6itcp0McYF/MHDrPucb4wq9CzolJ4HDGFfkmnHgw52zFC6Gqe+\nfd/4iySR/OVKNgSPjTVmYrOzoZqUB7H9zMOOmsnC5X9sO0hPBzsGqcT6UEEC\nEa0LPSMU3RjEgDVfkuR+sBAfVNMQXY6HC11Cn0Id1vrZmFdVTOaT3jOzfRzu\nzanH67vvpa7yoEul+keRCPol6mMVKfsGPIEks0hfXAqSkla1V+fWnG42dlVi\nQSEIJvHdkAjYLOzzIVlUdQeVQBD1lcGmUsVH2UbUdtcBYkVg7wtX5macnvs4\nGWkTqmcvbqoVy8LyILles4TD+EKveZkitdmEpE0fQLM6fFsf6x3xEBVCtE7r\nZLkCZj+AGFXkfFz0zicJG6Bg7apnlFx0ULvcgH073hlw7xrh4aQFR7WE7c31\nWtsTVM/Zr7LMrHWGkx6wxDxYoeCqNoMgaqNaJPcfDdPdhJHAPnHXynZFIgav\nBnjVHxbkQIzFh5L6tR+lBMMmOia/PHjV0z3iWdVr8r7iEkXwqrmI6rtB1nxP\n6MIyKlFdJzN0QES/pWK6yV2wp3aH6yaycnAy758oNeyl6kxY+OQf/I1TocFE\njfM2LZbGKL6XIFflJvOD7nHRnT59KSgJT0lhkq8FnWk139GI3F96P/Vh/rx2\n+6+/\r\n=8OXG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYIgldjHdaVJIRcbp1YNBIKFQhKwSASMt7AZc1PtpunAiAYx75tfDdpvdJUpJypNrlfq5lmHrf5l64T7f7mUw0gdQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.1_1626424389521_0.70170163042538"},"_hasShrinkwrap":false},"1.31.0-canary.551.21d8c4cac2b200f553fd59bc14b3456fb0395a90.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.551.21d8c4cac2b200f553fd59bc14b3456fb0395a90.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"21d8c4cac2b200f553fd59bc14b3456fb0395a90","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.551.21d8c4cac2b200f553fd59bc14b3456fb0395a90.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-eeGrlN1GjYApMLPQjBFGz9IxWXfcWoPzGf33evgBsLyhe+Z38wK2YPIbkcfYiBcxPxdIVnSbhGex2AfFZ1AtHw==","shasum":"584d04ffa0ec421ac34df75403de1e7c1f65d352","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.551.21d8c4cac2b200f553fd59bc14b3456fb0395a90.0.tgz","fileCount":476,"unpackedSize":1009937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8W+6CRA9TVsSAnZWagAA4XAP/3MXypkq0RAL8/3wpq5M\nskAeROLZWs7k0Ow+Hl50VyzgxkGUH3bHcmrQZgIwE1PicYnJxrltxEKD6H4/\nTNkdMBvAqVFzEXt6tOXNlFZKTg1mLaypiLcl3CQZuHAznhExmSN3ZvuQYInz\nIfQYzfnlxPfaSx88RqDaiycgyzL2m26Tvp1tn7zrsWRGLRgeeSOMHV7otc/W\ne83jmkHPdeOY33/6q9qSkcJDWYd2ZTIQhKMpGhopTQTRrBDryvHzE/aW89DH\nc5nAGQ8v6Qezsy5VByjrA5rNBpoAVCJ0cOYTBAQM2ZY+2elg7SsNNbh0r74p\nNHF21B1vHkc4HAHudhc13J2J83btbcpaYa2LJywOMvMLpl0HecchISMYELG4\n59DuWGgl9kKB+DnPZaDf9O8t5LQ3Q8ZXtiEEPxvK+989qfS7hyibhSxvKTtr\nx06eDMcrUYy/i1lRTT6sTlISdm/P5MkGH+Vjjc9vkayZCuiErnmjD9lqlHir\nW9oShRr+a2Tn1ynvogscu5CGJzfOu4c9R2n6/P5MTtmwUdFyRNusVGe8O/1l\nYjNhUjkTaYCgeIPP7syV45l8WVDX0/v6wpfsb0YYOrf7Wnh8KR6c1J0bpeXw\n9rhSlAt+MVY5BfirKpyXTUV4IZkFBwb/cZ3ZKSvecRiSEhGaTPMA0NTQ7ZWM\nYCzG\r\n=IISU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJfwfFb7QfNx50o8HaSD3wtlo/LyfCBZLTaviJd6nEyQIgUtHvSNJfFgXtrGD10ZaAyoGl/3MpwZLaZFZUg9te2SY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.551.21d8c4cac2b200f553fd59bc14b3456fb0395a90.0_1626435514082_0.5126361598788027"},"_hasShrinkwrap":false},"1.30.2-canary.555.bd3fc1ff15a56897b2e0c9d492f60a5af373e879.0":{"name":"@sberdevices/plasma-ui","version":"1.30.2-canary.555.bd3fc1ff15a56897b2e0c9d492f60a5af373e879.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.1-canary.555.bd3fc1ff15a56897b2e0c9d492f60a5af373e879.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bd3fc1ff15a56897b2e0c9d492f60a5af373e879","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.2-canary.555.bd3fc1ff15a56897b2e0c9d492f60a5af373e879.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-ylS75TKnSc3kEmA7I+8s5dHAdbUw1VJ/parRF+l9HkLICH/dRqa5qP/nBJWRZBnpNOE2tiyQgrPIFGS85unwKw==","shasum":"5354429503b22748ff7b81b31341fd40a3f86975","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.2-canary.555.bd3fc1ff15a56897b2e0c9d492f60a5af373e879.0.tgz","fileCount":472,"unpackedSize":1005500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9TgZCRA9TVsSAnZWagAA/AAP/jhECyCAo2j//pt0oJB3\ntcD+f40J4LqmHWtSPWMq/PnbufvAgBnnwIYaIiYFoug+uqmH7zOk1EK1rvTx\nwAPKCUQTi2WLagRdYsmsReDoSNaqJcjoO6rIdQDvtMPtm95UWq2q0UQLmyDK\nuWFHiF2QaGyiPxGBMVko77TGiDkmq3B2Bk0cYGgFQHI/lxuGM3iLRqsbFjf5\nTry/xRo7eXt73e27tnunyhdu/F6r9Q1icta2G4cUusrhZj0d2o2Oz3O7iXp/\nlXDAXgBi4dOXmvdu2yjUBYTXmO+PdLXeGhM4wcyEI7kYJkPOIqaKupiS9Jh6\ntaVfHloFwHKh6GNrmyeog8Ia7U+8aiTS1q+9KvhNeQYZqO+HJQfzgoe7kIMW\nmyj6sgFdS3J46POTa+ZgbWIIP1t4W7LoFTRymjQqm3trh3lQMNobudfir45I\nj9N5X4HQGeJVFZBQdKMKn11f3XPOwQJdWuDaegiXYRmb6pkYxxRjDm5I9g4s\niAmRvmZ4V0W3KrGVXyWC9oTiiLpreYhU85m0YZjx6c3ga1+gOsznnUKox5Ye\nh3vCGBE9/7KpdqSZFJFFq5Gi3AfwP7H3MCf9op2cZMDJk2nsS/LABABHfAeW\n5rTFYF7CEETti4qFsY/bXLAD0mu0SCAJPSpiSyAhhLOMbFlkZ+yp7vjbV8Wr\nKPm4\r\n=zjq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKbj26iDi1ShylChWLDHR+MaxlFjzQwo4E/l+EPlfwbgIhAM1DVw5dZC+xx/M9RbIJpQpW9uLM34rid42laQSoDrJW"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.2-canary.555.bd3fc1ff15a56897b2e0c9d492f60a5af373e879.0_1626683416926_0.8188968397588385"},"_hasShrinkwrap":false},"1.31.0-canary.551.e3c9aac95f02c5dba6c7ef86bae66e80f5ab17fd.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.551.e3c9aac95f02c5dba6c7ef86bae66e80f5ab17fd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e3c9aac95f02c5dba6c7ef86bae66e80f5ab17fd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.551.e3c9aac95f02c5dba6c7ef86bae66e80f5ab17fd.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-5VwMhWLYEi/bbVlWOvW02FrFNVU1tHPaozOBZa1aBGvMt9l8Vh8f1+Sd5rWaq6sz/kBeSAc2FMP71Ff3u+06Og==","shasum":"333f0aa358bb0745eebef408373bc567f5bc36aa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.551.e3c9aac95f02c5dba6c7ef86bae66e80f5ab17fd.0.tgz","fileCount":476,"unpackedSize":1009937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9T4aCRA9TVsSAnZWagAAGboP/2qZ0QQUS8/tsIk3mBko\nhC0jwobaHVutHBxRX4qjSS0I7coMSMAMEUuhXhI1kVIu2w6sLkTTWEuy500C\ng2oqUHZCRoppberHyUv+8/cq4fr5vLNzPbYgcd04TAK9Yr3mH0CrdfMh3M8t\nVSI8bWwWoxglF53op73QV/khDjsETgIpo9z/y0AfVljTuI624+Uspzp92NY+\ngIey/awM9ubVpo5XUxXRGzTDRJlKWGSYnOmczQPqWMKmtkeivTtmUiCZGuvH\nrrnSNtNnoKvdVKzfigR80QC/pRX4AHETL6QhnucVLHjziAYcmgNymbkfkQ32\nv+fKgo7kPHP2IFqMgOUzMM5yBladV/zMEk8BiqEIpB+Hzi90Qz/wCkk2uj3i\nT3EXb2A7NO7tNj1VISTdjVJCVNtIgbBLTQ7fKvqZ5Tm9X/Hf0CAdKKQlzeFA\nhrn13MtYYRJggqbVSmfCI3XVKIvxkxiNH2MOXB6Eh3e3/BWmK0pPDhPQvMPW\nrq5W5oDZpWvxoQJuHlzgUG5K8vUJLHAMDJXaRO8LDM+zrONI++5B1DzTWqr9\nBF5DTUwFoqp9LMcWw+9t4h72cZ4FQEW7Vby+vvE9qQ3Z3lI0FiwhwqD4TLx+\ndlVG3tvqVgRE7Yd7Y8qFxESqd8vhvr5zGt6UPKJvBjjNwGEhcY/qz1gQou4y\nFK7q\r\n=10qQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrAI2uK+Kl3MIW0uyd9FlGT5SM2GdARxMseAfa8oCLqwIhAPXizuRiSLbUo1j3Ts/uulpS7Tkuoo7kkG+N7xGHmxXP"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.551.e3c9aac95f02c5dba6c7ef86bae66e80f5ab17fd.0_1626684954116_0.03229415094847088"},"_hasShrinkwrap":false},"1.30.2-canary.555.846cc8bc5cce85c8b8b141a2206cc8f4023b6309.0":{"name":"@sberdevices/plasma-ui","version":"1.30.2-canary.555.846cc8bc5cce85c8b8b141a2206cc8f4023b6309.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.1-canary.555.846cc8bc5cce85c8b8b141a2206cc8f4023b6309.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"846cc8bc5cce85c8b8b141a2206cc8f4023b6309","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.2-canary.555.846cc8bc5cce85c8b8b141a2206cc8f4023b6309.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-SOd0EYIY5uwckguHFNHaIhJOK44HR2/+/S8tD12Tlj61KIY60OuFYX48Cu9I25ZGopo8h+chOZ45Rv0DZP+KGg==","shasum":"2efee49112bc576c9e49e343c75453f9bd90e78e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.2-canary.555.846cc8bc5cce85c8b8b141a2206cc8f4023b6309.0.tgz","fileCount":472,"unpackedSize":1005500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9UZFCRA9TVsSAnZWagAA770QAIseX012aYF7/N1l7q6n\nP99Jl2ngn8Bz/WgGgF17d3vIA42KkpvvQj2Hz6JTKdD+jojGVZXyaOoF9XVv\nnCqpklINF8pX88y0wrY/mJOstW2TOn7thNBkkDKcSBMbJ4w7kS+MLpZgOgW1\nCxVv70KlcRKTJv7gLu5eAW3p524m5nsWuTlBewIzUy3XewtnTpHte6yZnfcg\noqoZFHgB288FVMou+pPids9S2ILvBUcC2sgvv3n7h6vX5WWH13H/86QydIfC\nzSIcsJ6DBdn45QE/WJHEWe4x8B8xC4TFIHdW4rd8vX0xktaKDTDXmsvR7GiC\nyNfqjGaCT6qjE09nSaDPBIGMMEikGLG9Nov/LlSybmZAU7yBO3GeIy0rznPu\n57LJKYcgKXa2rpfFHrdCIdY8mE4QWkmWhKTwpO+G6lbsyoTnZD7UFEDgGcbL\nQ5Sp3mEuvI6AxPVj8u33ykYFI4bINe52qKaAUF0mbMcavORL7JZTrAbgTq9+\nf7xd9yAL2xrX5l62gWdfdxeXgYyAe5bYmm9us7QLeWtCYrpI12YvTtCISpu0\nOYZgyc6poIyYp1fJW09k2niB1dcdmDsOBGx0zXyMu06oyKRoGReGtfhMwubb\niCk+vS0lAuM9ymJIsAkQQ/45ueQYFDlWc4PvR0WhjYAsuhnSWtICWtOmEU68\nGcC+\r\n=c0Vs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDu4uqGyEpKqaqsR9fDM/UIpjWGIWyZb2Q/7Qdur11O1AiBzuXYVf5HAK9ZdTjTQO2v7ZNjv2GHtQyxKwgyvkZRWVQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.2-canary.555.846cc8bc5cce85c8b8b141a2206cc8f4023b6309.0_1626687045706_0.434503726560713"},"_hasShrinkwrap":false},"1.30.2-canary.537.950d4ce43d4034ebe795757b1068c32fd4f70ea1.0":{"name":"@sberdevices/plasma-ui","version":"1.30.2-canary.537.950d4ce43d4034ebe795757b1068c32fd4f70ea1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"950d4ce43d4034ebe795757b1068c32fd4f70ea1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.2-canary.537.950d4ce43d4034ebe795757b1068c32fd4f70ea1.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-R/pX578z1zSja5WSPJo/qpI6k0Bji51sYK3jgznrCuiA25ZNXj3g5aPuTigA7anF0nW69QvUA5dCidl0IMK/cQ==","shasum":"38b74399bb87a7d1e4a9ad4cf53f367194776545","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.2-canary.537.950d4ce43d4034ebe795757b1068c32fd4f70ea1.0.tgz","fileCount":472,"unpackedSize":1004995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9VoFCRA9TVsSAnZWagAAGs8QAJcN2q1mxi9/OjhueE/g\nB3Dfr8iA+qTgKS52Zq4Q8HH2/eZq9hC1vW2B3czswy6Oa18GcGYbVwIoebcB\n4bTobhjlfB2C1a0P7DB+njI27bNm+z9UIP2Lbnc/jnpNYQz9swfJkQPKRS7e\n8D5rpM27TcpifryF2Gt/7KBCgTDqkCDp9Qc17tNbKRKd5WBAClE/1EVMXQAV\nmeFTl3XCpvlN6Eq+8P4o5hIJgdZZQq8t6cLCBF3IHEX2cT7J5ByUUqzJMXWw\njIqOYqLK/jSN5dgTEXDpSMdYLzy1Z5Vl3mBc1+6hBKJPqqO/YzPqorIJj9Qv\njov7dBb4DEPHmVmPBEr3Jpx33pniO6sKnsrc+q5pF80BDHa+tYmXj58cwhpR\n36Fu927rQIaFOFm+3wAr2asoKqKIzkOIets61dEnyGE1tu0ENVc2vNu05wIG\n85SPs3Cm3OJI0lmttcaWqUHHzpcXLmi0HLtmRvH3lfkR+mNeXOBwMgLqM/D9\nrVRxKLnCKQwdEpIp0n4LJ2xKwnFYjoRpIncXZf+676RICJBLkWP2jGnGljtO\nAANjXJG7SlgVufSZ0wrmE3ttDmGCCI6mvnfZLbG3pHR/kaP8NfXn+5GmJbWA\nu2aOvBG9hY9k1dOG8UcFKQEPzyNiwXrDSp6soUurR5NZnJqoSZy7spXMXImF\nyTfU\r\n=fpXo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7/5DUIuRXUTQbAZu0vUUlK/RpQCdi86XVENYQieMZogIgZp8H0lzNej2mYKy+ZEiovR1vHp8DjM3GxvOctd/dmtA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.2-canary.537.950d4ce43d4034ebe795757b1068c32fd4f70ea1.0_1626692101146_0.7982989090505561"},"_hasShrinkwrap":false},"1.30.2-canary.537.29f13b261dcd8df2b6d0e7d2c257b6fcd509fb73.0":{"name":"@sberdevices/plasma-ui","version":"1.30.2-canary.537.29f13b261dcd8df2b6d0e7d2c257b6fcd509fb73.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"29f13b261dcd8df2b6d0e7d2c257b6fcd509fb73","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.2-canary.537.29f13b261dcd8df2b6d0e7d2c257b6fcd509fb73.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-mA7AGKnTRbYNWqg/qsjo3emlxc2w3B8ElWED+JV+oOWPH59wLe/MpgXww7XiBDYu/J3hmkNtgcrRMzdBFSG7eQ==","shasum":"618a66ba3d342293f6fab72a7f974c9358d94c9f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.2-canary.537.29f13b261dcd8df2b6d0e7d2c257b6fcd509fb73.0.tgz","fileCount":472,"unpackedSize":1004995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9Vr/CRA9TVsSAnZWagAAzLEP/RH+YolEtuyCFa+OAWKM\n6TSlT6wqg68wssnRoXL5GvAFm1ssw4Q4Uxv3YdWOpcs3747dsNLOkq1mwViL\nNpL3rb+fczJC/RJfPdNyj+QEeKERxk7pXGJzyj1LAxxqiJT3iZ5cPXzYeCO2\nPvDB/1OQW3NZY3oNB8gIMSu8m2HpOtdW/B3Zjn53/kRjvRjnK8pED5OQ9hbH\naLWKpB9Us3NUHCNe+zNb0glVULpDstcANiqfqlBtYWhzhWb/w/R0Ohc2dyhw\nVHqvJrp/Vvn2d1u6R9Rusz0L7FvjVOXEP3cYC09NGG5PwI66AnprO6UBwHca\n7CuUo3Bj9SwVvH5WA7XCe9DVx6I8Tf6gB/tHedPzTIukv+Z3g8s2lcuLQuVZ\n7g31L96Pdvf4Xpkfwz6sAf/80tZfruoDrEEaFQxNLmRzOf4j+3RMbgXhdfGD\nU7SRfsYRsEpRSw5sA9pSVdDBAm/k7aL8inuOK/vRu78kweQ+4c+FQGsq5a4d\nsnMl+FLbYlTf8MDnfH8PlDp6DGCEY5FaNxYFQJzpQ0BjXhMZGGB+/l+c5XhT\nsIDzPnCBRh8T6U+uSaNr68CW7li4zgdR4hBs6ctdSyQzLUJrGNTH41RlAdI4\nZHlpGDUAoUQy0ZwRY2xWXFL20JFaeQq41eunkVB+Bu7wxWMmKKWCa5tdV5tm\nlzOA\r\n=dRmu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdz1TCozKncdpnZ7hf92Ig7Ql4I4oxvTGuTz2COYDwbAiBPYiJEdJAe11Cxf38mNroPqdvr1cNVCTbel5929LgUlw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.2-canary.537.29f13b261dcd8df2b6d0e7d2c257b6fcd509fb73.0_1626692351293_0.5667472376684355"},"_hasShrinkwrap":false},"1.30.2":{"name":"@sberdevices/plasma-ui","version":"1.30.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a44c78eaf1b76de9ebfbcd2d2e91642aa6813d4a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.2","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-XwISZjQwyQluuKE7iJdl0/IkAN/G34Z1PY2h8ibX+xhgPtFxJfRZG5bYfS669nFVjFDoGcUQEhEZ2tz5CY7HCw==","shasum":"a44091dce2ca19ba6ff0e3fbdb4e941e0814b990","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.2.tgz","fileCount":472,"unpackedSize":1005205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9V2aCRA9TVsSAnZWagAA508QAIvtSf1BaNvUYkKK0Hsy\nL4FkFv37938i762jIlAX1CoqUCC+JnbIrz3pHDJSeZkootcWlZVAnRgOQ6wL\nGAu3hTlg80w8TgCLEhPcbnCfr3nRC8OTessClNP8iE5tEUe7QZ2MIpFhcs62\nvqFkA47UAsE6UDsfNywbGRqfcWx6T6S3xbuo8hKjH+qQhAR4pn6unKZY9diW\nWNoEQkuEbGtbu/XNO2dgNzbCJ9c0FAFbMxHSjm+DccaJ4FgTcEkROSPyRhEh\nOQgQ5ScdGITtY/HQ5/NdGJRxkh5y7KkQFNQ9mMb+u/ujVqVA5lUK3HVmCLZ+\ncwqNZlYRmJehfUnm5ml153hJdhOGYbgT7wLTgG/nkDVODLJqBmvXMlDy2CPD\nseqGvK4Z/oX4tNoUhWAzTjULfawKQTXPN1v8axc8kj45cpLmZLQuRw1LFzpr\n30/4PpXw4vZ9B8vs4q6WXSo7QqYQoOsa9DCP9o2uBfQ+XQH0EwPF70OMqIXD\nnH6gJzozCnZMcKNj11bEDpJBrZvMP77EJAk/8BVbWjXpiyLnWHgYm4BbhsR/\nsl7XXOT2JljCKA7695AOKHEwsdWiljHmTvA1dIicXcREsiIxdeqzOKEndJNT\nKOB3Lbi/1Ln5dp0itVyAcO+ugZgXZWTUaUXsYE4obVs7lOEa9RXQ6+g/Hove\neGup\r\n=Ss9B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQIJz4jqgLnNpbQNVyKYG6OIaYTH38DnrJe/RCHAkJ9AiA9W3xJet8oixDQomZdSeGN1ze6Dmp1yPbeczRem7tGmA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.2_1626693018663_0.708962765859714"},"_hasShrinkwrap":false},"1.30.3-canary.555.4772fe375bcd070f0b02bfaa9153d9f08083287b.0":{"name":"@sberdevices/plasma-ui","version":"1.30.3-canary.555.4772fe375bcd070f0b02bfaa9153d9f08083287b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.1-canary.555.4772fe375bcd070f0b02bfaa9153d9f08083287b.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4772fe375bcd070f0b02bfaa9153d9f08083287b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.30.3-canary.555.4772fe375bcd070f0b02bfaa9153d9f08083287b.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-+gubYkFFxa5lMHytJObqdpNS+SSHK+iBxdF3KqvL1x4+hZtpBzsTS6remyNAPXjQ25jz3spkGWur6oB9xtQnvg==","shasum":"9894d72c250dca78c8ac9451487ff9d70ac51eda","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.30.3-canary.555.4772fe375bcd070f0b02bfaa9153d9f08083287b.0.tgz","fileCount":472,"unpackedSize":1005313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9njgCRA9TVsSAnZWagAAOYgP/A7jSDtF4pfRqBVWlzJJ\nC75nBoV4vt8DB2WYgLuQL4l4Gtr2zEmVZqfWqjKt7NBQH4M4mrV25xXg3Vte\nGj4PDqDeOhkdAMyHUk0K0HM3qG8+rKBh3FKurG+DOJTDmRt2rdxjcdVon6et\nX/YNUqO+Vh0NA+l/veI8Mrzsy60TiIYd2xzw1AshF4ImBI85blRErZp0o1SG\nAxsxUyBaAPH+YbWct3FndQDB0qZ6uPTp6b6/XF5SY8g+kqOanwWxBgGhU8Hv\nkKpIit1HK11BCqvA5Vhwu3bgqpVnbQDwUpgjikvJlWpgNYWr3+fNzAnWNaqc\nqXblJp3X7bJHsASWKZUq3u37nDp+En4B2HpiSeW490ykJqaKYxs6i4pevLbE\nVwHQqWeWOO2UKRnrxxNl6hXwnpyWZsUN981J8LQZLbFLRAi4PtTBrqMmIFSs\nbsddSgSrXqqWjKk6yzAK9s4++RLWstoONtYwfGC2VziknjsA4Her5hr30SHi\nhiI8IOa5G549TRCoNi8SQ4C8QsBB5Gkh8uW6HftDgc60glwc2UacVjCGqSDp\nOC5Soc46hCT0yrQsTvYvnU+HyJK/Rll/3X2sf71155FDozElBK2ZtNmU6pzZ\nZuD/IlLWZOhJq2QX3/VJpb9DBk0Nbw3kSfvtMXmqxO/eh+YKqgaglb3xeV1c\nfR0p\r\n=beLo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2/3eDlq+trxcPCK+QZBv4XGr4A64ijacCtV+7v1g0MAiEA4ebUZkcnz8IHdZFqECEDasq6LHjyb2XQ+0nT/FmhMGE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.30.3-canary.555.4772fe375bcd070f0b02bfaa9153d9f08083287b.0_1626765536647_0.8678449182255954"},"_hasShrinkwrap":false},"1.31.0-canary.551.cc2db5649ad959a64182b64377e86c10ebe3eb9a.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.551.cc2db5649ad959a64182b64377e86c10ebe3eb9a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cc2db5649ad959a64182b64377e86c10ebe3eb9a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.551.cc2db5649ad959a64182b64377e86c10ebe3eb9a.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-19qo/H+mnhsGpiTupx8wAJ8t/nr4LS3gHUU/PQpqpZgefPRbpBmCXbLFYI6XbgyeblmDWU69u3w/yHPskPgbhA==","shasum":"bb60b6b8bb7398cdc221d2c73015345a22f8e0be","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.551.cc2db5649ad959a64182b64377e86c10ebe3eb9a.0.tgz","fileCount":476,"unpackedSize":1010494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9o0qCRA9TVsSAnZWagAAJCkP/RaLnN+EPK7HUiSf2e65\n+c3nHJSATNzZcsXnxXJZBRDC6UC2hM+aDsgThED+KLo2n7nOfiNw/PjGxK6e\nP55rCGh7BRP2XwltgufMSpzmh38h4LHM1zfHuo0Ka+fodqkmBV9lzqEhLEHV\nCiyntJe0hLKbAotiI3GQBsGdAwg+gnT1XhGPLptN8xKfrYcJM6pRFjrgc4Ws\nUc9sBwye3KEUCEAzws8+A/0KLR+YoPuEBCe8miGbmUC7Dfot47tQ9XNQ7E2v\nnlQYKm90CTic9rg0brWzbWrwKMC36ABwRvw31oQl0/AbB+lT9hx7LUsh21e2\n78jHbtzuXSL18r62OceZt3uNlmPMa/JnMMq0sE34FQVZ023765OxmpI6TuAt\nPGotq1oVjC2vKMIhGBjaT226YwhJ1lPtkUpfxzEnsca/RuxbmEFkOaTOtLNq\nvv848Fh/ABwn8XvdjI7yARYutL4gxLIRVo3DqaN9z6v4P3/2EvDZzpMiA2g3\n9txJUxDbRa0HR/2GRH1VHX2cd8UKdt1NyHfeyus0SypbpXwqwG8skz8Ae48a\n1hJS9eFYeQ2NLm5CwXHhzzEanp5HZneaPLfLDc2XfVYkrBUzOFyR4Aoq3Gpo\n9KkM5/9WBK0JBFML3Sy/wo/3ApIxls1+HO70xwBmzNeOji5EX3GMFqM2jceR\nGstQ\r\n=NzaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAubNMBQ0sHmlp9wDa19BPkJ17E212wJINMT7r3KQTBCAiEA8PryrSLXT+fbFmvqWk3g/jx7ON4vaQD8ND7CGMwzOb0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.551.cc2db5649ad959a64182b64377e86c10ebe3eb9a.0_1626770730161_0.3223375416440115"},"_hasShrinkwrap":false},"1.31.0-canary.551.2241cb5d95946e9a617f83396c23f07e7ca9571d.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.551.2241cb5d95946e9a617f83396c23f07e7ca9571d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.25.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2241cb5d95946e9a617f83396c23f07e7ca9571d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.551.2241cb5d95946e9a617f83396c23f07e7ca9571d.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-BoZeyZMjxvq6bl4/9hYJILRcV0U+B0zDdW+0ZM+XMv/Cp/xnjRj5AP+QIsszjaW/KRvRYw6/nWjf85v3do5QrA==","shasum":"a3c49ca703f85ff0a41104e270b4896e2e491b88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.551.2241cb5d95946e9a617f83396c23f07e7ca9571d.0.tgz","fileCount":476,"unpackedSize":1010509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9qUFCRA9TVsSAnZWagAAdiYP/jKRbVPpMDceELOEdgKJ\nxxjykg/cGt1rVQ4qRl3rEOzR/c4AjEs8vFCdeytKXdVQnkV+pW+NxGN15kUU\nLulfBydVFftb0sjHKCtWFtcm2GFD2T3JGdijCcoFwRJ5jHcaBGQxDpUW8nTs\n8Ht5navGvvwKh9GbO23DL7jvfkD6LVCr1An3plESFPXewN+tQnMvQvxOBZSz\nPeuh1oE08DTgoptheLBQt+/US6+YzjAhtzdyxBfiZHGN71f8+kV9ixLyAkw8\neMd+hOUH6479CNp1/nk6mZKSbhhJ2rz2b3L+E/L5miVCMSzBcEhz2Q6W+LDT\nz5ex6A7A7/25Y5A8rHyLMSY9kgAubFUtJXEtxuN8w92GlA42iMFnJEprlgBU\nuJm4X7DL0lxzmbYsTiTQxesmwsb40x1NydZPLGMKVdS+HXH6L6qwDIMVqU54\nYN3dFR1MPTHYndQrX0wUhAOrqA1Me2ElpV/7EC0quTQyN2XsOYicMiSUlKSP\nXYDpDKJtNSV5VA5USPaU4V5VBn8277ZKWkJK6CFPaK9dKAjvx44fQv9mRY/F\npWIYftB3Re4qMMtHx4afR8gSp78ekJG9ePaH0+XFzY7qFmDX/77Qxa7s0kyc\nky5m2x5LW00iuYho07FOAUFf2Oj4eQ4m85ulLYeEzuAdxcjg9ibNSi75wnKC\nfJRd\r\n=GwUr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6Gu+BaFluh2PFvLX5oLQJtBAGLG0n+6UUYEG1F4zwjAiEAqSAltL65JdoH7sDwjN/TEiYz0dTcYCwDTHgL+i9P4Mw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.551.2241cb5d95946e9a617f83396c23f07e7ca9571d.0_1626776837586_0.1966561378956473"},"_hasShrinkwrap":false},"1.31.0-canary.551.26dd928274e1e17eb8466c98699fff4a40ae82ef.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.551.26dd928274e1e17eb8466c98699fff4a40ae82ef.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0-canary.551.26dd928274e1e17eb8466c98699fff4a40ae82ef.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"26dd928274e1e17eb8466c98699fff4a40ae82ef","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.551.26dd928274e1e17eb8466c98699fff4a40ae82ef.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-tLGQls7qYXcCrfSdbhcUfjw3Q8w1zTgo5NdzfD3Zvw++ox6RDqm0QfrbtOMPBKBHx9DqojkdpJlfQ55/jAn52Q==","shasum":"c04e535eb45f0eac134e3644290f0b97631bc10c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.551.26dd928274e1e17eb8466c98699fff4a40ae82ef.0.tgz","fileCount":476,"unpackedSize":1010563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+cpECRA9TVsSAnZWagAAAj4P+wfVoouduFsp3YOROZCe\n/4EsfI7q6TUbing1YsPy+jg0qXfV1AZMhGifGn3zdUIMVhgHC36muIjjzRg1\nVUqFTV6vWanpqED3I7Q0COEsOftAhqLQLCnXS1JWCXUOVxbkhL63rf7ZxI16\nV3+859fcRGq6L5HZZsbgODim9fKz1HE4Z+1o5uI6hwHvClOReqBKKpvEtYla\n6fxKsc0nQ9DeALmclICIUG44Fxt6ys/uJUUaALINSzoWBW0yptVKNsOShPRN\nkIY50tGj4G1Nc0FmvYmXPC7lkC0tEY8kuQXyCzD91KgOe7aQpBhPVhJ3BzeB\nPn4iyMTkD76VTb19Bg8zqo139L8mNq7bbwtmoAMYZ9Mely5TlkfwFwN7G/dq\nKS9G+pORlIoW/Q+3+cVsTNEye0E5tu1Az/XvMa+M3TfM3U0U8NKRO+EOZuNt\ngfJFRunJGDkaq56GV7Q4nl0RH/YVHeCiYfkM2YoNkgUNzWp3IbTxoqVkysZY\nMPUZc/YQhpvGfq1oEVP9bixFU6ku5+iGFtEaO/ndDm5tBMBvAniOF0rnJEM+\n5tu9VFk30l7Z1OSC8Kt1bfR66ZaXder9Rky/e83MppBG7GfV6b31ZC5jNz4w\nk3w/NzxGiw9Gdt/pBNiSZJdb2EGhyhYoQHcvvtmUOdVqAXVNCOkVVgh2eyWE\nglIU\r\n=e1Yq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvlcEXaLloOmuolyF5zhP3c2qYYbc9iLOWXWQ8OPD8lAiEAxQKRaKsMpczMWdhFMGk0s8Kcouy166UNF43D9YlVssQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.551.26dd928274e1e17eb8466c98699fff4a40ae82ef.0_1626982980174_0.2498808185801844"},"_hasShrinkwrap":false},"1.31.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.26.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-+EWOYe9VdVFR23hUMonylmglwCl/55rD5pZIlmumCchBCd1FlL3i+vNt6GBFE7TX4EdUwDa/kNPvmH82HgkLZg==","shasum":"ae66336ba966a85fb706bae5d84f070f4ff8288a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0.tgz","fileCount":704,"unpackedSize":1242205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/rOkCRA9TVsSAnZWagAAsUsP/29dlQmOE2egNROJlll4\nClm1LxXFqtRwXFK8v7g4xSa3kR5kebt77ojF/CKPmxA2JfDpzqDSlpDDPz/r\nR3fYE2qCu4rQxzBCoDytZGnwHAw5b8Ai+vpKeziFJgsTdly79vzw/99jas4G\nbM++9QcSIoMUyZ3iZDalS66bHGFy2PkqcCISOCT16xYvPuVGyGL1Y3tlZrIi\n4VTbfO/uLmJteOj7uCsEty3P64jV8x2tS8gF6kllfcopeKImWmffbyY8dbUS\n1Lpsy1p2Vg06XjL5n/XaT5DJ9W8Oi2OFG84nQXVIjRd+aX9sNGw7BWTfnWb8\n9xRMPYDZmXudbLeoxX4aid0R4KlEpsO8gotBBUkXeQVOm+ILNmTYeV0CQKUU\nuLAtbkcbqMtZEcPVe7x2Dl5CqpZo1QjVXDjE3W2wIa/JN4mADhDAC5HEm3/s\nP3fKnmQcylHs4D+FAjexjIEvj56WnAhg9lalUrP8xtMlpeqasyCxFulTHWzC\nUhkHkh3InVSnHlEcCH3bJRuxJGSAL2FMoV1Ge2HHVdAcpQVmaVOjol7B6ySS\nOkMcndDGDskLPQ7NAQaLKrmii8iePVG6doZjBDwrt2sjGpUBMdIHOWAue0Ep\nGQ+NZ+KIJ0jb+VX6nNjoRECv+Q9LbwI77q0bwaLuQXD6o0XTOnki0ZtGT5iq\nDYcZ\r\n=JaSK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuVXmRe35YCt4xAmPWkOGC3nh+mgXas2ODEUU+Mk2wKQIgMuPJ5YXcoPKiJA87U6SLWuMD5bv78srn78+0T32tcP0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0_1627304868722_0.687761661991829"},"_hasShrinkwrap":false},"1.31.0-canary.551.7be608480d78fc3710df4b3aaac94ffe39bd27c8.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.551.7be608480d78fc3710df4b3aaac94ffe39bd27c8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0-canary.551.7be608480d78fc3710df4b3aaac94ffe39bd27c8.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7be608480d78fc3710df4b3aaac94ffe39bd27c8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.551.7be608480d78fc3710df4b3aaac94ffe39bd27c8.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-hMdFHQChGiGvAhIsZ/yen7047pKXaTabsw5Sv1UGnaE23EBaVV+fwjpT9+NbbHXB9efLKJnbQvxHrPZmEERELw==","shasum":"e0bcbfc2ae3cead7b094e228e8672c5f57a6c4d4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.551.7be608480d78fc3710df4b3aaac94ffe39bd27c8.0.tgz","fileCount":476,"unpackedSize":1010761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/84dCRA9TVsSAnZWagAA/bYP/ik/eQDUb18aKlD1374+\ni5CZgLziejrfPOUuVZSERZnTrnKkqf1GtHb9hEDrCTV4hpVWbTahAPrnVzeD\nj+VBhfpH6zUFK37JmEdeaOHIqCCDkVW72xNmuZsAMDPrKUhijrni0WWCpNB8\nU2k4Qfb+KRkQv5SF8EMJu8Yyuv4DLNfHw9s4EZHoU7wo5IoQWg+77JgKybUD\nxZw/un/a65wTl1Qyi0aEaDwunuDn5mxmXupzRNo8M8H6SupA0anl97fvm7K3\n1vaNFiYDZGI47my5mhToJMop4Yy46nykk8AbSr/8XjIAdTKSyVFBzm52GXXn\nXFe32gm5yF/bgq4qXHVYFTKcsj34Hg4VyzCB1W99ZmGWJzm2Xq153aK88/T3\nHTckE/iVz1j6STwtE/u0xNUnToqk6gUNfsNmfXfNbjPJxUW98/lCX+aZ89a/\nh8/cwyFcZDW5eVVgN3uaMgTgXJvUVtcQA5qdz7uHguuifiSQdvlIZRu04woq\npMj5QOsUv8M+6qNwt6y+8SRouAhzKZp9zaHNDvQYKrFnl+Dppc7gYZV89H8v\nMbn413mcXPsAduve+lJUdpnrpo3ZTTyJ9m9SYzA2UumtqZBknGtdKrj9Dprt\nk6cy57R6ln1VJtsT7xvFNRMSQDk8WibHVV4oQ3TFF5i7KqV+tZBVw1Tmxz5w\n/fxe\r\n=8tid\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6Dfu87aApGGWrDVkKBCyeVpeYpHe4JURDymeVOOGEEgIgQd4LZTE4A6iHRCBWBvXnzcPcmD8i8qgrbGYPyRLXqLw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.551.7be608480d78fc3710df4b3aaac94ffe39bd27c8.0_1627377181447_0.022137125399081636"},"_hasShrinkwrap":false},"1.31.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.26.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b9f5e41f603d9560b0880a21f0d438330433b230","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-TJzjH31xlZ2XRAYDvKBAGp6rseYPMDjPAR5oNnImfNnn6zpTGO/aufN29CRgK5xMLfu1DWn4SMUAuKMWSTGVJA==","shasum":"fe5aa315011d649813f058196969db18e67c5f04","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0.tgz","fileCount":704,"unpackedSize":1242205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/9IFCRA9TVsSAnZWagAATecP/i8ezu6Z/k86jcQGfJxn\nw2quLx7eAN2wieMarXuRugooq9Sds+E0hz6HepnaeCrrfKadX34sDnF/5cDx\nqxCoHDUeHODZknm54kzNNa5lu/graFW6zR/ihh2IxvE6hXuqN6/uU2ovtMZ6\n7m1No8ndVX7uXKsqbtSzILBwyw6dKP8cErnnLBBER9fMj3sDmzZDggUztbjh\nZLIJyGm7hqVlcHjMEMcor36OGFOiE8ttT6IvMchgoc5aXYCOejRAbC3F/LxA\nQ5i1B175TtEWOyDvb8QNoVn0xMRA98wHRkbDl83Oz1q6GT0myB9hW2T9DYJ/\nRc0gfja0/Ljlu6UPqbURtgDsDowFWSG2ol1+hCDpFCNPHJALU3hDhMsHw+Q3\nYU6O7vz8Q6Q4v82PldP6cAjMWq+ItaSG5fuEAWhmoVoruiB2dx7CA/4f7Xsk\nG8RLugq+XTrE2uzlNh521HdoiAd7+EXEqif8S2ge6p2oLIfMxl2uc09Qqrlk\nMdk8Kii07ozsOc/FCB9fzYfFtRRm8JNloIphyPL2c10nQuqHWvN6t64wnEjR\nWyZsG+dRnJzB8jTz82dPl5cHSze8Or4N6k9A8F9ekWvuCA6un4C4oguaSVjx\nBflzKjftyDsL2FyuKJUpdm0EGonS86+6VlOVhMoTtFbVW8z9oRSaWLx/qCXU\nOoAs\r\n=SEve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICheA939/XdYHTsEI1yFvUYViQAMsuuvG1W3Vsyw1R7zAiEAmRy56qKFHzBWI5M7X0D4kFjpM4zmcDmuBC8GLDactFk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0_1627378181202_0.8380112764295149"},"_hasShrinkwrap":false},"1.31.0":{"name":"@sberdevices/plasma-ui","version":"1.31.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b26c763bb9b6c09159913a498d91e69ba2fe1ec9","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-AJeEIflrFWkJF0GYYzqZySoahnPTO3P83VhVh0YsZauMZxtI4tJaYVAFRhrq5t8CQ1nEFXh1MLZK4EJkDue0sQ==","shasum":"caa878da127faabd7a7fdd4b721ef8b6318959b5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.0.tgz","fileCount":476,"unpackedSize":1011428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/9daCRA9TVsSAnZWagAAd1AP/3YF2YGq5chHBWpVE9Yp\nXtaYL+uys8x6+gd1/juHPIVR0C9ZeXFVhY4eoFBvcAWkGzTBTMOQkM/DFnhs\n8NCOPo2fTsRmPUHeJ8E2JCBsZSnwhfmUIritFrTY5wa7a/NKvn4zVDHxFOfS\nUNfFWvlxo0BVg7aWg0gsxLc/gvrXJ0wD4iREbYgMsZjCWDZlG0AbZu+EUre1\nj8GhpsJ5aKOpsymk3tTfNAeP3zD0zPBVajsSJan83wPamQiaxFaGUsMdFedz\nvyXGoL4oToJRzrNGYe6kpHq4fa1GZxIIpaXXDbq06e61nBWCEgUQnRR3uCjy\nG2LtsmTLXcXdluHgxcURfgTTDbL3Gt39GvJy1VFR4aQ8UQYR1I0qyA3q7wvY\nMOhpOG9aybY4PgN1VmPJ3uWbWtrgltg9SwAaL41a9EOBun33Ew6W5uIGeQYf\ne0GqjOAphLHdz2lzswHFCJZoZvwJuPsSm+KYz6pTp0tc0T2+z1I7oyVa2oxA\nPIwcB9jZEiMF5l6FwnmGDIWBuqYwjVUTUNo7fTAmqXuSxtOyEy1VR0u1RPrF\nySA+ksGZ/1bSVThSHYJ+V7l8beByFPxpScK5AuRxZoI3v5QCPY99Y3/o9yNj\nGugjYyVLcPlS4HRRj3U04P/VPQMvV6k9VBKUVnx3t27WqX/fH4uAw6MRejSC\n3OqJ\r\n=WMT+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJd+R6kkLIqCOpnQOQ4L9f2vrRjS6T5kgkYl2IufWFOAIhAKTNGKkFWGNDr6OqQe5KJQUXPkkjBHhFDZ380559GZnU"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.0_1627379546190_0.7920122686371642"},"_hasShrinkwrap":false},"1.32.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.27.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2a7c0511a617da248270b0b74c50a1324f190b25","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-uj3dZjbbBJhpw9/8p7cfj/Pgin0VVVJ0uEeOWIRG4S6ngrtSERqyXtizqz/Lb2z7Gz4WjaJoTasSlXwcec6s4Q==","shasum":"7b904466b8651f1c799d75b200ed8c0ea9a5350b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0.tgz","fileCount":710,"unpackedSize":1250048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/+jdCRA9TVsSAnZWagAA0P4P/01bICZvcS56i9Aw+QW1\no93Vxtgnd7GeWB90ugFgH/NRe+sOqt6mz150FqZ0tbpGcZ+IlEg7qxByOXs3\nykIuQvUCFs2fOprEfdhhTm5q2MuUAAAlTo0e/3fXBiWMGtc6qI6UwmgVGtLs\n0PnE4xXhNQrFEpcDri+FGfFf37rOWUKOzaBz0Rcm61y2p94o9nbH0+QZulRF\nt8VueU/p8lrLjZ3H00slvMjeiROo6D4kMxrRxrJ/g/6bMVf3SSkH91fQAoHb\nLzW6naPRZGUypwo+2Uq4D+ZcCaExL9kCKZAzjBqzwoDKcnMR52Iw25IXMrrf\nUmMMh1fiKwRp3ETxHKqlk6jAJB7Phgkj/g42yhijaAXocHa5u/HMgEspQ0sM\nVyQWu0W+w8cg0xb4gPQPfqBYDyAw/FDZ1k/r6BsnysDN8zB2LrtIRA4BtI6y\nyVG9Zr9RZfBKWkMyG5FxdBp9VanQTRUvlvUuuPC/79G7g3cxYJ1Cbzqbsj1O\nOpji6nZIiaCNYy2hCoBy/NI0K74dLmM3ABbNBHDCe2bnhz7QlFsrnRBgmFoi\nfp9TwW//RzEK7BffgXDX9agNvgoZ4ZSgmqS4x6P/fXusJAHpsRmUBkdwETNy\nSo+Div4018nx/kiuDUotEMcKhkIJkg5RNksoEF+ficgl85q5l8focbTpERiM\n+vDJ\r\n=ngw4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlDnkHcjguVn2M3YtSpb3q8+/QDN6m4xw3ercM5xvbPAIgOnuBIAPKxHFeVMXdHBKXpiLyOIMyGwTnM1AarvfOz+4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0_1627384029128_0.484986299845656"},"_hasShrinkwrap":false},"1.32.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.27.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"65f46e0fa6591f3cf9f09c6350c75f49b955331a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-Zy4HgUEWlxd/tT932wU60Up2zvs+sa4P84YS2o5GNz0l5SfHGNixHT5UuYq57jgl0N/iy1ANTVYisBwCyzI7Xw==","shasum":"617ea88bc96a51eb1324094e65329d3685c8a859","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0.tgz","fileCount":710,"unpackedSize":1250048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhACT0CRA9TVsSAnZWagAA86EP/j2mYl1gpLRTfPWD4NQf\nhKyLQf5X4OMaVJCiGDoDWnAHLDPFKhIBYj/0Ck73zaXmc3UuJY8k7re8fAge\n9OXwqKRieTB7+zTSavjnz6CCfHIp7popps3Cns/+621nVCSrBsaEc2jEUNh5\nWoGcwjqE1F+Hf/jlZjZ1N1rI71IGmfAFU0hr//g2YQXv4tMGFobTNOw4yIyJ\nBrBI3vrKwKR8VbG9crzI1GvZqZfMXZA3jmEj+go2Hs/VAjWoCR4zW2p3jAz/\nV0tooJq7nK/nd9DiZtDAGBkGpnWa7iua9Yds18NlhC6shUsnQp5uFSdEvqUg\nG1lOi6V+9TbfGkVykHHl2gc0knDM3ONLYLgoHJEbS25np7u+Al1bKbjoDpZM\nu46lgIqyE2WV4S3VDFMl5iAt/JwR9ZS/z1z3MkNqgfvFstPKWDzKcVN0ETxB\nzF0+FE+0PQcvM0fihTwnhtFeROF8KuU3qag5MErog2nF8W4K87B9O4HLKIvy\n2ouNN1KgWimprhUt7gW5nK6XfhtlyYcM/Zk10UX+/ZFy6y6sl5CwkIIKHl9N\npJVHtawAwWelTZ93sPkXwLLPjQZmHLHJKugsnKJGirCgWfXxJ2nJSQ3rbWiG\nyoy2rOwfna4i2cosZndttuaGWYNnckjNC8GScPJw2oDI4hbZWJ+boFRTbLnj\nROYi\r\n=M4cc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5IBvIs9m0gfHT23M4bQI/nPT/RLoD71E0TknS/0ClMAIgSk9bga6UOVG6qetzhZS/2KqszP/A6qxqR3fBWhzVIow="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0_1627399412063_0.4211955894926118"},"_hasShrinkwrap":false},"1.32.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.27.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-Qbvr4wv0mzHvJ2qvlPqIPo0R/QM2Lkk4ULNiknmU6ZF9PIIUIqJT4SCiOMMSBRrJ4iN57SuluqAw5tqsrzxIyg==","shasum":"3ac312a5182d2f0ed4476024751f45ff4c4a95a4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0.tgz","fileCount":710,"unpackedSize":1250048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAVEGCRA9TVsSAnZWagAAou4QAKExyGEq7RcOW6E3Fyvp\nIQSTcwP30js8ptNGkPFbulINk7Oh3EyNF41Rk0WdUIbSfOkwWzvUyzhiLnBa\nJ7j64hKPQenvlkU7tRGtd+fMSWloat4zk1x6acZ2ojaqb3sCHKVY2LAhtzyh\n2hqxhgBF597r/R5Qd7Ps9+PwGB27vCaosG6UmR3GjdfTMWDOJHnhD4LZD5Jz\njHdQhF0BbV9NzALYt8LUuagWIWTC409Ncbq9H3mZzez6XJ076ZRw9dI/qtR1\nLOVjbrvfvwC51GpcyYp08bXhrX5aJTlvYGJSZUrr9f3RS7o/VTBnWjmQwA4A\nVo7cCIVENoMmuKDjVBoU5SFJ1z2G/wDnf3D27byg2cvjV2dxTOM3j/d2t11W\nnlsEQrIzLha8l6wpTDhfPL2Ki2sDrvW9x681d4Kn7xlphslnpEoHhzr7FSp/\neI+KcxxBCpLNtK+Phv+J7dK3/N3chSmtpdib1WpgfWo37BYedmBe8+NB+sbu\nYapxCCRmFTU2Sv4hbyCTE7GKSL1QysuNbqtzXU4oCYKuxsuBRM2rwSXgXYMN\ngaA+lYg/91ObGjoKtC8Iz+d+ULivMS/gQ4KpIZWc5Z9hOadcTFVGROruaamL\n1CoF70YJIzieGAl/SZGJT66oa1Yvn9BD6A2GpMme3bcPgMoDm1ka2fvhqvdU\n7NMm\r\n=+z1Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVnoOjhf85YVjhe1Id/E8R8MAuTAFuihkjx7LXlV+qPAiEAlZ52ClE2nj/1N4xlgOJ7nxNtLxIa5C8ukqe+LXAHnAU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0_1627476230729_0.9197561015659772"},"_hasShrinkwrap":false},"1.31.1-canary.583.00d9ed4aeadfdd77a4b51c9d5bc97e73497bf90d.0":{"name":"@sberdevices/plasma-ui","version":"1.31.1-canary.583.00d9ed4aeadfdd77a4b51c9d5bc97e73497bf90d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"00d9ed4aeadfdd77a4b51c9d5bc97e73497bf90d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.1-canary.583.00d9ed4aeadfdd77a4b51c9d5bc97e73497bf90d.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-jvd2CE+rce9i0mKzIa3m53SVn0Dby6pAQxnm9nfx1GKZg0Q5tNBI7bf9zkLPAcPFAPQwuV4Jp4MPiLkWhxbPnQ==","shasum":"f906b26814a2f24cc351dba7bc9b5955a205e42f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.1-canary.583.00d9ed4aeadfdd77a4b51c9d5bc97e73497bf90d.0.tgz","fileCount":476,"unpackedSize":1011718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAnOnCRA9TVsSAnZWagAARDwP/2wWfEN2arcWM0/O4hHS\nguWM5MNsrDI57gy4fOmPPvuieXPDMvVChEzCgYpjW70ZzuQHxJcLlbZkA+FF\nhRsoQDZmeznR4XbWH7h6RAq4FgqQ13NrxmRxfENGvQOI/q+LPIfXw+8VsAOE\n8QP+xdF0O9CFeOUFJOOTBiNzghtK87HogWvkqnOaXy7UEdmJhoXYhnO4+3C2\nc6EL4GcgqX7m0DUtLnJ/W+KD8OXilJ2ZZqb0nvBKV1+wB8aQm0hsOvcQLkz8\nZ8EyAIqax+6su7XUhG3dzaGlHqFOtfLNjyX4xpyZE1hxWyysQArUwfcNoIj5\nZ8HoiCGHkZMCWidl1e+NRVrTLVKx3CL3EjHX1vHAZe6BTYhvrniZucvHC63b\nAs1RmH9exGOD/JiYsKov5L/3y2Pyp/v95H8btxbLxXLGE3UoRAH8ul7lU8MN\nxTYAe693qJ6JSKic5VPkkTO7DwgfhDxFsIZ+SQjQC3YQ+o0kjMAVqVuEG5wp\nhMhMdpuqbfsc/cRXoGdTSKKc9t/kN1TqpjQo4TWbFfbnKEKsN3q9q7jPRXNf\nSf+SFED4/IeNitshChuLBD47v7fzdvT0znMf5Nz2Mm27zDcQF9hWaW+qrHoX\nrwtHPPCzikRLH4b36PrimWnL2JwbC0s6Jbcpc8vZ1K/li4e71vOUWcz86bSh\njn6/\r\n=P+s7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArhlC1wKy4fw+keH7uV63ra0dlu90eQ0US5uLA7kxvtAiBpD0qLfN2rq67wHxFT3Dt8muCMfJDZYuf+kXEryLt1hA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.1-canary.583.00d9ed4aeadfdd77a4b51c9d5bc97e73497bf90d.0_1627550631572_0.5967624795281765"},"_hasShrinkwrap":false},"1.32.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.27.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a78d902378ae2c663eee5bf10be00b0a660257b6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-WX4YGSyujpzl+rLNGbkj/ppeQMBzbV0eu6UiF/9od/K2FcW0wi+JAg2+QfEqDCZn1jxLhn7JvSwu8/ue86IaOg==","shasum":"a732a01fa7aa183e69b51e1a403c52e546b9cf3f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0.tgz","fileCount":476,"unpackedSize":1012414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhArolCRA9TVsSAnZWagAAIcAP/i0XYkQNIxZpzJ0cy9R1\nNLAHhi9IN2TgjewgS+lRGXVJh++/UahaOIDk3boxQ6GBDCNJETrSvD9+eJU5\nSRJ0FGyCVaifzp9Bv22V2kjO4gwwduFEAPsMIaZRLsp9rE4hEyyJgNCxd/a5\nixsckMNqPCf2Oh4LJS8QppXeIsysFUhzVoRaJH1aMbdsqvLXkTVYDS4z87l9\ngJLrIDL8rYn5cH/hJ50AQXz+NcGiJoAYsYC0Wl+NU3BmKq1QN684LyxqOCQ6\nzwIsD8koUaHbhJrjo1Pz25PldfafvjW4FHnCI5wGijkMwPhlZsgeaHnBqwma\nlDp2pwA918GtsZKbbxgpe9dDxudnTpkW/a2oCm04q2PIyY/SZ2Dcec2KLtQH\nODg97CPEDde+kSGX8DPI+gwRH8Bp/GsNq2Ckz+KhCFfhyShK7Y8KZ1/WU0GP\nwp+ct58qBG50TytoWBEJCKvN31qIebyrpqOoxhmMvH/EC7LSvZynK9+dGNI7\ngXNPGaC9Ei/VED1+WaTT/tYijkODSNOlL9pGaltLT85EsFLAuxkDJfBs+RcF\nQHZoHZh7U/R9rLeyvSVf9ofSyv4bT/TwPy7QDMFGkiHkQoCHE9+q/71ib5Xh\nSNhglbB8vFVsAA29IcWhvVbx3Oos6mdWFEjtcUre+Fq+v5z3mr94Nfe3fvbc\njggl\r\n=sKtz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJPapONdfvYVc66LdFScNuNeChz9OKlQJoePCubQnPFAiBVEcmL7La0IgfmOLok5DDm+ZBSRtAX8bYV4hAZCD8NLA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0_1627568677604_0.6160093962947693"},"_hasShrinkwrap":false},"1.31.1-canary.583.eb4eff21145e2b03ac416482dbc825e32d70678a.0":{"name":"@sberdevices/plasma-ui","version":"1.31.1-canary.583.eb4eff21145e2b03ac416482dbc825e32d70678a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eb4eff21145e2b03ac416482dbc825e32d70678a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.1-canary.583.eb4eff21145e2b03ac416482dbc825e32d70678a.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-DJaX+uP6FLxbkz54jyc1VUqPhYnuT7bwYWcxx8Or5ox+Lb7yv0mJjNAmP8n0y9VAzvlX8M9ZjHo8YwTc5XFfbQ==","shasum":"f6e61c114c371f7a25e30bcc0c72b28bf7e288b4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.1-canary.583.eb4eff21145e2b03ac416482dbc825e32d70678a.0.tgz","fileCount":476,"unpackedSize":1011718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAsZ8CRA9TVsSAnZWagAA3/IP/AwH2JnQ8c8If/8oGXpS\ngENi0G2CrYXFmop1CtwWtmXJd6YgmoubG5Fl6YeZOPWJoXKnTcydu5Jox7Fs\nIPwADXe3+hp689tZjCU1KwcvhjP4r/OEMgqE0S/HTWwTpQSkE+0Pvypxj4CG\nOmxY+zGRr7g7rKAm2gxkMsxLBTeeubDZv9n5XSFwqqs83UOrM/kev3w95cCq\nK9oXSE2HnYfzBC9/k67mF/DcNnNFjlXTP6BtpFdrwyNxfcgYqQI4wunKTKWm\nIn+r7e66wcO1PTzEk4aZ9BvTPZ2hRWyrGe1SjykO/V0RkkH0AZc1oq7ES9uF\nPYdHhSuRB1h2Zf9ekJp4XwrAHxdBr3Oznqg2Zgv3XXa2ngXanyYOAaTaEqWj\nQHDLfXhIZOGejjLrqyFIbTcRNfxc7RtGfLoJgoae3npA5PFq1bdK0RAe1ytX\nJmdvSkIkN9ZUbCxs4NHKIzcASRKPifMXiamyeA2aZ8ACwAH6V5ABP79GgoAn\nuNojA5RazEkZYgG8Vuqrebdzc6oS+ESJIBtn+OeCGart8EjiH7g9UJFSK2Es\nNljxGeIIGLqFdWUPVkPjWuVPBcZ//trpNd59La+jKU9AB5kQiv8/GwQrLFoG\nJ5KBMaYemEXBxTfLag2WNObBXT53xYRyLhh4tAIDH73aDsk+HWT+nAOcvkEP\nS58h\r\n=qvsP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcuwho2p+PCKpA5J68cm322IIpSmaxIlxiOAjunKKw1AIhAPfP33pIjDlb+rFxHei7EoS7mFNkta1nPtmDIOWA9jx/"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.1-canary.583.eb4eff21145e2b03ac416482dbc825e32d70678a.0_1627571836200_0.2969748133623469"},"_hasShrinkwrap":false},"1.32.0-canary.584.502292a238e39ce0bc0dcdf140d40a115e624231.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.584.502292a238e39ce0bc0dcdf140d40a115e624231.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"4.3.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"502292a238e39ce0bc0dcdf140d40a115e624231","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.584.502292a238e39ce0bc0dcdf140d40a115e624231.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-f6pUkO2kOu/1QQKIFlFSZ39W4KOYPcFrkNIrlZJiSgSvgYbXdXKOXiMbhKn6ZiT/dgrBMAg3lRMa1Bs/UT9fAA==","shasum":"ce5133c9aab137c373518a9a285d1d0ef804e602","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.584.502292a238e39ce0bc0dcdf140d40a115e624231.0.tgz","fileCount":500,"unpackedSize":1059193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAv+PCRA9TVsSAnZWagAAE0kP/A4G0fQ4mdfhNiIccY8s\nc7wqgSN1ylCfX6N42eTyJBgj5XNjoWweFKrXX9MF2sv0X2dg+yGG9u3S0y/q\nMeVtfX6KHC6NLaw4qBdThnRjO3Y6uaX6iq8Ok45hzxA9JIlr2Kx5xX9ve5Xa\nfWrWJd07XMrdzVBJ3QBMapbKBaQTtMsktmjoLQHQLuNycuhzVNtTo45zBYA1\ninui6dixLKBv27tY/P5Af2yeHM49ND/aC0IQfwm5eifzA61JC9O2AD2NRCgO\nNYuOrDC47dWq3p17dJjGDn0MQ7kTlH6MkP3XnfweAE39NJsupvaV7yhVZkpZ\nmFOzRWFVgHIbIL6KKHbTOgB+sHfl/ky+q0eXLzM6jfZf8Co6V14LjqZ0ID2f\nZ1FQ0HxLi3cqX1XR/QyO50KfGYYGwsAFo98Jc06Q1stTHlCngDLq72nkffen\np/uCyQTBpUIUtJEgPPgMZ33V4/LJv7LgLUb4ShlsLIuAunfYTZKaMUKHXWBi\nOaJBsXItpo/VLUuL+eDaBnGY9HE65msTrrNds3GBwD6KDouZgYxsbhmADVLh\nJkMZZNXBMs21jVCw8gtyGsw2K6f297d+xBaiYAWOD7AKk6P6SA4RF6DRM4B8\nOOQvQUbAxHjbW4EzbZNU2mIqIxtadf608NH1RmIY451bfT6isK91GIOLav3c\nnQ94\r\n=IMre\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2cgsnwWyo4esEZUEq/mNkZZzZDLuP8fQ4rg1QZFCdQAiBGYCbsDrh9Mxg0KUubSIpinSkjlOg4SiQ35OjcJ4YBmA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.584.502292a238e39ce0bc0dcdf140d40a115e624231.0_1627586446972_0.3506246447656358"},"_hasShrinkwrap":false},"1.31.1":{"name":"@sberdevices/plasma-ui","version":"1.31.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eb4667745ccd841a3e63395254a1f5f3900b7944","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.31.1","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-Nlpbkl5ucL2eftoNBPwQyeZm9+OTAMxhr0xN0bnovYUMhWPdQCngDHWKRMprzdKOltUMseXvtN04ZfmyUMf28w==","shasum":"b443cf8feccf3c2635947c13351dba1fc53b79d3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.31.1.tgz","fileCount":476,"unpackedSize":1012250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA6+uCRA9TVsSAnZWagAAZXUP/AhSTEgj7M/AqsxK+k4q\nMeb4n+AuM5Vkh4iXS+/bk1RLj9PovQ3x+Qw0cKrHy0gdBjOMRBk2kHQ644HU\nMO3K1nrlTWHlTDpgC0EiLR+cUlWx4NXrzcZDFp4y3YL3fQZbKtm6lRgZsZFp\n4dDBPPcjcAovBFco/1OkjdawHVqCocZI4MxdOVnSfPDLRFDlJvUe+iTgajiy\n3S5TUfo4P2ogFNjw3TaevVmlcOqBP8v0psFkDskXwG1OIqa/bcEuqAJc4CLZ\nS0couqgcDbzOwUb/H1oCzP7oFc1C2WtdIjeb7uWI9K4rlw2OHGEMSL0JupGp\n5lc0ki5hFvkzMBpeC1p1sTI0muwqNmkRDe2WSlpgPK9eT0MQ3vDuO7+CVMkk\nIqgBs6Z8+/3xySm0dwhveCDwp0YoDNYSS1wKhYc1s6kJechB3Y6X6dNEQtGe\nYAWpOJ5LqwW2oRSrpEvHsvVc7kWwrTNuTgOLUBLC3uKQT4DMn6cmCxwGIxJm\nXiW7Wvomp/lXbZFBWgNHAZ45SpxfA5xx/9hYOBDAwy3RBLXzjK82n/zvgWua\n7h+cOhA5cRAGqRNptugNYYGTiY8SCHe/b+q2NYixfpNVVOe4pElVB1XSVwiY\nD9xlPaWfvOIcZU6pHu3EaIZJlZDmhRvKxf9JMNMhdd0VV6yNN2Q1GF8qeQ+B\nkNf9\r\n=Lpdv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCduyFuUw2b51aQCgbtWkISX8kCVVysKlaiiLDHiStdwQIhAPz81ILzm43ss5oHMBenewlQfT34G7jQ2SgsFxegnZ8W"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.31.1_1627631534632_0.09939168170322721"},"_hasShrinkwrap":false},"1.32.0-canary.584.51d5f9ff26c5f366098009c3e069d5a2f8dbe5f6.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.584.51d5f9ff26c5f366098009c3e069d5a2f8dbe5f6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"4.3.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"51d5f9ff26c5f366098009c3e069d5a2f8dbe5f6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.584.51d5f9ff26c5f366098009c3e069d5a2f8dbe5f6.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-c/SBsn5fAgnYMux96zGb/M9lwN2VjdilRDJtxVolWB47HqjeUl/SY9nLmMfVXJ6Zfa+PrYpq5/vMNPM2c/W/FA==","shasum":"01af59d997791332467a90885337bc24e794c842","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.584.51d5f9ff26c5f366098009c3e069d5a2f8dbe5f6.0.tgz","fileCount":500,"unpackedSize":1061269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+C0CRA9TVsSAnZWagAAPm4P/2EscLin3RZC70kyhIIh\nOqK8inYU3GnOJ/1EyMR+mdzyu1+Hd0/18H7HbpTPyZzjH5yL0RZ5zi+8+9XQ\nzCZeUAjNlsTmefwzunmCiamKDppzEl3sOHnEU6YPegpbNOb3U/mRkEuTiOk7\nqv/hj5GsqR+ZcVAyTsi7yN2GlD4VJbsLE+sO23dam7Zsj7/ocBEnK7UpZFcM\nDksy0m7DWd/LrBIzypYVbfN3536XO/9vaKx9hALmU1xnST7LoMGTymuU1Olc\n5yFJQmD0tnEzk8IMJXcIWkwhRbBZPo14E7z2st0ajUU7E3hCZyEkYuH0/jbp\nek6/anV8g+IMNLjN7W+n3YkEeTowZxvzZKpFsT3XQw8pgB0LHagLhbs0FXmo\nDpQfuk61eXNAaHxlUESa/7aj8k+pVn0fPV72SrkmOBJ7EUKOzi6Nm7mCl/fb\nGxQLlaFANsNK45n54I+q/YA4vn7OV2t1q2WBWR96bg1FDJjH+S3XF7Sf4p8i\nMNAAMegMC/6zsokwsRcILo+8L4RR+V1RSZGgW8N+os/hE6mqJBv1SO7BeHPm\nKQM2aPgLKDijiiQWvQCYVIetY8rIh51+YnQY5lvxJ1MlQIPY4wgmN8BvaUeu\n+gGStUdHXPQHJvrxh+8HqisyxUa2JKxU/MmKlFaL1gOgX3YZZ1NFlr2fbee6\nNK2+\r\n=w5Fo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7S4MmNQV+hJd//UChbBIUUCPYtLqjYv7WqDlkr1o9rAIgP7spxRtqI4E5xs9EvIhbVmG1n2cHmhuAgQyWmxxvJUY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.584.51d5f9ff26c5f366098009c3e069d5a2f8dbe5f6.0_1627644084293_0.05431050398791504"},"_hasShrinkwrap":false},"1.32.0-canary.584.0b118e3b5dee41a99e4bd9fcbd0f1f7ed179e9ba.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.584.0b118e3b5dee41a99e4bd9fcbd0f1f7ed179e9ba.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"4.3.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0b118e3b5dee41a99e4bd9fcbd0f1f7ed179e9ba","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.584.0b118e3b5dee41a99e4bd9fcbd0f1f7ed179e9ba.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-9qW2IqOe+rxbalelWHDVCcBbhtuPQvImYpXNTSmnKV6LqRj1mpg5c43fS593lMmVPs8feZ/iytchf9hGcRyLbA==","shasum":"3f8697a45982bdf987372c57c5dc1077cf7a8d91","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.584.0b118e3b5dee41a99e4bd9fcbd0f1f7ed179e9ba.0.tgz","fileCount":500,"unpackedSize":1061256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+JMCRA9TVsSAnZWagAAumIP/1cs7R0VHd+s7cY0Im/f\nCDuHRG27ATmEdgy2TNCdqwz84BT96eBY0jrahUwA8a38ETF0wAwphfdRwi1J\nubnAN+V53PD9vFkYDg0WHlbSkqCqP6S9q4BI4aDbQgkaR4LipJPwWkYW3rVY\nyqa5Oekmn4znhZaiOh20VUmchYsVaTR/iUGo7tb+iYZsARncTp6ApLt7FCnP\nKCfkSnlQXO+5GUzaKQbfefzS6FNm2d/urJ60cTqnxqLtLVVWUF9IEPgJuIwJ\n6cqsufIy1yQl5FGw+BluY6wfMc63PgFe/4ME+5b/vXlk+O0WW2YQUwh0U32D\ndjweDXtVl+/WTtXlH4kPzJ2HnvmaPB8hf0inyhwACpXeUHEItI2YIJ1PkrbY\nzVbfRkjuMFMIcHY/Q9Wu5v3fu6+NKe1uT4u2PWc1LvUHp1rkpk/djp7dJ/lf\n7m8yFwTC1jteasd/gmmLTjaM8Yek4GylmsQp6JzFCLKsxr8D8lsBpQr5hLLK\nnF1SjdS+4vSdTYOcvqn+233NQry7l3BUBOqy1mCgxC6PcUmweuGWzPwati7K\nTbF8DmyXvYm9WFkMssA6oCGg/dQ5lbCaGe4d7FdlUKocfQb25BJDLplGhDqr\nr6/n5OEN0sY69hcosl+hvgDUpJEMFv13ipjTatYny0LWd9b87AHJ35el3d1k\nME3a\r\n=5W/X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsBOgBsZvOaLzNbVwDsYHfbTNdaEFDzKMchMUldS3Z/wIhANZqiwTO6oaX8mJF0AfLLnZrrNtw5MsdBOUg3WmzluBo"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.584.0b118e3b5dee41a99e4bd9fcbd0f1f7ed179e9ba.0_1627644491945_0.0076507938819869725"},"_hasShrinkwrap":false},"1.32.0-canary.584.5b1cb6695fc4229c1599b4a5d8cb25961aed9227.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.584.5b1cb6695fc4229c1599b4a5d8cb25961aed9227.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"4.3.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5b1cb6695fc4229c1599b4a5d8cb25961aed9227","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.584.5b1cb6695fc4229c1599b4a5d8cb25961aed9227.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-ee1S4v/jFoJlTrlC33qWvZ7sJ1wytCHUL0rnov1KYobcxq/4QaKgEBBrjvbeg2mR7h3+OXK8QQYkBh7Jgaguwg==","shasum":"1bbc08a839a763d83cc5850aad98d7ba4ad65379","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.584.5b1cb6695fc4229c1599b4a5d8cb25961aed9227.0.tgz","fileCount":500,"unpackedSize":1060536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+P4CRA9TVsSAnZWagAADdgP/ihf4FITd71COyELPaZS\nOiU1nmU7vUCJZvgr62A6wcmth8Bzx9Ckc0PPoIJvzWveJqUmL0p7j4RXCEXf\nsdVi9XQ6b/hDeR2GzT/Wty8VdqQRLlQhL/puetCw1nv/0AS6tD+zglCdS6hJ\nnEXR+89HfbpTdJznz7BZi6xEO4wOXmZcMmZNi9vj7GW4CdunOR2cW8U/bKRY\nkxBqppjGNgpWg0thtj+rdP0PRaY6K+iGGTBXsNdNERZGZCdRCjFPsOMCt4TR\n4tO2vhzgDH2aMFny+yYdXugluQLzBb/g8pVgkmTtXuRjgXyjKHJDhOJHVFsY\ncCwGt1BBPeAk0ZHC6e+k6GihmQ1xBHP2xQWdAlXYDrx4ypstdoNDxpLkB6hY\n0mTpPu0q9XxQRf4Y+Yd0a42I3BAH92LuQXMASZA5jmcBkrm7E1KaZgvobtWb\n5Dd4BmS7F6ErGHqQhEHTaaje3RXhbhPRIRjP5YjiEH37M55IIt5+My9LAu34\nbKoBmHvE8vPIwbLWG6UsvDK2dXcA/C7AOCYCkAWWN0VlLjtCf5QiKQTJl8eN\nhonwxCSXKok17l+Pp62MbFATVGbyEOLYFhhBGh9ccyLpL9ZC52wcudawErfr\nq/X5Tvfvcc47/w2slIjb1DP6+K35o5D+RZDzKiCLSB2CBpjKGp1qaHEWBPiP\nPsHN\r\n=8V3f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFu6DbWHUQZVL3gAfumKx73dxFy5/6njA55AlR7yvRqhAiAJg/Ao1D+oTCB6/LPo3nJVEvh2YZV7QBV137gFE3b5DA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.584.5b1cb6695fc4229c1599b4a5d8cb25961aed9227.0_1627644920473_0.6703757136510515"},"_hasShrinkwrap":false},"1.32.0-canary.584.696298576ee76422732d109fa91f8e3f0a6a0d2a.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.584.696298576ee76422732d109fa91f8e3f0a6a0d2a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.19.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.26.0","@sberdevices/plasma-sb-utils":"0.10.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"4.3.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"696298576ee76422732d109fa91f8e3f0a6a0d2a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.584.696298576ee76422732d109fa91f8e3f0a6a0d2a.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-rSOQg6mB0i59OFM3cJL9UtIFyNr9eEpf6bDI2L7weYlFQaOIG/xef/5qH4Vz8zKYtRVkz+R+QPJRnTGIj2saOw==","shasum":"1af5fea696028613aff6aeefa3e937d685f83393","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.584.696298576ee76422732d109fa91f8e3f0a6a0d2a.0.tgz","fileCount":500,"unpackedSize":1061013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+iGCRA9TVsSAnZWagAAyuMP/2sO8MezU5uAqgwHzu2v\nb67U4VlohNYXsA23SHKOQVSZaqLjq/er9jwFzVVtI8rq+X5R4dd1TY+9hseE\nKxc4vZN2dilwvs+c24ZtCSvsComaeoPOMooRZNy8zawmS7tWD7rqfwIncr8d\nNc0gE+vI645sq5QRhOmYAJnck87LgycH2JVOeSWRVZf7DkYW52vErpTgxJwM\nofGV6Gtl1EWMheFpKf6E8MGnYmV1Z7rhRqXb7zssdKC+RwWCbHkGp6OuWpq0\nQZBgR7gsIKyoL1xseoa6rWZE0YTdH8TKcllMnnioDivYI4n9t5rB4ANWCzMj\nvXDnHtoJXyz+5GUQOzHL9RWW/LnV/LG1pJD1GN21WHShSKnjNn+Bmk8Q9OeW\nIuf4S17EPTbL//m8SSU1uaoYbPuoxyuzFy2tRfayoT7fTPOs+TIXNiWeg9Ny\nYKKO2c83tBb3Zat9UnW51NpZOFl173LX8VrwKwQS6WV6JoI0UArN8j9l/q82\ndHdk4E2SaYvuDTEadIIpMKqIfgAoMKwkQqOqvjF0APrBxviZMy9qotW8D//n\n2LqVWD7bKX5bDJZEmZaw+d5jfJA5dliQ53g+odbGnvbSZm3yZQXepdchV+Kp\nVDkVS5ebLrDPrHkd1xpgJw+ojxEJYuc1AOJ9c3WbxoYEiR61SIfGD37uzlMq\nGK4T\r\n=TLH1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdF8w35mXV0z/+n3c0FNDg+4YIX92NYys5MRMcWIB5vAiBBsaPBizV62FtGYhchHUeb9tEOYYcDdtknqoF3wZ9JWQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.584.696298576ee76422732d109fa91f8e3f0a6a0d2a.0_1627646086111_0.7708816509811924"},"_hasShrinkwrap":false},"1.32.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-icons":"1.27.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","chromatic":"5.2.0","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","rollup":"2.42.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","clean":"rm -rf ./components ./helpers ./hocs ./hooks ./mixins ./types ./utils ./es index.d.ts index.d.ts.map index.js index.js.map","build:cjs":"tsc --emitDeclarationOnly && npm run babel","babel":"babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:es":"rollup -c","build":"npm run clean && npm run build:es && npm run build:cjs","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","chromatic":"npx chromatic","test":"jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0bf54f87f7696f6da4dac0caf884e32c4c76ba3b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-xyiM6PH1lXqqhPVxkk/iA71boDxC4woSq9xYJvRsOUZTy3jGI5O9Dztg4ovuLUPjYayOWDiHquhOnlTl1ZOewA==","shasum":"f278b8b28fef70fcf026c8b1091627c034a27bb5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0.tgz","fileCount":480,"unpackedSize":1042657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBAkFCRA9TVsSAnZWagAAJNMP/1o4ginvFQhEPk8eau9t\nb3/sl6AwbTdFpkzZ72JO1v9PJLL0quV/EcDoEGpzwec21BsP9ekRfR7V+cCl\npX3v6BitMhj/VkKWvcjhtgLWXAeGIZ2k2wT7w2N+J+F8HtZybFS6kO8ubPjY\nfu5i8HIrr4KC0s554Ml7Y4sI88E887PRSeeQwq5wNi2ROc7HQuTzyY8tejkr\n7eA2OF5hPcobT1m7lr+uubJcd29BkyXZk3Z3FbDF1ngRuEJLeR1Ka6xb/TST\nS3Tdv8rt82GDuVrTtE5h8ZKaPd6TDnUnuAvoGA5UiFgU+rIqcl5RcLjykdDZ\nnVukHa9m8obJSeqtdDygbTiGmBBoS1+0W1MI10lRYVbCjfEZvmRr76tKiGV5\ngUzGatBYNUUM226rX/UPE1DlnB6eVBTAxksVlTdTtylsqrFDGVcghSvAJ15o\nsnBh/VtbW9osUFytl+dFtmJsRzkzwnBA2sHWU7fvz40lQLbCZ35nTNpPbUOg\nvb8EKvt/WjffpXGI0OiaF1XJmfDTEbY69V8HTzM/bvlX6mKMSbalA889tOB8\nsoh71kEA75V5wVwh68uJXKY2yEyMEZXaujwl/+Fs6sFQh1Azzo1nmnVpABxq\nq9ilzmhAn4uU9RADFhzy90G1SlhoRdiQ610tjgsWM4J7qisVNzl49nfdHH/B\nG6zB\r\n=1JSv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuISTmLMbW70oHKcL4ci0Xl2fMGD5jUpEqsJe8T+S72wIgCpurziPLuUwn9SjWU+FtG1F+pIHpYEhDfGytsP/CIpc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0_1627654405385_0.9490396252215632"},"_hasShrinkwrap":false},"1.32.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.27.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0","@sberdevices/plasma-sb-utils":"0.11.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf0ab491d305c72d369b73b18e2e044bf989b278","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-HTiVUnUvL45kqRyv5lYWM300bhaCJxreubc9FKp9GqUb7EyYAQYVC0jqGhrarR/wAnBRUOt4oZWCvqMQSIDj8g==","shasum":"1ac0b26ff7f9eaee8d984030163d407c6c2f03b4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0.tgz","fileCount":710,"unpackedSize":1250956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB52GCRA9TVsSAnZWagAAuy4P+gLAuV/c3ZjYKQC+X1nx\nDso9vNIRWeh/DGZoVCtUVQAGyUqXvHHBZ0fQDEGEn7RzODw3FKm56763eTU1\nS5KV7RGJ/4gHxfhDgpSO2Y2+eDjP2gvYRe870E4TzWLNmH9OZQfv+GS7k03c\nmdf1K+tCMFk9IDpnk90CrOaBe2MZlQFZOi6GDZaaS1eO0fKNxmv/T6DfCiIJ\nN1EyvtMJlY2VQqBVwPS2F+PyB/to2zxWwVZic3byNWFZ41/lOrSYQKb66Sl0\n0m35Qfp0gn4fan9+0ypeWZE6lSKmPl0V47KeP+XihwMrYmp/busqSeHpzIpr\nuRX7yrTUgKD/KBvtM51SbDM2/sZpYorgXUWlF7D6me6pfnc7/YPTFA/ptcqA\nJnRGdBWhteidwAoxmpjCcaB5Ag4P6Ei2hW4vHAbTJXrNBo4MXSu/pPnI2rCi\nWLcqGy9nAA42vB5gzu5vL6EtYKK2un91s9PrOJ8X3vvQlMg3626dS9MZmmZa\ncADnA2b8L8qxMKj9lDVorA+CChsQxj6he4G3CWw/IxusNRv/baf/YWOx5/F2\nSDnIxDRecDQXkM6Fps91I9meHjoLUGj2p6tkZsq8EndDiCgKFEZniWO4b/kI\nFtoTf4e6YjJF63+9aCL+tjx3hbeb+lX8wJ/SdDVjIlJHwgCYpoJLfdrmjNhv\nFhEl\r\n=IYlt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3mivGiW3l8xRsvjyoRNwGiZP4ho69r2padO3yqdzS2gIhAP3Xwp96SSpArfNHs6lMOFqo8ivmO1TZfYEwdN39An7m"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0_1627889030296_0.47939333663537753"},"_hasShrinkwrap":false},"1.32.0":{"name":"@sberdevices/plasma-ui","version":"1.32.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.27.0","@sberdevices/plasma-sb-utils":"0.11.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7ac74cb0db1220266afb353792154894a3e10d21","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.32.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-JK6ErbRuAvL7xD0Lrb1C1VBgiS6VgcpsWMr4XK0lTLu2G4uABxZGQlxVLz3uQoJr3VbDLzcsOi1SWBjNtlgnZw==","shasum":"c4ed44997fe48e55f0828935dd30a4fedfd8cd09","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.32.0.tgz","fileCount":710,"unpackedSize":1251178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB6DdCRA9TVsSAnZWagAA0qAP/3LDY/dORzYdCdLbx2I7\nVqSo7i1R5i99nm2bRPUNzbpwRy3TkoTvopMGZosVc9otr+9hEaYTSJ1TPwve\nAOvbl4ryZpQny6vlGGNACfFN6rJ7xqIczUPC228kq7RtWsg5UfLdPUMUwi0A\nEn0auI4bou73iZX3E4EX/+Q3hj0WOlWVHjKL521/DX/kGMKKDgLYTyc3r//n\nBGNP+DAg32aWpAqWwn/ZDqZeJFeBRcVmcpfLD4OFMPm02Ffwm59Q5C8GTOWK\nSwxbCzTiEF1/XumiK3fZDOQZIEpDin8PTJj8Us0n9Kc/zOcT1dsbBlrhA7fy\n6XOaBgx6nPitbIe5jL24+KfbOiwAM7DwR3bDcK2zu6UkFFJkOSMmjDgjgJR4\n3vrSQeSxIrEdWAr2IKU4Lpar03vyflnUHNBL1oK0fmpEu4TEuBV5+rLI458K\npxX0t1tIiEzkahBhOj5l7ccCIanQhWXJRQMdIsSyBPtJv5dq2/0cdhj36hMO\nJsiyampevDMYEFgW8Q2E5M3eFbQOAsU/Xh9v0/Kkni429tksaWFOErgobrqV\nxKsr9GvKgKAEmzdAoa4pain122hMwunqXUVLut7feZ+zkG4H4sHP7FJlMCWc\nGBzvKSTJjuH5vat4A+yjq+90N1+a7FnWgX84pVxdyK3DbIVpcsh376DKypLG\ncXwJ\r\n=CB8E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2zWKvUBtMvtnvWQwUZQvWhVy5m+tBUIXpMJkmD5vInAiBhgUiC7/9W+IGoHc7cOaJwOOH5diqRZS9BW/iS2VnIWA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.32.0_1627889885003_0.7670076645798822"},"_hasShrinkwrap":false},"1.33.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0":{"name":"@sberdevices/plasma-ui","version":"1.33.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.28.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0","@sberdevices/plasma-sb-utils":"0.12.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"40c1e7539c6dcb3583c56e5f97675217af972083","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.33.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-u/JaBF8iAHOqkcNZTb+DarPIp+js/eQDxaHCN05bSycqTIMOiTuJZcvp6g3xdKWRxDLsOdaxXZilkajrzlvBZg==","shasum":"2f738e0727742227771225ed52ca1a28fda69692","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.33.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0.tgz","fileCount":710,"unpackedSize":1252164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB62YCRA9TVsSAnZWagAAXJ4P/0KW95nO6ukamuNTk+7d\nJcCc7pYKbi+IbGipCyxd6q6GTPebGw8p6dWn2iKriEJ4AYjHTjJMB0NK+Ana\nhtD0GLDvG1Epgd7zKN0cbDdYGevAnoHG6RKpu0wgylBxZqPEERRV++34+URp\nXV3MTpZ1lFZ6UPCl16quTSPcVo5z25nmV/79QS8mqBBqhIxvQQj4ymYaGY/J\nfdUU3Irkx3wK7Y2ka1HELQ2HogPJ4ThBj3ZQMZNOyUW+ElQrhlIik8I6JYQ8\nXHO0RqeE8lP2WFn/ikBMF7kWgn6+fN43BEDLuGSdDvfHDK8wb+guAdTUvPhA\noItiU45mxV8cy+YE9OZn0+pNtmMNAh53W9UmK2xA5Nc1wHjMHubU3C5mQrAv\nqfd7uAqzpjq4wiGuU8HyE39j5ZpDGDkPuLswjjT5U7bNatqc0V391CjYfWjy\n5QAzX7BawEsk4HBwjm45FsZBQR3FX5V5iw8TSwKLUijko3JHbsdsrprfgBc5\nMtyIrEJV4Vxp+x2UHwfd+Xnyl3C9bA6xC+1yT9rsREH0tncFOYppW/iVOkK9\nF6ctR6GwUnDeE/toNeuXRBHsRDhS6/pqdws898Jz1hGUJ79mFX92sSSqgUP9\n7ipuQPWA1VsVxULTDWUxG7XE3Bruh12aG40PNoggbX/gRuI1YrJtFM4VMk9r\n++V3\r\n=r+Dl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVXgbEym1i4psHZDHCdiOWEu5xzQMhzunEVi9tOTvbzAiB/3hFHLijSMEqvDkKEcYHOBcdXkwj39vwXtyeDfZlRPw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.33.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0_1627893143871_0.9547408041060592"},"_hasShrinkwrap":false},"1.33.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0":{"name":"@sberdevices/plasma-ui","version":"1.33.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.28.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0","@sberdevices/plasma-sb-utils":"0.12.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5ad5fa1969f8514fd27427915068653e0c51ecb3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.33.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-jXw2G+bi314uUXzeZGx14FgL20C6Cp2eEB3IE1LfraO8ufzuwvdtyqM0MOBmQcfC2XR0UZ5cFaaIY+Au1ga+Fw==","shasum":"9b0d997f56c5e0882845e05fc3d20c7a81d8ca45","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.33.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0.tgz","fileCount":710,"unpackedSize":1252164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB8crCRA9TVsSAnZWagAAzUkQAI6aLIigdQlVTLaEfXgo\nv38+Z3905AO4xSIJ8y7Y80VHR5n+xBvnly9W3J2aNvszZVoLh7dFF5QB08Wf\nA8V96aofyBKCQikpziw9yei6w50Ps04jDhxwAzswbezmb4PApsvzyc+I2yfv\n5Xldg3kNbsoNBlm362ynrq4SLZDVayXXz9VPx7C8W4qpaT2j24PQFkkq8lg2\nx/y05fCy5ivt4DGauOGee+DFPyvaatDhbgvq4RR/OJCC+LNY8bbI2z3Q4kGe\nSey9UjX7/XN47AO6aLiFu7R5PCrd1eumqJsNlw4+ucOVJi0yXJNbV6ik6NsI\nh7BSz1yhmlQWJrqsyC0O7wFL4O4BLJMSWDs0AzQYLfGa9ArjMNtvIKm0WEK3\n2o4TCgcRhbS1IN1AFkZyU/PgxTypMardWfkdIBDOuPIsTEA2kki9sv7g7Ll4\nhehl/WGuyJyFc3V+iMnat8i2dkMJkRLqstsunMK8V3m4imXcZr/J9LFTXdOA\nicZePpbYLEWJGJXfrI/HK+vk9amgjxC0qMjzsVwvi/yJpfabOLn7zj/D34va\nKG4qvAEy4+pwYwQcim7sgfHKmbfMUBv0aIlXUMBIg02s8rABPq4yW7zP2ANM\nHfv3SyKaV/ydCDH5UB/ZOz7XE5yf8NmWBwCXGYN7fQXNtgdaIVeWtRQ/JR9S\nqSTM\r\n=qWD8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBc0x1mJCw5a8ptlO460wHo9wNg/VJfGWEuyFM0sHVm4AiEAxRMDrGi5jsY899cXP+xqLMjMMFzunmoukVGZD28mgpM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.33.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0_1627899691631_0.7834568281116079"},"_hasShrinkwrap":false},"1.33.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0":{"name":"@sberdevices/plasma-ui","version":"1.33.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.28.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0","@sberdevices/plasma-sb-utils":"0.12.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f3886fc5926a9ab72b69a7d4fd4ead39f20f292d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.33.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-uTlIjGbe34b5WG1wVtTDk4TjlPU9AvLs+KFrbLDUalovuCAAIaOeTtpaJtxhm0Ay30gmGch47vwy9jqCisp++A==","shasum":"19eb71c3e49306ba1107761225784581a9489aa4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.33.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0.tgz","fileCount":710,"unpackedSize":1251340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB8haCRA9TVsSAnZWagAAZegQAIKb9leCrIeBnlR+1wNM\n9QuenKnBUhPSdZUkvUYgpCJF+6WWZndmrrtJNxBTIsn0X6JEIQRvhlfFbZei\nHpqWEmjmSdpBkiJVx1tTok8Ya4CwooKGEHt+3dJMAnpJW718GRL7hKLB1yis\nPnOLKdAnXhe3UKmj2Gy2X4KE9Qj1LnyIVlzwrTLrUGHpRXdjGPkXNjYJyrmB\nSSQ5rT6QAiGXGHcqukYsojBUL71lUKbZGq+oUW2Go2SmfZXEdbAtYDMb0PFf\nmjFmaxbA07bB/4nQF2K8wJO8BQ7gyHcjgem29kkaWfiOIW2zX6sX/RQr3Gqb\ntIm67AdT7hhAQP5hZ3LOl/aX7Ir2Y6q5JqtFRPXa9GVAu4muiBDqqSJbKY1b\n+8FHcsFYpqQ6GcRaSBjvyv/KxyToRHCxzQVqp/LV5jQpxb5bFwl8LS9E98oX\nBeh7NlZiwTCva1Cw0hp26rAGVzNBi3EEcACtWhlp01x003Cto6ErlIaA3PUZ\nSYk7jFGy56IE1W+mRevfqQeYdf9nUUWpX82YhYHORFJtsIDg9Qt6CQ7jbeSb\nWKI6BYbFXhr1eufylLxQ0m8spZdDd7TcdO0TqPyYm5upXg5fSGjjDmXPz8sL\nKI2KUGmKYwo5iObs7QmGWvBCLUz4FhR+fEzzMMVHRaaHVKCXCLE31nStF5i/\nmkec\r\n=OSFe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsvIwKmBcK07x6l7Tq5z8SIjRko6vpvHIL+trJ+Ffj/AiEAn+aiW1z1NY0dKojR+amNgM7/msXNuv5F9ql3ND1LlDE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.33.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0_1627899994638_0.015123890679421326"},"_hasShrinkwrap":false},"1.33.0":{"name":"@sberdevices/plasma-ui","version":"1.33.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.28.0","@sberdevices/plasma-sb-utils":"0.12.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b973123628239f2458459160807b6fa98f064b75","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.33.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-OURzMVlDPpa68lqXyKaUaMNFaCdmj4o8zxdQGNBEQz2GHP8Spg/1JWAh+YDYFJutvfVL28r86qMAQEynt8H4UA==","shasum":"127d10201570915e34d50d3215c44713bd74c30f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.33.0.tgz","fileCount":710,"unpackedSize":1251406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB8y9CRA9TVsSAnZWagAAIiIP+gPrbLp8HLOlJJXPZ9MD\nB/fkf3PUKYwqkrtq2o4NpwI6MclNKoycFFAPqnN8Ol6S2eHqfZJ1ggyJTRqr\nYoN2W5emFS1kjgHBdOz7f8OdaLJBjGa+C6rxIXS+zsNUzo1ANhodYwi0W0BA\n9BUsMlYz9ZlAZNvJhqSvST8IBq0XVQqxhUHyvQnITEFeVRHWOLom+dD1wafg\nDXoDP9ymS+/CITzJ7WRrCJNBH8/ocgeaX0pr3ls034BoW51FMMS46jqeJmCU\nNQQ45K1uno2UUzyMkLkGcabz+yyuyutD2d1cHX+giCTaitgNLK7F7wT7+8+8\nXcjGtphnH6NvMIIa9goXB6xeVCDoLzcmznPvZMpawv7SeOmJpg6rpkUjmnBS\ndfGHlPR27tDfhYTkKWUbs11gYF2y169gRCrmUB518ASEQfBIDaoC0BQ8TfG2\nWyeofFsbZC3jazwQeR9jvLoIKGJBtBuXdASoggDjK/KbMe4CrzaVHDel7n4F\nc76RFFpb8Mvy/JCqctV32qm4v9GXM8QdzjUAqu/ak6EvZVMXQKqT/b5WKrmD\nL60szQ1tZJn4JEiv/qlKNnx6MCDLoz3t7eSEV05Px6W+9/eA6O8BQ2Q7sx0e\njAuwJSBNFBXjAVgZ3o6pdcOJMO9+m82x21/WZkbGwhj/WtwTSUkrStxxi5Sd\nlGh6\r\n=uIpO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCECPCWp+WPmblKpkt9nvt1Z3Y7rv+jhInQkEXlCl8h8QIgNsk9PqESVX3k32gcFMU9HpJF1HUt7n3KurPd/a/bdVs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.33.0_1627901117598_0.7382070680005335"},"_hasShrinkwrap":false},"1.34.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0","@sberdevices/plasma-sb-utils":"0.13.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fe4fb0e064c44f21335e9331e55418fce73c81a2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-stItgukVmvQsjGaYojwJK1+Ob7OaeyWWujoWlnzW0dVHuOKy8vx40U+Pn5XuBGwvyayhlkvIfjhIYAW7k//s2g==","shasum":"b14e6f43250f09444d0300033af8ca542e7bc00d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0.tgz","fileCount":710,"unpackedSize":1252392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB9ZaCRA9TVsSAnZWagAA+yAQAKPWdUIgnJyQoV4kbNRI\nywyipIeNxf3+2ngw8bV8kpUvjs1y9ELWgG/Z/yK5p6TkYuQ3fTUa6Zje0v4L\nBcYJvXorGvV8//RchH+EsGsVce9cS/ZmVD5Fq2kx5VvkiBDOpEj0OGX5u9/J\ndPida3/I3vk3hs23snjiU6fB3Nmee51gK4XODYWCBv2z3KiP2DHNhYw4clxO\nBxtmBSW+INqhhJ33Q9fAOnUhPpkXxDB8btgjeKP5oT34cKpe/F4xjNV2P6r3\nbDV5S8FzPjF6Z6rJ0gQvdrlcQ81IlDRThRr8BVyPQUN3CtECDOXq88a/Sp/N\njza7YV5eO7UzvdAQ7TGBE+0WVYWkV4JSubTF1xneOAz42HGsMBPPy770qfAr\n3wPuB5n14J22jJt2wL57Z2uHv21W9M7xNh1Yy4v0vX+mOtqsSTytqwmeAN19\nPSZ0N/wrAsvBT+DbdrDeRVOnNuibkHJW9Jj6YxBOu5m5xbfCG5kHWP6/QTuL\nVgVj1cV1zavwgwaNdYpQ7S7K6pziMZo3WIXNF8Bftn7vUzg9nlm476nPu4nX\nSSna5wgYG0ORiyvkBUe2NE0/WGGyCzx3H5ktdAAeWW46t8HUNQ92P8JbRfYH\nS8FTw1ui5kTZnP7Ti3AMZHBywGN7/Ekjwp/T4+HQU2Ai270Q0UgPV/IC984J\nBEbz\r\n=ipHY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICuFgVNrJTf1p+bwZfWAZBdCk7msx7Nfvq72tOeeOawvAiEAy3tA4J2Df872zpip6SlRIaYJqfn3qFOun2OyoSn9G84="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0_1627903578374_0.8730794341687897"},"_hasShrinkwrap":false},"1.33.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0":{"name":"@sberdevices/plasma-ui","version":"1.33.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.20.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.28.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0","@sberdevices/plasma-sb-utils":"0.12.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a1ec4ad1b45bb9b81103964e2d7f898ee7442075","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.33.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-QwRdl2RV6wEDub3As2bHBgGnzPgF8ICCP42YAAKysyUT8X9VuJ0iIqW7AqdBOWXkA21v7keQJ/dFiNquzb6A/Q==","shasum":"573ce76b9cc163d65e937b20ea21240cde5869d4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.33.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0.tgz","fileCount":710,"unpackedSize":1252295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB9t3CRA9TVsSAnZWagAAkTsQAIVhveMZMK+EniHrI7Mp\nORojN0vkZ1h4r6sD860lyKrjOlYWYRhzgV5iKSQrA6HNmtr1ZXUJO8Jtyn71\n+B5IEce634jWpQ91HmgEIhxy6YrCmKfs2wWT8HReGk/L5JYfX20GkQ0T7SEz\niALh+17dIEyQDrYsqZ3bKaIjCwlB/qCkkvBhke7aUY/Uhkc4J2U2Ut1h+DFd\nd2Jex9fQes8UMqGlvD4TTXcL/HWu06RGefjs/8tvrREbam6x+s+pykMQTko2\naNbhRZpyeQR4uGUKOh/eYlTHGIPmoFyFk1ngT4V2MD+YBW36iPRTffUKc28F\nDQBg0WwXw8ktdXDhajn8FH+Z79lwIYe9xyn4olVIcoTmlz0HBXlDxyfkK1Yb\nh2lnrFf3qQnQ5tx3nP7CpAr4HrGoESetjXJ72ihz0Tz7q7KMhEvVQS2NEfnm\nzbV5TOj8DKHohtZCUHhla9XGkPBmEOj94WVURSSDvSkAZx1xiTRXFQnJD04P\ngOlmyYpz73QqJebfjdyyLVX5bSiETLvzO6zg+yty9/KD9A2xTVvNWremwYWh\n46tIlq6pWvilBkMcG2o4anEa8ifZN3ds6nocMnnkNweg8qeqqJm7DZHdU6o6\nkqfydZVUPgccnbGwq7duUlHFn/3Wj5ulE/Ydh0+Axfcjv5U7SMIzxUodf/0y\ns+3m\r\n=bCfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi+FAVCW8c0qwT2UQ1Jc3EK5ds1ifISFrnHkjCL5FoRAIhALWx3JiQm9N3Ezb+9WeuTiBt0FefkJ1Dr/4HsenwKoXQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.33.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0_1627904887172_0.15940635758355937"},"_hasShrinkwrap":false},"1.34.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0","@sberdevices/plasma-sb-utils":"0.13.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fb5936e55a2ff8644533f07e791e7ded28a3ba49","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-ILbTh0rKtIUNl8SJwkDRo5plu6jF2UrDqv8J/G3wLtxIYXfBHAsb2NoiEbN4Eoj3YlQ0WS7nK+KcxSJkO1x5cQ==","shasum":"083a6b31d8e65aece919c08c1d8965b9fc7264ee","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0.tgz","fileCount":710,"unpackedSize":1252918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB/DGCRA9TVsSAnZWagAATKwP/2ADoiPmN2qo0V2hMcfK\n1C7TadQctsJpM3uQxK+zSkqvoGZzkGIEb8URu0hR+O1cKCnHgKX6r4oLHyHr\n2CJtcG4SesW4Y0tiINucxH3ApjL8m5jhoEDY7axTV8UmBcHziOfW9RBYe0RR\n46qcSXOcuYqiR/xF5h1VT0oHJWptyE45dAej01Naeo4CD4KtxcobYebwZiHr\nqzMJyue+gl1KoN/Tc8MoS4/jlVZabYM4BqT1D5rhVMxlkf6aj7x74IEK2Vmk\nicUxSAPfzG8DNnBW7sUBVU3NMALl0J76MJb8EpV2MqGREubn4gyS8BFaYuuP\ntvI40Mv613BVsciPdB6JlW18azG2orM6mklFRaVPWhdyKCov+Jy1JE1JmHra\n0/+n06M3X2TAVNS0WYQeBcBrnULHbovDspqQbIF5qWuj1poBCuE0cq8ELUbZ\n/Cmd/qaQ7iHNhyddiMXVd2+SOZdEFclUV2bWCH0HGbaTGg32AMLMStoGTnBx\nMT1GMBD5kA3z5SDyF6ATK1GFIgbvtSM06lwKK8SgT/L9nsY4sJDXS8VNMqwU\n58pLZ42cZnGeub0yG1Piac52wUpQFdk1w2zT/yA8yGSf1kCHedYov16IM5iw\nvpVuyf1Ms7o6mtA1zLyPP1qTMBpgXFMGCYJrPwVFeQrgrKU7EYhA2tPNEjTT\nBi4p\r\n=czKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArvAIdL/Y/DA3bvfonZbEQgUMmdZKBRm+FtUgEMlXxgAiEAhRav0BOb2YE/vtnAVjMM1B75248ueGEyDi9wGQ90HNk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0_1627910342262_0.026460880821788546"},"_hasShrinkwrap":false},"1.34.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0","@sberdevices/plasma-sb-utils":"0.13.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8bbbc3a37980c6250034e8b41579f09c00be2743","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0","_nodeVersion":"12.22.3","_npmVersion":"lerna/3.22.1/node@v12.22.3+x64 (linux)","dist":{"integrity":"sha512-rdSu83Ax4lu4yTqpGvOu/f0NoB2eBer5Qn8o+3e8hkN18yurNgYRMaJ6emWHSofK48G7hnCzNKNNMd9gB6TD9A==","shasum":"af472a12c87a5c0c685cffefb7420d40586d56cf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0.tgz","fileCount":716,"unpackedSize":1288094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCOXqCRA9TVsSAnZWagAAcRgP/0iDV/2fTQOhsra/tn1j\nqhzzWf3Z/pnzLBbCxpKP9AZ3jjLjL91fLbe9o01JoRJjGG3FoOngMC+/kPzU\nk9Sg450U8TRi1404Kahgw/y7Zitsa+ezkEqJrvfVcwhYwB1U/jInABKg9QuW\nWUA6FcjCFe/hYO1R/wdlCZmTqIOpJnjhHiYKD3jOBpjNUzMCDQ1yOCWlueWF\n0C6+E6zAC/VBioO144RJ6DrLMK9LpGUgQwLCf7H33/oe1NqUmmpTAXXzJP8W\n7ix15nXvP3VP776D6DaVE3AgG6Kz8Mf9cLmLRz9k9Rj1QVPr+ABhliCgni3V\nrXg/MUAKbEkcV+xmLKdaJyclk9VENVEghxxWdrCgBV+hOC03UXbPjbEaPa2q\nYBzLBpnIAy8qedvTZdjWqq84V2S4FLgsElGjQBnqMq+BM2oYVAzs1M7T3x2/\nHieOrN436DZ+FCkhCuQwQLrGHY925pVpIpPSpppUGoqdc5uGVG4x4P9us7G2\nikWGfdvkNZmSHF2ST++o/8BuF5Xb8BU5fTVBvuBaQ/2m4P9wP3v0x0DiOQWS\n7U2wJD4tzbkj1DROv/x4cktTP1ZAdPb57v9HDKBvmVvmIfhcX8Coc+82yeCQ\nxXl9QMC2VCRSFKmWqknKAlZln7g07EIuiuzJpLo4ADPAenNGzphYHjnCQJe2\nhY/Q\r\n=pBma\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENUNu/tUsc6aPHt10eUeBdJU77g2WvKfxpL8M7RZYBJAiEAhzJ4ch5YkEc6GKpe93yfcGJDmggPGIlbcZnDYqqOtW8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0_1627973098276_0.715764513567922"},"_hasShrinkwrap":false},"1.34.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0","@sberdevices/plasma-sb-utils":"0.13.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-gwkKfBb247BUfkoNI/tV890PQ0xE9NGI7iHOAnBVZE0bpJxUNAeTleM8C4V99oruJEdR5joeQ2I+TChgW3zV4w==","shasum":"3787c53c492bf1d992589df90e1bfa93ee782428","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0.tgz","fileCount":716,"unpackedSize":1283786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCX/vCRA9TVsSAnZWagAAr64P/RLN3cl7VkYnCXNxNj1r\n0aGtEaHWTxe7oYRpJPVdSOF0QOybQFdnsmqp4l4E/SjXwHNNEMNhoYFPkNWA\nTCjJO4KVH2uzeJRjKlkt4GHzH5X8VpymG5bt+PYgX/BxWmxssqiVzZfhJPHs\ngApyoQIiv8GGqx3ilDvutlWBkVc6fqNfNwX9OUsjPc2QlF4DAT5MbK3oKXj+\nicu85SVShu+q+I/zG4eNYIrXIb+8rzntu2bydZ0TnpUEixA1L8AVnYsQMsy5\nu82YnYpQ4xol40pF4/95vQv8NM4D5r9Vm5pQY/Zb9zCy8Zys4qNvd9a7yB13\nNoEwCq75N1X3znWrXSzL/v2te9oxEVJMBkAhFhqjoNI8wqYHHC5Y/iEWi/u6\n0F+4hnls/pSchIYVObxYa6+ElWR4zY4cl72ftMed8xTszDqd+DU3JZ6sEjR0\nPCjxsOnZPhKj6TVvJkkDOxcoQgmVSqcoxculFSN50Qq3V/i04bLgGlAMI6B8\nXeTfyUas3eJtJh1y6rNlrcQ4zatnadYCYUQHN8H6XCxMBhRDbghdHQF/EyAg\n3H0bsNTpquQ3TM6XEymVc5fu1AIBKEn876TDw+r06K5B8nuBS0dypzvVNEsj\noeOLtsKeAxXJGl+VRJV9F4IkDcszAj+4ySkJV/d1AM7FSay921jJXo3qH7qT\npWac\r\n=z6Yi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3UcRXVDIDJ+ENKjFUirW+wjMA3/2mYyyZC0s/GDe7qAiAUAkkHS1OJfEWFhLlIuzpU1etPbG134X8w9bEngxGQdQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0_1628012527762_0.2956316812464015"},"_hasShrinkwrap":false},"1.34.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0","@sberdevices/plasma-sb-utils":"0.13.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d3edc528584090e578d8da6860abbaa3e8d61ea5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-rc7E2LhBGZVWxhPImDJJ3UjWeYD9KDjN8PQL2q9uPs7TDWcUYVq8NkeX+ZD9fya0XPWcS2Odo88nZI5icT/yWg==","shasum":"d43de34ef62b455a1c540f9682a167252dd9df02","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0.tgz","fileCount":710,"unpackedSize":1252392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCkPvCRA9TVsSAnZWagAASc8P/RALY3mnbgDX1J3XCokh\nAUlCyrWI9Vc+NJiBduQ71F4yEiiQ3tXHWn8QuEG/4SGoaXikEtCHf3k7nd9e\nMyynPY9hMV45WVh6hEejyPHCr+gpsH9TvepeDvF8Z42HsFgR0NhHo1FTlcRz\nFWQdcsGD3L4lcju0sAvnrHZrA8utm+6Iyj7QAnCOTlVq/uBgkOmv5Z43zMi0\n5MD3u0CP/l0Jda2LSy8eVsdfnLj5hHRSqB/SG4MA0F0BK6f720TekefoM07U\nx7QlbUdf41CvJPDZVRtLKHyakoKRxcS9k5GYo67lRlLgEG0ekz4uROTfv8NV\naP9bg2WuxV4smicBlS7WjSKhzdt7Jwj/vHcHY9Eb5TIENYYPSlmy1/dZ9b+A\n3t9O8NVN8Jjazgz1KiUxRRcsbOjlN6OS5CBRvQbrryv1cGMIc/UkE8woSqGV\nTyAnJHxb8vP9vsKYZ/blZCkqaOx76kIzlNZvgOwfgnlbGAreGXHTsqG42JBP\ntYGTsjRuvdStB+eHDFiz5zcc2lkSX/U9duah2jO3Ywpfd2jNrbQm/3VvHBN1\nr38f5UUxrh8mK1NGUMmirAWNy0BrqIZimlZ/0E5kSVeZCmAbWh191Cle6+/w\nZCQAaERMyGno3qZE6XBnYtZiwnz7TvsnSvnKG8rnlmkZ3cLG/Xu5Q3RWVZi5\nVAlC\r\n=lFxy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDE0cv9DDsdBURwh1b90NrnQ6R3uPQUnNXwmjL1UDKneQIhANnhlbh+L9ehY0nMBULj5hq5zGzseWF8Rw94DqL7UDVY"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0_1628062702814_0.9883216179862881"},"_hasShrinkwrap":false},"1.34.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0","@sberdevices/plasma-sb-utils":"0.13.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"75cc3718791e61bc038262d8ba6334c662d91c19","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-6LYg2ee7LkAnhjo9GKB8gsiAq7ZCnmMIWecZNq5H/yDRx0PzAEIovBhOQuYK71yoLgIF6+EWQvDn1Lb7kcrx+A==","shasum":"d876e6eb4e1f3f86426aabfbb3bec3e70f7d7984","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0.tgz","fileCount":710,"unpackedSize":1252392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCl0WCRA9TVsSAnZWagAAK8wQAIUgFE+TYs0RowiBnzx0\nP2VyP+S6fTBKP6DtiKTpnFHo5BGJ1BzQPIRjQIjIcCM9mtQG6V5ZIFFd+O3g\nmH6AW3J3iX3O/oVXg/fm6m9KvYIPEK4gUDwyO0wNDIKSR/qIMT8dqRIWAJ5Z\naq9XJsKWO6vvZM6TMaF1gVIOaLiNHSQN3bTZaiXyxQQX54wpsnDJ+siDun2x\n6/w/qQSE8r22QilfYuy8I7mSIH5w1SclRyinrlAd7Apo6Qrbxjr4RJ+d1xmd\n6TZCiKf09+ZWhSR7y6ioDnNFo8sgrTGg5LXinGBcSxFX9pk4IpMi4xZqFEVO\nebE1O4ucCQrcYqrDZsCvTMJn/Cw3G3E9UDPtElhvoD6lDeZJP0aBtL465unA\n6ahBWWjWSdB57BbvAjjmuZn1ksIhzHadVXcAUbTVE5HDnHkI0/tK9AMg+JNg\nB0d2w+D4RFwJnhOZOVX8JuoLiScjlVdCoCJmFiAVt5BkTBuXUcclazGA3aRv\nFaW7S4Ls8ZPYQgJ4IbIUP7Ir/syOBxWND1tVucRVYIAwwL7bM/kcnAdb8F0d\nv8OsLnEIsZTGWlIherXjUQTTJ24b9UIWtesZgYvFvy23uSWKiutm6h0aQABH\nVBmLq5I0txko8XWlTgcipUB57K8b1lurnuNlyCLOzUekfyvrzlD3yn9z3mXd\neVz9\r\n=s/Ca\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTWKvUHlpZD9VgbN4dq1SmLnxBlXDwJuNIkPMG4hGYvQIgAwnn7ccxN5JHn6I8kSeDHVbCpcx+ybqeLRPl5lH3uLQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0_1628069142411_0.7732625346841329"},"_hasShrinkwrap":false},"1.34.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0","@sberdevices/plasma-sb-utils":"0.13.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a8fbda7518fe49b5d3787840d34ecc702d3e3760","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-L7pzFzCx7xyV3W/L1mF9x5wXrD6wqqWJoq2zXbyc2wNyiHU04KwQwXiDrv5SIx1U6PofO4TjrIC9GPUZ0iK0Xg==","shasum":"eea46704c153edf6ce9ba65bb337fcb03b648249","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0.tgz","fileCount":710,"unpackedSize":1252392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCmDqCRA9TVsSAnZWagAANkcQAIib+qryBVkBndWvcVFN\ncWp+3Z/gtoDR2AX2b2CFP0SGqdRNKL/huC1UwGNVqVsshvcpVVdfokRHvXWb\nBEMa/OHvP6B5hSWKYq7XM4zm3+gPXEa1VqKauh/Kn6KnF8qS6Mr4rJAq/qNj\nUE9k6EyWXgPSolCjGuyWZhHOrg7bSYo/K/ewSZ+FZsR5VFfx3mrTO8rRXmTq\n3fJQmnSqvM7TmiKffbgOk88Jp7NO59uDCQn5A+J25iGH818cO3dbAO60mgqk\nHX6voq6OgEbzpzmaq9asDX/NX2nf5ic/53Ocgn/nrYI/kn48g2UI4RcyN3Ah\noIazE8X5essLcutUKe72JHykGrCxCXB2syBhUVxs2RYOCbUdLdDf8TSXn+/l\n5GGitvm6yMzuZrUAK5LdgAZfhKajcQJJ24RlrpBkO7whc1pFZVDxJenXjGWg\nG+JRO0fEaTRsa6Egh/2ROcbmRgydr6MAKdRVP/Oz6SufKepEdm/TKgZaEjIa\n4F5KkferKOI/tU9onQbaIS4ajzBKv9NnQrY4YQkaH0zoP9CUcPcxQ4wzsJP0\nN4p5yvRaF+0tmdAYAJSzsdbPM1r0DQKMpRP2ZsRf4OiOE0StBhM06L5aLqhj\nZV7IXIcmLPcm084mgd/7qBQPvB/7EI/wda2OzlRxc7YNbOKcja6gYg1IhNab\nK67g\r\n=YesJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXwlVuXEXaborJPZNZccbB9dlwP1n+rB58LoCMAtrlTQIgCrKUTLJLijeFrlsgAvD4U4MqwTnF145Qt5CUk8f+VUI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0_1628070122452_0.5726908309109737"},"_hasShrinkwrap":false},"1.34.0":{"name":"@sberdevices/plasma-ui","version":"1.34.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.0","@sberdevices/plasma-sb-utils":"0.13.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a98f44f6504fc3fe69bbaf92997acd496605767c","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-XqqRztQV7wxahgJC2+IRZx/isOVFhcXlAVb8b9+ejqSFqa37WZSt3QV3zTSlZqcaVaDrXWG3FyQjDx4uHMnK2A==","shasum":"09d0474691031d1b77a0cfc986f54f8aedf782d1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.0.tgz","fileCount":710,"unpackedSize":1252618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCmtZCRA9TVsSAnZWagAA6gkP+wY04o4pcGP3j3EpJQx5\nR3SWrFK91sK+59r4lU/TaN5B2C/5NUSa+I+wcGb4d8Hc+Z4yiQXRMnzcRrDH\nahkG3qLSejoJX+ILkyl5D+pxqhJlCJ8UYWTRXZlzxQGqwz29BwTHo6VvFGcN\nZICvOAGhzBXNtyPYxh4pPeIJ1aK1oz+glTgMWD3aCQ/usHxbLEly+IDS98Nh\nq9p1pfwwe6ccEu9q4XSXsGK0aQWKB3by+TsBB29rx+RAT/szjFZ2kSeRZqhe\nu8jCZR2fEl/0BF2g22eNQak2ZljhC4q0KWzzz9mVKOX4JDrbybaoZKdDByKH\nt3MXWkxPnuYuxbK6JK1C/0x7y6ZR++A8c/zVOE5NViD32Q6ma2oYujrc375Q\ndUNHMlmeiCGo+VCpaN0gbL2OfO+8Z0tiuKUbJCR4IBhJwq7s5q0Px6df5YmM\nK3fZBRSK8VK7R6Ewk80Tl463bemc4G0y2cbDNfSkoxuMVopGGP8Hv1nCP932\nfg2j73yoMA4AIvjvIOSVDgsOQugVJTInLz6MVkNxLLL+m6YrPa60MuhK50LC\nUUYnm9sia79d9nJeEQhDcMLU8NEWfUTExhxH2sAkhdlx8obbCQrZVMWKEftc\nd6K+3aOKlsoOvwE9nqeFOY4ZcfOWDhF9wb/qcdGu/9qoGFl/hPSyei9+AWww\nuDZd\r\n=SWhE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkjSyK6OXPNUbQI1/azqxmNEiaKnbqC4EPJG3+gxYztAiEAvInsNw1kEEPnaBmpjXmj3JyE4bdOJjjBX+/7zI2a9E8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.0_1628072793439_0.37801515140324016"},"_hasShrinkwrap":false},"1.35.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0","@sberdevices/plasma-tokens":"1.10.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3e245057673a7388b29157bbfdde34c4fd16f614","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-cRoF7nl/tA2kkJ2axHEQJUHOQG+p3wr8a0U8yeGiB42velqrvA1e2Hq2UQT6cKdxOzhFcpCdAgP3gbWIgLIUHA==","shasum":"fd0a0cbd749a127dfc0d19b467730bc002637fb3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0.tgz","fileCount":710,"unpackedSize":1252835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCoaqCRA9TVsSAnZWagAAkYkP/0Wy3tC1ODxWa7eqOnIU\nzlXwz0kqDlvMmQzxvoiQpOLShWDtnzsZ6nKdXvgnu1LZt0MCv+YbndmPm+Nk\n7KtMwF69CJc57KCGl0TyOPJUyshSCEGhiZe8SGbiM5Nsvnx8SX2BWQ0Xhcy9\nfqhQliXzzDAVoxt6BklSsz4eC5F9SoxgXkzETZPq6hFVXqb79+zFVQrUWsEl\nkBXYpb5Ama1ofVK+sfFKBAiA7hQiKKYE5tFUoDhCuySN8LpVuKDGXA2JN+HO\nV8sPuGiyMHsS9mqPscBEOVguC/XhI8/IHlg8tJJrvkAu82Pw+lAbofycyhrZ\nO7nS0RPeJmyAvlShAuz79k8dgiSvqvFm6JUef9geKzWtoGtgVut0fke8fFEA\narFQsmOtJO1CEL4pQ89+HHjq2BCnYi8K1qUViINGir29N746tSSBuLfPdT+I\nBtlVSLqHiWfHzfm2FKqiRf0czHf+wbZOb1qSSRHNzcWKeYOoauyPknQI0YVA\nSN/lW+gW8YTWPQIJygXcVg6GTdqpJxCJ2AWK45IiuXX7yrSzjgvzth0l+LQF\nomrY5zc+1SMrSTeR3r4tjDvL/tjdhNcCFjlQhfWyZG7plma5Cwt21qtIEHAP\njXd5vNgjFRT1G5HN+aPBBArnfKrohiiCZaZ16DeerU0K4jy+OSoEoj5HonKY\nwhwO\r\n=CMNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtHFGejwI9cdcHUvUs5FKHJhx8e6gNMvm0qDk2IweFTAiEA+5//oSGdjp6cfKy6uwzftDKS/MWHrcQ5SiQ46h5agpE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0_1628079786416_0.35040984185872426"},"_hasShrinkwrap":false},"1.35.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9b9f21030ee2b4f0f01d550eff34758d7f9e7039","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-g3I71xkG6vE+u9hRDYDUyG9udsEplwm5QlPzX0pqJfcpSPfnKzyXblNyEnvvS2WKQB1P7isMqlxS/FFP2RML/g==","shasum":"80e4a4f08f1a861d4980328c4f6704b4cdd9d2d5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0.tgz","fileCount":734,"unpackedSize":1297403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCuB4CRA9TVsSAnZWagAAfOsP/3V6Dq0qhr2XuCudSq0C\nBJatTWcBwCLIXEjWkn2kMXXLj1NTvEu0G+kOZ5pNMCu/qaXdYSPfEJpexB1r\n6UIOqoZJmg8GzMFcH4tbsWjVZTnakklLjGoRHC08ZgqtKF34fOkav1HpyZ3G\nSa6jzS4L5lC/sQUzPhnFnGgPZnM4oWdAF3mVD2qc2uRV+ju56qHzfgMx98dr\nzeIFuA+cIis5ES1ly+W+BT8piwQ/ux5HXH1F7rK6vwH/PSnO1NZBDC0bIz6A\ncN+3bHbOApMsYf3izom2hQr+QHbDarY8vUHUQqEt5XI2vBdP67nwTQP0XjuN\nT2ESsKnlHRycYXo88RKSw2hRyXDfuPFCmJnbtq2sPawVYVLgkcv9JGpM6S3Y\nmlFFlJffaF2Oe5ru+gLefhx8rlSaV49STlKAYZgZH1MLTa/NfIKniOBdvWPD\nD7IP6UajOCk8onkUx4yiDIuESPxQX5N4Tia54ioMmvQA7phuBINKKYOLdd5b\npBJGH/I0BPKDed5g5XMfaSvFxqdCg+4a2gcvFB5/k0Ew4ZLQwvKKWmprK34e\nMjToub0g5x2/JzHuSXlPYW/sUG2IZFgyNLYf0jsD/UMUL9ksCjEd4ebIhsTF\nki+6MoG92bcH5WlfIk3M/EVDB/YLE4DWq90mrfCD7Fvqb3X1i7UXcbYfPMWO\ny46k\r\n=eTn9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIvaf3lnWhEUjKozLDjO9kd41iorbZaAVDOe37KvEV3QIhANqrDhGCbre0xXeEajOSA5sLhYYZvY7xACAwf71WUml/"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0_1628102775907_0.7367907450576894"},"_hasShrinkwrap":false},"1.35.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-controls":"6.3.6","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f0a4000a5a67086ce4616158a861a84b21308777","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-ig37VbcO1sXH/EOtFQBttSmAfzQH1QPOR+foQJxxXDMTjgtc8cq34vbjATNe427ls3zKTHmRdXYrQNQT8zhXyQ==","shasum":"d2f8d47510823321656c2232e45a05d84348f078","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0.tgz","fileCount":752,"unpackedSize":1366530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCu8QCRA9TVsSAnZWagAA0ckP/263GuImZsZTgUXaHBZn\nDWPqD7tH14TTfKH5lgM56fXzJ2bQof0oZqfdiHtnHhSIqaIMMydrJO4Q1dK2\nqwTz+wAGrmaBX72moVCbAyX927OhTpEOD/Icm4+GN+t7/lIXv/QFtxPhAptg\nIamLlsn9c8sSoXMFgMyrmbkwRyYNA8W1LO3i4fGpWvumDBAsS3P9roqXR1p4\nXW2I6EAAHx3mCjPMPkd7G2fr5bDKC2m7L3mry2rZxzRRIjCfIkeg4FEMRC8T\n0u7z3mDVgbKBEgX88kKugcHygrNcCy24EyPMLNOarFVU8kRTlZSYjGsDkEfx\nK0YKVdq+2FfXhetNFuOVqxMz1NFXCEmzR0R5attbhy6hRCifgc5vhF8AiTOw\nb/uU5ETq3012DhYljv7UlkmhKdZI+GOlTYRE6/xQC3UUq6zUmNWtlHUnwSfh\nxpfic97eyUoopUJRP1YWVDts0LaGYw2ebaXDNhS/hbWXCA6JEEgvHCzIU0dw\n/+cpuvOgExUvC6h67pwOIlgM/Ey6eok30lXr4JCVLWl4K3VzCsbTIVhdYEf5\n8C0W0P23t5oTnk/VaMF8b6e5eYS9Yu0bZrO4RhuLbt5WLBTgJHx8M9WlvwYY\nGGgdz5xPGPB3dSdcMGyK941c6emJr3QxFqh9Yv1DUCa7AcV5AS9/REMOxfLF\nk8We\r\n=4H9U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAlOHNaXRDU29dNzyfKkzBjbzdPBY6ydNdryW/A/4m6GAiEA7EmHtm2jegpP+sTZWH/Oal+EzPGtf1orWpe1ubIQ+M0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0_1628106512461_0.8981193156420149"},"_hasShrinkwrap":false},"1.34.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0":{"name":"@sberdevices/plasma-ui","version":"1.34.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0","@sberdevices/plasma-sb-utils":"0.13.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"aa9916d8626bc2f47670bedca10bdb4d22abb998","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-hJJqpvPB8FE5c2jYxT421H/s2aw+DLgrr04zmn0gVc2DmHYcxlpLhbQikIPXmczO/rOd3KRUWlFiC3qWBf+vFw==","shasum":"fff1b6543df9c44f2723b6eb22036fda93e59c61","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0.tgz","fileCount":710,"unpackedSize":1253453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC4asCRA9TVsSAnZWagAA0nQP/jQRd9rHad67dBONsq+D\nBuDbZ8xkU79wtBlOnMQv2fp6Qx8b0C34qaOOQ1xvBngMkzz3ZNjTguv7SHqG\n5guKzWsJqJdNWGEeLVPjkXPP46plQ69J/Yvg7CIacZOAJyy67Faem6CAfxjz\nJM2H78Cjsbpx2vsRyktzMSdp27dmcXiUADl+aPGq+0GYI1wawBfrTJvJ+nsV\nuTkVXRbEF7lUpUGQTHm1ZVEHcHuHYZYEoZ91CifG78x5ubaWgvoZvJFMBqEh\njNyJuKDm4+DMV4hK/OwV1ILQ6nNEVtJR9GUkIuXUhKBiCyrXv7ehrnlzuO0D\nEISGmQ5aYoUNeDjr05/yW4sVv27CycqpGmG6a2mgcQ0/eX0TJO9NIVBqPVsv\n2INBXY5SHimwp9fNHVrQHi64ExWHmhwXfiisOxCQQ4JdDFv5xL5wU31dp+Gk\nHG/tkRue+apSqmWEu2VZHjfyFzoJrguTsr7e+mD1oNZ5Gfu/Ri9spXiwMaQM\nGQwV6gjbNiva+cmvRKmIGDyJy2sgvyPxsrzDw5dz+Hzc3HHnAmEtNN7Xo16k\ncg2cFHzcXpn83luDwMQdWn9CDxTuf653ku1WoLohSCqMwGsT1kYX+TdB9OoH\nI3cuoaoKu4hME/uUk8o91gMvbB4lnJW8MQucqQ+VA/V5pKTHaLDg4TEkTiaO\nacTT\r\n=q+Up\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIoKshW23WhOmocqRYrQsM3fSAD4Egu53kxgWQCvbLigIhAN+m6u5aQN4PwC2BKsG4QNV3J/Dna578+encXIyUAk7z"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0_1628145324248_0.906008263781876"},"_hasShrinkwrap":false},"1.34.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0":{"name":"@sberdevices/plasma-ui","version":"1.34.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0","@sberdevices/plasma-sb-utils":"0.13.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8d4786dac55d2030e8a70facf87b47761a6caf2d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-vsNlN1uzqptAOXKUij+VXgqvsGmUgRyYs6kUx/A43pyO0tt2ejPWc9TmsvMVElz+uHQgg6e8Wb2P9ajwmdJ/aA==","shasum":"2127be3e3992ea05782f8f183574b423c58cc657","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0.tgz","fileCount":710,"unpackedSize":1253031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC6cLCRA9TVsSAnZWagAAkcYP/3sP+L3vLuju8hTCDXr9\ntSiMpGKvEXi2yFCzTjp3bjWvH75QQlpZiW3f7cz07eIWHxsoIry71K2ycu7e\nV2XRGxMfT9gV9lJJutL89Wiuk7J45qmWnqZbt/ubmhpBw4ohMNwd9hnV43FG\nK7uslcsIwgh8bcNkCQ/Bg7Dznuo1g2zpJanMGzKITHJZSwNwv65hpFK/gAt0\nULsLZY3vFoEM71RFpw48Y52ZpKlcn5KZ1OY1KuXWL2XNpPn+C8uRJcOSmzUN\nz0Gaz6BjE3d3eubp7L1HCFUgELqOc/L6UhL4ujconRAoGKZy+8o6uxfcHJgE\nTDCZxzibnZNVZplUZy18I5fXFfdf3LXkhFs95min5k27/BT932/vc4vEf28g\nr/1w9a5WVp7Apw4f6T3jOMGhDC8D6/uxmCbOKHhqDtVM/P+xEeX+hojvcr/2\niMXH+2nsG3NaKvRS0MiLASyZrDIWDDp4veuCfqKf/9U2lQlXe2K+U/LpdaBW\n6Spv77A3lDxIDm+fPrQaz5/B72yyHS8QCllLhazrQZSR1LOhAiXUnCGvR3HA\nNGBiEZqTDmqsJYrF6QS4SVDsea7zVfcx1+S4Ll6L4xR19Iz8YKULDD8VgZP/\nlR2XbMLN+tMJ1YX5NyA3lrkwzrABkmskktQASeItJJ+HdiDw/ip9zrQXYUcZ\n/2qd\r\n=87h7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdCqH8H+3B2WDawfghhkfEW0mVYY1acBF3W+74nRoNRAiBzWDflBjKC4gp/cVHpdRFTnvi0tHD1L4XJC1O2P3ONSA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0_1628153611331_0.7995547080012329"},"_hasShrinkwrap":false},"1.35.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0","@sberdevices/plasma-tokens":"1.10.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e526f771f3316cb50dd73fecffa2fb97edee58b6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-5LnTLab8UKsuaeLUEwIuWro9YKaxlLMuMtsk+2lKx+nhJU7hEcMYot//sObJzVoMe41d0hWHerUEcOSPDC9taQ==","shasum":"6e2c0ceec747d62a17f62bac8c64372166de24fb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0.tgz","fileCount":710,"unpackedSize":1252835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC6oCCRA9TVsSAnZWagAAZqAQAI0zUO170ZbHBvsdcJYe\nDZbge/CqfXj1/pzVp24kjXWt5afq9OVHUVYfPzLE65TBIpRdETG74I8jfwsT\nT9DaT1K8c0EeGMroYU46OXmC1zbq2zUDqrfIZsrbz2Giw3ZG8r2J5ulEwIjo\nRgt+WOQ80crb+pd4z/uzlimONfBzcdhh41j1HOV1zznh+zw9K9EchXTK39AB\nlDHqRQ113sAu6mw3+AHi22wlMKtAWoDxJrXJf3C/HL7skuxNBR69wRwHtsoX\np3YKAxRZ+OyybXexnmlfo3dB4lC5ic8pWG6U7PrX1HnXhLtjcR0+h3zoXHcM\nm7e7OxKrPT63Otr7Rq9kNBMFAG9TBdVbmlC7ZM5X7EeMtSgfiszRU1RddDh5\nWrgKLxm34Rb6f+gyTPnPzmG0sKhQ7v1A/ljzXLir7W+X5REdP69rCsYsPVwJ\nJBGyZrdyHSERb0pG1t1ilFh7v5bOPfL05SvHse7BEYy9DC1FJf97VpWDHNA9\nTzECWY07KdVfyofAfuXpYOheD30I1L0/NeSVMHGUFfq25D8gqyz7mbj0hm3t\nW8bphICixawfnjyN8UfK2AkrkV+2bv92vzg9Jp+3oyGwqB70UE0gKRfOdaXw\nsxQOL/8uJmiLX+q4ahP2W9K+u4u1CzqZbqfVxHMjCJde2hBb1buVkKL0GL9r\nPyqd\r\n=mUT7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvAUdack1RLmoMp1EdKXhZS95eMadi9JgId+IFV2OlXQIge3gPv5Bt7e0hhMk7mRmV82hvViwgbIpvYpGuiY3kDYI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0_1628154369802_0.0009709087706226693"},"_hasShrinkwrap":false},"1.35.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-controls":"6.3.6","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4010de69ab31c18a513bfabf47aedf65e5a5481d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-nJDpGsSxzRKM9bh6eGmlHZEYuLAqrzpf5R7Y72ZyUosMyX9+mSqaIRHqYp3HbFRDtngo2GYOznVQ/mkAADdxVQ==","shasum":"14ee153acfc51a3ad51d6b66a19990eab45ced0c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0.tgz","fileCount":746,"unpackedSize":1367635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC7VvCRA9TVsSAnZWagAAusgP/AxeHi6del3cGRo9TNw+\n43tGWTfnQl7QOVUyPPQRvhnu8MkQUtjdP7JGKhUwoc6qdohyWw2ynxCbRxcL\nuU709vGZUYHaHGItJdavuvi1+xoj4phPcQrXduN9yeidlNNswT0JnoYnLVzc\nKS0z3uEA++OECR3BLF5fNbpOknsYeJfSWOAR81a5Tv3LJZ46sYaQ5chNmPWw\neVXrmeaFYa1KcX2vmH3rPEHocGhGHphwQZ1CFnvS2EtXP9JOVLHs/yyK1Lsd\n1UrgnJv0xfeeiSH0d25ttaNbWe8/AUkRrHFfrviKyR9jMyFa8GpElfJ2K7ik\nv6UAuns21m+CHRHc7prhR50Y+TjurrI5PLP41Q11qmZyEKyO/7ljPoxAsJCD\nlq8vsWY8GdMcTbiruDk8088DvH7Qici86WnGqs/Cgvx12wKfNWpMYN6ucoro\nN4cyE2roz17oOjKbnnj1Q3/Lq9w9NyJBKeVYuxTPQHcI8oL+77mWh6xBERu/\n+CWRIjIjFa1eS9JK43BbUSuBqNkI8AOiIfw32X5WfEJKt/6XPYzNfZo44BJv\nkRpPhycMGMwU5JvffZ96lckNdZoU9dY0pVALmtW/ebB6g6aCoatm9rAskwxn\n9CB3P7lYCe2SD7OcSLvoPJ7VOfH67po2zqCOvshsB4JDmT9+TMlGsL2uDT/x\naIcH\r\n=lfbD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkmO/Hv5LvgA6GXCuqAKuFAtQ5OG++0gfF5y9pOI3eSwIgItoRwfMzohdiogGXj7HzxqakLgHZ+q+xHsLNLr+Nu5Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0_1628157294798_0.7823112662612604"},"_hasShrinkwrap":false},"1.35.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0","@sberdevices/plasma-tokens":"1.10.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"008f304ceb9d660f0e3f296f08ba83d76369a6fc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-4ypBXwjZrJrI7nTx0nk7NHL6S8lJ55bhijoLRjzkFV8jZ2elxLg+1MTiZGkdkMHt1QvwAIxkM3TtWwp5mfqYAQ==","shasum":"9d7a932c00ac3a71683dad140a208a82ab8fe2b5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0.tgz","fileCount":710,"unpackedSize":1252835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC8KICRA9TVsSAnZWagAAT1oQAKLcRdcoF6/BKij9oK5D\npVFVg6jhefp+vv3ALDM3AfpRnoCqP3WkWTvVGXrd87S2aLpCf/IfVntUm+RN\nI44xA9c7oRX+HMxUXaOgmQ0f1DghQUKXJ3HqHS3ZcPyd6A3qXQjERR4aSnYw\n9gDFflRhttrwlKkqZKGnfg4SIForE44+34pB0hi1gxhal/UrwJwc5Wcb0tIZ\nXXodOXwJCOKO+YY97Jh3GxRPSJQDn6b4NuSrjSMmcvPAXeSfUJmvjvO5+7xv\n7Glza6Afaly3qpSEPaiBTOwnIW2fhHwgaW+TMIg4ZKng9/Ct3KOetUug5L9A\nKQCgMpvV73U5Ks2tdWb05x1IIBGH47gKWPyZnPzDunhowO0+dprF2893qt6F\nORE8XotAaD05qi5ccXcYfo12si0b8l+MwWpUKcpjkSyByk7EjN3vKH0Hk0GO\nwru3DkVWBtaL8faEgXNlgcQB8mgOXucRHMaCfUJQaHgU03Y4vAwxBIEzU2KF\nj8hMUdErZLxVOtXdZH75hwIzShS2nu7byYhGhgZcI9xOxdfrpo9lz4RRhE3V\nltzGFH/htGu4ex2cIgSRUvlUlHlce0NLqI4t2Q37OKdzBR4M5v4IhujlyLzd\nb2enW+mMZtwr3RI+ziVg+X0TZWN0HZn8mfDsIzpE0MJ/6otVynWAcxg10pVY\nPYhR\r\n=VjiV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2u3iCDCf3Ml6uChpf9Aju2bwFCFDsc06452H0EsgKZwIgbj9WqCvFnyBk33slhsIZ4kqs8lbqSp+K3gJVxqev3yo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0_1628160648340_0.12030386577700303"},"_hasShrinkwrap":false},"1.35.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f89261984fe005731ea2fa22fb44aacec4ccfdee","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-qgZBazHYawMNCmWa0B6OoSRf6B68RfXIUxPddaBExwZmpoqduKbVoRFq1D1ROOocuJde/gkTDX1kRzHVeKJlNQ==","shasum":"19518686d9e388134038eb59c023db7e1ec55b88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0.tgz","fileCount":746,"unpackedSize":1367589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC9Z2CRA9TVsSAnZWagAAJm0P/0g+RRkkLCR8tzZ0jtjv\ndSxTRAkHRRb55bsUwu/LCdpSmaqI4zL9Zt6xXa9aI57xIA8LNskNjYmbAA9y\nNC1LbdRFyzuLZjLNE9fNpIYTAzuLi9+gH2w4iUCH1p4QZAzqfseJ798WOblo\nnQ7WnT3R8VhJlr1ehZ7sgLyqPqN8OUqanfbpLM3DBt+NvbXn6UZ0CAuVqfg3\nbFxXQDEk2d/+MKIWCj5q7a6eAk0hcADIDSVJS1aftRY3fouZOJW9GPFCczWj\niQv0XiuC9/dqwtISWJuD0SNtf81gQ0rab8IanczNb5OjJLWBDujQDFEANaS+\nB4WlmwtlASJDK1wjwyqP7HWhWvzCM1r65rK5nM5vgWtmuIz8fM7PUz7qlWO0\ne1ODisJUggo2FOZlpm2xy6ba8rtI7wPeYSVVpXJhOYY/Nlzu3KHbv8XBIhOG\nEpGtObcMoAmAMrN9v6F6617zonKT/zYJfBsO5o0UuLOGP0dYMlRzXAciIuEc\nKPsQohzO5H3hNkrW0lTrF/Mt5EDqMIvidN0uAxtJjm+w6mQ837qmhyTvoXD0\nPhB4pdRr8aA9RjPekAP5eBgcqAJ8TDFnzKv6nnIV8MC8GrCAEucXloK6ovuh\nl0bA3XJJz+hfHy3fklnFYwr8cvPJLZIfwZ5X6ts3rKCjtYN+ZN7UsbmJzIY4\n1C1I\r\n=TSRY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi07ssnTRimD/lAeBa1sQaJIavlt7QZaLHQGQAOcBKRQIgc/b0ympw5R4jXLkkc3AIW/bmV91k375D8I4UwY0EB48="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0_1628165750135_0.5664265157769417"},"_hasShrinkwrap":false},"1.35.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"82cace44bbbb9d3f371b187fa0693b24aa4bffa6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-2tDDiXg/gd1RZdnfW+EWffZ4x7gkAKrSyWND9JkeEYYB/H5wCjW/cviJjvpIUyZeBIJ+Z6FRRnIDwp2a7Kl2Hg==","shasum":"1d313e0726bcd950331d91c831a0f118aaa2114a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0.tgz","fileCount":746,"unpackedSize":1367389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC+XNCRA9TVsSAnZWagAAr04QAJcd+vqdkef7t+aN528q\nr8aeLU4VbNO8cSeputCHs0LqYlpkPD/Y1oNKbo49iakdh0oyP5WgwlXEassV\n4cNEWCbwrb19K7eTFLTvI0TcPFllAYKP4YdzL+yUR5NuNmi+Ge/1S2V6jhw9\nC2jWBg59NECTSpWmQ371PL7OOjaVw5PIqtTUoZqDA+AEm1mshR9tDxEEYzEp\nW62X/kmgmKzcRS/J2XfTmxCH4bsX5M+3cFJ6FudM/HDEbx8nZvrrunqdUS5k\nf3EyauCXcaUk4A8Ye2wNQByiRy3YBlIy18DRQn0Ejk6PBr9UMO6tWhV0xvgo\nk7QN2Ol4m6JFDzMYWWFGjxRoWLV3Vzh3weUM3wPy75oTFFdEhS8Dx6XHe2gy\nSfbQ8PiDHJA7Iup5v6VxtlJOhwTzRWDODMRLNWSbMO/9YXNxMdpGKb8tfkej\nm9I8fI7IyWHcfaWE2jIIDEzaUHjyllU2m/i+nvVJO8ntZxObuD6InRXZE8wt\nRVoZtVFxYSpCmPCNJRSQpkMkgzes8Hv0W7o6KlUUKQkT/E5rIr28d6Pws41b\nP0ImqI1HKIK8uKsVkxsLjAyaFM+dndzZTs8czFEKKtVI1x6bliLrhimFwvBa\nmHo7UM2OnnhOoMtRTqMh3t9tspeUFNJAlmZ2H80pWH4fEpnNYulILf//tEta\naBgO\r\n=aLZI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4N57nCOtYSTGcMOTkzuP41ROtT7bhi0TAIsHhbgb0vgIgBEQ7fWfacR35Dq4iniaCnGkzomYGJYagCcZNJLny5Ds="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0_1628169677170_0.23165886913433442"},"_hasShrinkwrap":false},"1.34.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0":{"name":"@sberdevices/plasma-ui","version":"1.34.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.29.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0","@sberdevices/plasma-sb-utils":"0.13.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2f626eb72826a0d2d5ec6fd35db782ae921386ff","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.34.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-cDSvHhKH4lHeWnRnkbWZN+dqF3a1+rdRqYA0idhwKlKOIRgPblC6wzqFunTa/gpFPLQkL8HunaAxXk5u8F3BZQ==","shasum":"a2a892cd399e67b416910c55b59d9a376607586f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.34.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0.tgz","fileCount":710,"unpackedSize":1252834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDDjHCRA9TVsSAnZWagAA1CUP/3q0c6YQdElPBFL1EhYV\nN1R7cClieUob3q6pBJL5XzjCcFnsLZykqOLpIXyqdXtjKEZFzj+jTncGatB0\nETBipjaHwwc2wiXbYxFF4/GZt4F9dK/o23Jur6g9ScqSeQLq0F4LcZUzVoZG\n5rNB07iI9Hf9pN55Ctpwm3xTLifjtXamtGViUFLAln2s+wmXFBETFxREO8k9\nub57jussyfj8AFC96yE1VYyCLFtLcfO708892t0bAU+Uo0c/M/5gK4e3+PD/\nnV8o+KClE3fPfpWAoddi86vTtICDQjdCmdFtl3QKnYyeceLqtK9brvBp3koC\nmtkq3DITCxm/5rCA/FemlF0TNRk3QUosO1hFyWOZsq56+BHGHkQ2GeSVUvLf\n0FwW/eJ0qVWkNPrguHXbE95p0I2MwZMOnRYu2bv2Ys0g6+GtsTmxdMgAQNIL\n5anW8nWnqg3n7aR7jG17iJuH10P04kSyV+s8SSFSnrx9N9rO2covJecLJvX+\nB0MsfTLfeP+dyZoucojRxdaFAgkdI+4fs2CorazuBkXQ+0zwY5epmlZqFC1N\ncWXTu6ymCGr2ltiEggxEtvb/auloeXX/gEPve7A7yg/XAigjKL6q0b0Pua0H\n7T34vgVBsur4rY38xXI9T+WgA2YmKCbItcA7z5YfZxvw/eRQhICKSMQo50Ep\nCT3w\r\n=hiyo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyDMmrbNKW6+nzCNKLQ3iviZFFguGHXIt/qcuxgca3DAIhAM7urc+cMdLADbR2LY0EVFTZ15yL666Oh9MoeUCFWZrZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.34.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0_1628190919486_0.0973940732585461"},"_hasShrinkwrap":false},"1.35.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0","@sberdevices/plasma-sb-utils":"0.14.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0","@sberdevices/plasma-tokens":"1.9.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3b200c5eba764b573126c1234c857c334be320f7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-kt6KH7aHM+/vY7SxV92rHll5des/LYKF0/sPKPCBJQ6MywZaxOzUgb+1FDkD0teqNCq6C8MR04j59neXytOiRw==","shasum":"cb0bedafd2baf7c35fb4e247b9d1884d542bb877","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0.tgz","fileCount":734,"unpackedSize":1298760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDOH8CRA9TVsSAnZWagAAP5YP+gIFt3rVXG5pNn9Fek0a\nAbg+yfCsFW/T0NB2zX7W9HPiNg/l5HJJLkD+PX4xrL8/4gXAqeUCFRTu1UdO\nsChkzRbAqP9Dh1bVVahzUcQBXMdDMGoW9Y6DLen5tO6pyvdb8rYk6Mog7dDx\nICC2UX76luVhTB/9MG25S2n8vhQ4wTHP70J5cadDwbrRjOA35prIOtVUUyZu\ncI0lvZtcS0jzMiMmwRpEwcoaSAOzQ+zVHUCUirDkzfSkQqslMzvZUnjQ0tbF\n9jTofs+aGg1rH23Oy93NDyUBxOJVCCOvsgEjFqQn3Y6Uxfip2mQA8ItG/sl5\nlbTuTBBr99axpgFesAB/K506sGbrPqoAV9b2KoSEJfLvz5lKpkI135Gvr71p\nEkyy60VzKjMQKUJdRRGDXWYR8uDMoIZ+o55hb7tA7hpuWacLXulXWkkx8XRX\nRCks/mUOXCJwcgW23dzYV4cgbW4cej3JWJStuRrBO9xQRq6KQMmPQP+jnWBT\nwNB0w+5eMB7xYxuiNTuCJGaYvoeIPWmUCgsz5SzAjGUsoCMrwqVp8qQ4BS8s\nF+z2EBK9uuQLzZ7/3/QYMRi1i058v1klwSQI5KPzrD1+p3ZxBLfppfzKNSxR\nF4Z1eJ5WZjhvkGjd21KySj4vd8bB6Ka2VEbKiGHaoyZsslz2n7RM96t3ShqL\nJaZD\r\n=/e5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEl+oOogIbsfplgoVOsGvlEaqyxHkXePTY1I8t1uWF7gIhALGtFGcH4zLyn0IhO7VamPZg5VumJeks/udM2VVl2nai"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0_1628234236710_0.24449551744906062"},"_hasShrinkwrap":false},"1.35.0":{"name":"@sberdevices/plasma-ui","version":"1.35.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.0","@sberdevices/plasma-sb-utils":"0.14.0","@sberdevices/plasma-tokens":"1.10.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bbba84aeb9a5dcfa411a8157dc80698be3b2a611","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-3ltp7wodXSe4gkGgie97zEHmj1U5u/B4hY84GZ7itQJgCRKtQEqWHGIp72bpGWCYh/xYc/38e7Cn45gZGoMyDg==","shasum":"5821da4bc48537b67ed1ebdd81ca37106eaad571","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.0.tgz","fileCount":710,"unpackedSize":1252847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDP0nCRA9TVsSAnZWagAADiQP/0KEnwbSjD/GTSjjEwDK\njBsIgm7WpExmTcKxhTy6hrRzm+FobD6Db6WoVasHlpMN3GJbNyhZ2RoWNxta\nLY7/tbnD4rh9Hmzgi9yz3i0JPmxXSLwnAOFV8u+wDL0JBFFufQyKcGDHx5BC\njWUKtBfD9zEo08dZJPm2E9Gad63z8tPfJntBW4AdBg7foi8xQXZVgUUmjT9Z\n18w6cftVcJ78WrX5i+Krifkv0lqLEJ1LAW02QAhO6qru2K+/JsOlHpqSDmKr\nY3/vR12GwaZ5eK7vglCa0aMoKt+pm2cOxIZ0PetUurlPCxcrZIiZU9+2/LJs\ndV5s1SD/3mR2eK20atLD+pZknYQXMjkhuMKIMD3VAzddt54eUdQFaaw6eTR1\nyP3FW5WtxIzYwDv0YwRBq9qVZzlZX8c0ofNteksCbHy9M7pFnTGVCdcmcS+O\nXvcAtP2hSFJN8ihTJRf69EcfoeNoViGNfkC82y+tKIXmptWeuBk4zLxHRHLC\n56wi6kVUvkrvdZTZs7wJJbtHlr6g52LX2jYRxtZpDtQE3yIt8OkZq2+o2h7N\nVQXM0Rf8dcTeCKgEB4L2xaxvTSvd46/o+cpgx09r8ZFSbkp3B8k8wCuP5GQ7\n27VwUUGZKZbw0MstK2qKw3hjYNzaFbi6XbT620wh9ejwvR5s7pZ8LTuJa2SO\n7/qc\r\n=2vq0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsO/hNZLNC7HxzZuqbKCoi1Yj9vYEPKa5/l4Z0cv5AEQIhAPqNwOPHmC1vLHqd2dnCzqQKgjop3bVYdC325YTvw4hS"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.0_1628241190691_0.9313844614190587"},"_hasShrinkwrap":false},"1.35.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0":{"name":"@sberdevices/plasma-ui","version":"1.35.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","@sberdevices/plasma-sb-utils":"0.14.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","@sberdevices/plasma-tokens":"1.10.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-R0xVx+B9d41sRRUcpZolKTqFU0KpMgRYAEATOUvsFVmI5ybm2bra41c7XMIMEfOagzYqCKLhtAgm/cVdfYa0KQ==","shasum":"ef9145e4dbff614f068a26f9a70050e6c0de404d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0.tgz","fileCount":710,"unpackedSize":1253117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDRJFCRA9TVsSAnZWagAAPMwP/2I7cTMtRgzW6C5K5DzM\nE6pmNa7XhDtNX+FZ7LkdWlIljeRtN6pbgzNmsc9o+sHLgRDqVgX5zLfrgeCL\n5xNP6q53RsVLYvNJ9HyYhpunl/OAbR1Su/jsvSgkaAKTEupVHd1pOGl7vY2m\niGB+xKt5HvtMmiYUBuZRTh55Ml0AfDXo/9x2DnmfagS9TGDsYG6yFhqK2yL7\nH5s+ZQ3OdB+1XYQET4PD+ird12npHXdjPEck5HpnXsCyKa3Z2zoJ4st2cVMA\nEcTqwJtEzpSaXjNepMO8yD6hvLLFvd1JE9zPZmYOzgK3OLzCw8EZmJHtGyWX\ntuzM3Q7/5BvZuqx/0GORtQ8oDGeBeOc25xq3ZMMRHUhgNPZk5B7cDpYN6hW6\nUpjnJKlSnfoLkO8JH9PYLz7DSSdrDQq9QJiLxRdGw+iEG07lsnY2FDUZV53q\npWRFenj+T8kmxSOrLDDMpJfH/e6bumvSqrfE3unV2aglLjl9rJqYFTRXUrpL\ny6ZAXKa2LNvJPyecmRvVuz3SqDM8Huh7lgsA+cKm89HSXx5jAOwYUfQkucx5\n661CSAxwUmHy4/RAlVfY3z+LCESFPLTkKhzyntLbs2RFXK9Vvxp30GzLQ6oD\n/C9PQ2KlEhv+YldYw7/HBT/XcGzjjMfZyLAbQ6xP0hZIS23zXLmVnAWSaCVO\nN3uV\r\n=LV5i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNP9Ai9x7PfWv1fGXzPDY5V/PuJVsRyrIL547KCewERwIgYIeN32Yg0C7AcXfdySLk3gDdT4/dwS4cn4DNQkwCYqk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0_1628246596812_0.6473985546762664"},"_hasShrinkwrap":false},"1.35.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0":{"name":"@sberdevices/plasma-ui","version":"1.35.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","@sberdevices/plasma-sb-utils":"0.14.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","@sberdevices/plasma-tokens":"1.10.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"90449a9d616ada58f690d4ceaa49d67aafafdd7d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-caZNuPwrlXtKhz800mzzuZ1wxvvnt36l4Nt5k7bg2ycJYywKnyq4G5JRRE7qix07IHgd/n3nq06ZVyM52inNJQ==","shasum":"cf779b2f2036ece9b0d9130e6615c156349214fe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0.tgz","fileCount":710,"unpackedSize":1253117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDRWeCRA9TVsSAnZWagAAXm8P/0OgjdkkihanGdPK66rj\nXaYY8VvIdiKUPwcIVJz2dFgg9HtjyqFHLJMu1iLlpov3XRWxFv00CxpVwne5\n0tRn4QfhQk1XeskJmqO0Om6VIk0TlEVVgZtcb7M8kJdQorjSb5revA2M7Jfu\n0caapwob3vFtAzFDDKXGu7g2vOw5bV8eKZLn/aZg0Xkb3r3eHmMDenRtBs+B\njyyV+cPsYC5zbmDdlF2jaty3AARPRpyNCKL6V4zbhCNPgZ8hfLiNTmPo6XnX\nF8mIk2SRHsl7CQ/mkb61Q2uAEm6tzEboA4V/wJ3Sku+ymgIJLLOiB0h2cFAE\naQ/aT/jmNAAi75exywy1HeRZayar8LEBKDIuV4Bcrwip40r36+UTKkprYTYe\nYjhI5srZGsCavLxtlyudpShimSZo72se+Slny1vTL4Pp87sQHWOyeid5U026\nEbPJzkLQJSY/e0W0lVCMmuxWe/WfR0OSZ4bs6V23yy6QSP83bKHXKH1jxikb\n1kez4VAfI1EY8BLBW8/KpHyBu57ju7ZTttwD19n0f3EFIbmEn905MpfqoiFl\nDqFO5BZqdfRPWJVr4UdRI+EEfRoPts4ZzoEOoJ8SAk0z1HWLjNhdEeKJZdGj\nl+vhAEL1z2lPVjgdV6UOsX3304qJzKIz34mn52OLrpgIBanS9SLl9v3ey7UC\n71qU\r\n=6cH5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDih92l5bChL0nINZYOC0HlNmpqasjmVCyf9zBRNPt2vwIhAPMcY6OixvEDtSvPi6pRZeRNC+C2K9Sn7v1nvOMd4gHZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0_1628247453910_0.3013902324603466"},"_hasShrinkwrap":false},"1.35.1":{"name":"@sberdevices/plasma-ui","version":"1.35.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.21.1","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.30.1","@sberdevices/plasma-sb-utils":"0.14.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"439a2f06fb7a92d8225cdecf19bdaec47b979d36","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.35.1","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-KUmYhEDxUa0w5ukMjTtK02XmoVO6+2bT8MiwBy7tC7hn9QcN8vsljXRpOnEhmZcSSFWBIciDOUb3SH6h20NSrA==","shasum":"48e6c4e8ae65b8d798e8297326093aabc59e4f10","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.35.1.tgz","fileCount":710,"unpackedSize":1253263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDRkKCRA9TVsSAnZWagAA5I4P/js3FgVwPHShiM4mNZRo\niOCk3x1fm1mootOrcAMzGCUoOTh5uKAk3zZKGMBUbPQB5qGDMAltG8u+IM/P\nNqSGP9Z0sVYPAvli1PxMYCbmg+S9rb7Xj7ZI9eZZ+KCIw/PpKOA0pZUrlgnc\n1r7M2Ajjz2Yqzc5qeZxUwQu+3ridhEqe5q443d9Zq4OIdOsGg/bJw2WnsAd8\n/ImddNtDIbyRCIoPN2GIlfSk1jNlqtWqfxRjYnXSpyo1TDgqk96o5s7zBTC3\nA37IPM5d7kDKW7FkQAIVYcZlBYM4K6dRhDay9gsmtg3W5NLQ1wtWIKa7kZVa\nSbZ3du86CX/a9AtDjocgIO6x9e3x4vq43e//lUTLVqnOqF5aFJyj7SCwuVcx\nQkpBLhSMsXEZga3bmzWYG+kMpdWeVGStVOhCgWxc52LsoGwqX8elKhFGtEeo\nMxLiBVJQ1+MVDGlIlJMtte/yEgNSQSU/SL3rEBq9lMX7qE9r9j76Yz+Du87G\nXC0Jv5WhdaFJq43O4oZDgyzaTmCbgOGgkX/Fjt82OJS8B9mzGB8vxHp/FtmQ\n3DZHIr0xDbLhLFpVoeD7yLhgkcBhj9HU7hPG4bGtetl/SIijLhUP3rkDTRyS\n8dYC+DUG7qnydDUHVXyWQgqdj7yjKiyaPr19Hqdr4aLj6dS2Yd2/88EFwKGy\ncSRw\r\n=AlHI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQ9R/Yn4Kuril3KfFqqJArAnt1KcwptisqLOcr5DxQ1AiBPqeGddnNzcFfZd1ps9nUcsfrRGspJvXw8OH9Pnw6S0g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.35.1_1628248330135_0.8441803235976215"},"_hasShrinkwrap":false},"1.36.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0":{"name":"@sberdevices/plasma-ui","version":"1.36.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0","@sberdevices/plasma-sb-utils":"0.15.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7ecd37d1f889b724fcc453253a664a654809010d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-BVsqFUyoK1aDgaYahkpaA0gGgrGacrJnRjHBrM6q4Rw7TFwb5gs6Vz2xqC11ATLG2xI1W310Lwh495416VCMMw==","shasum":"bc1f19e0d60e04441800f5d99d67ba61b86708d8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0.tgz","fileCount":710,"unpackedSize":1254775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDSX+CRA9TVsSAnZWagAA99wQAJ3HiB3WfpXiUkyxV6cy\nN8BTuNEqmNBqw0Yn1jTs4CjHPAYQOd8q+jXhvBboszR2BkWL1mMNfm1gIXEH\nqHGZG+nS6bMwQ44YoG8CDtXw+2a1AmU2iLRyVE6fC9y0agvomntM1sl1LRup\nLtzl03LBVjFKXlK0EPfThOgF055gdJP7mFC8qaeARkOBb3WrZo4LJbMJ9zuf\nuvT4SpSknY8KWPK+PJ6i8XEV8FDtI52aJxwEtkoLR+nYs9xRWc7dcbSz+ePH\nSkG3ko+kZ1wnNCIbwe/bAS4T91Bc/C4NrdSFgXOA1d1jO7BsLDUJ7ichfjbY\nSPmkTQr2ZXoSRJWqBk0PqccbU9qdk+8JmmIbJyvke/U5pUcXFNO3rxgJVwKQ\nTsf1T6f40fg/SP4tSYXMVPyg9AncQ3ifI5M3UG5sm+lLP+9joDhq1+1ZNPRM\nUy1ZzthHZjP36/HRGh171voba1BJ2PU1o45h0Y78+aKvto7pnN76ZkLUb8Pf\nlGw1IzXUqEQFMkHAmoBaTrJksX+6cmLXKC97yxRPR926e6ZD9sJZ3OWB44SV\nLBQOU7lNV2S5MTFkLw5zhH8YT8exXthzmgufw/O3CT5dlsOVkfZzvihtum0+\nBDURHvgaEe17sBOuPUtzRH/s0+eIZBOfxjoDIeypNDm1W5qHPIcfQxYzWlcj\nuPd4\r\n=4aiR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAs3a/nTEl+EcP951I5A2DpEA3hm8X4w8V4VOmt4erWaAiAQh9uiW+HbbN3VpX/TjXW7BmC2mMnARXZ3LR0mK88jMQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0_1628251646382_0.5788098807111617"},"_hasShrinkwrap":false},"1.36.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0":{"name":"@sberdevices/plasma-ui","version":"1.36.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0","@sberdevices/plasma-sb-utils":"0.15.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9f6027b84a2ba7ad5bd6c3515ce14edea4c69414","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-ZmuEfIay1/rY9IqbGOvUsHH4An83DSHtgqj1Zp+3gj8F1ZCRG3EBg+yeyPqc/7d0nTfFmj8ioZ8TcH0/HhE3kw==","shasum":"e64835d03038ea4f799661fca46c04f5d1f78d94","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0.tgz","fileCount":710,"unpackedSize":1254775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDSdgCRA9TVsSAnZWagAA4boP/0sAgEv+egJaJvY1AyYm\nXvgR9RIkZkKwOwsY0mqGWZcaWvL5AL2Qy8Pq7V/sgIQy+V4LCL//UV0SHIGF\n5HbVyZ6A4iAecOIh8BAgsae0rMBcM2tca2RBcREiznzEK1ZE6j7wTrgJ383d\nTUZ9bGvDw2lPuX5u8HHOlOvhd8+T+XXLexnFm4qoh/69n9Jm1N/0/4z4Q20g\n1d07kewLD4pYpQLMZQeiR8jjm3tOSrDD6J9L6CfpOReAVvH0wF6HB25Fx3SP\npUK8whOQaxr8YPBA6Svdi7qAApSzsVBjOkbFF1FWX/QCp0Fn9ZDfrf9UDzSb\ntGUUD/EPwfA4cyZpIo1YtVHF8tPsHRFZPs4CXoURR+dbl+pASvs7DVb/ccjK\nfarnb7EVYMLBXSsPirTFrvfeZ3gPOe9VRIrQQMM74p++2lCSNfptqTNKzfn3\nNJ76VxZDPxGiL8Isyup1qBJhEq+hKsxKyDeoeRQGA5PJYKp6yhkcfR5XYqMi\n4Ot3iw/zqVaSyETqmk5L0rM3ULLtojes4PtnZZZHJkVWmW1uDKU+1MXc8ZIs\nd1BRJW4TdagpB7kmUekDWGM9XzGJAf/vUl0G140Z5lk7VdV4FhPjRpX9TlFX\n/c5i48RL0GLbyol0JVliqJWDfE1UkYG26kAZLmOgYfQYH+myEgmL78iHXM3y\nJFpc\r\n=91tm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXV68gXPLJ/1QeCaqiHHswxuczOnOkYOimZkZ24c93MwIhAONTgIptZwzlGNgHq1+50IYDeo0JyAIIT4N1z7gM11/M"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0_1628251999821_0.8949492660930025"},"_hasShrinkwrap":false},"1.36.0":{"name":"@sberdevices/plasma-ui","version":"1.36.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.0","@sberdevices/plasma-sb-utils":"0.15.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"471dbe2ec92bc2096fea3c72dddee707159da2fd","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-V/bsgA89JACQoQmTK3hfjjcXzYaY3/2BRz4tEnDHQCz58+yFJrSE8mDrRnxKuuK3u0otA13/zbmBSsZ3FZJaoQ==","shasum":"d62edf7445c652076c00b0852c902e9b9cac4010","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.0.tgz","fileCount":710,"unpackedSize":1254983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDT23CRA9TVsSAnZWagAAnMYP/j7Vasgl/7btnrUxxc0M\np2DdO/o4+GKXOEjceUTUowCzvTqHzcPqWqenJIBY1tcLKN+luC6U3sk0v2la\n4e5RG4GNbR3T9P/lObSymNv2MiwdPM+kh5zPZyp9NiM4v9IyiZtAJc+wLab4\n6N00nSzBiFyKn4EwzNv2/9MScPuGJXAfCggFTXlo7MuXaTtDsszZmeKOhqiH\nMW7WoQxEzYa+15CgqFMm5AcIcNYJxdQAF5YSmw5WlBmenxYjjbFCtbaBIb41\nYgF6fIN9kElxhDAoLLU9YmJ8MlomO4rPoSHWXo5epaWQSsRtW2iGxwCtC8P6\nJ03i3RhQwBwMr+dVyObAsLfqqBXyZiU8S8inwxpeBJLG3nWNkYY4u74KQPZc\nGV1/cswqHgo2fTs5vyXy1eHI8vhKyRES4YwVOOTCZaiHlVzi3CnwgC1rzmKG\n13LS4qdJniKpcCerROVwdzAUnNbilIkL/7C/mL8Krr2w7F16vxtxSMEHPc0B\nPLe2fcAALA8AkFqgGnsJTts5SZbGkkGLa7ZHQJxL3Rgr7+1+jd+neWDcVVts\nJKh0e+qgjQQOLIb6zdLzWL/O/a+7IaS9Y+oOMkSD8Rbu+tW8Qy3V/7lwLoM5\nkIrIGPe3qrvmt4tSjEdg43Pecc4v1f7h0rudWiyFUVSzPo8atklOTzGFm3rb\ndnnO\r\n=mtwk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTekb7L9wuSo2VLAw/EV7qCw1jCkI2irGsPSm8hzmP0AiEAz0co98vHsSyAXjMIOKBNOTvK4xTsmFKJ2M4PlxeCEhc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.0_1628257719359_0.7784524625696019"},"_hasShrinkwrap":false},"1.37.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0":{"name":"@sberdevices/plasma-ui","version":"1.37.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0","@sberdevices/plasma-sb-utils":"0.16.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b69481eb5d959d31b1bc6feb54c97e49a5bcd96d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-Iu34rCcHRWxKSsgdKLAxUllQ6H0MoLhNFAT7I/LyIL2c0Jhvkyopg5T5wrka7GGKd3NWS5tY+am1IGoLnHul4g==","shasum":"de847007bcecb3d571a5b5425f3ed788b3774e3a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0.tgz","fileCount":710,"unpackedSize":1255145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEPs9CRA9TVsSAnZWagAA5R0QAJnSTo1ozZG8IWGz40Qe\n37Od5bXbJVb/Z7jR1UtB8Q6l6rWZqvTsFy27sI5mrVc0OJdHhtX4VoSDpfkg\nMK4R85w/6UJVYmMguqbbd4zLFlut43WJGK2+nMwr+dkIVmG7HIsFsexUkO/V\nGz691c1BlNq4qQ76Mv3LMSJq3vL8YjS3L5aEz+J0WvlMDdYPQIwcCBJmQUUL\nOMp9QrrQVFTE+XDrRuZ4pROKs8+xLYMwmXLaD+Fw0zcxwp6V9Msb4NPwpNDP\nhU2OJsYVRxjLKQuFlwLKUnfjt/pfa7k5zGJk1Kv4iMZfL4JSZpMCAumqvAin\nxWAzI0+rvHGn6aEEprW6LPfvjD2w891EnRoe+l55yzxtZQQQhro3fS24KaYk\nC8BevXqTcbPiESAduqwKyoWyu/ZFgqaGV8Mey1XfGnlSGfwHc0krBpnDG6nY\nFC1wg0xGJ9ypbboJTWafrqiIIK5UHzuEddpqk6oNqzPyLEIdncba9diXjqxa\nYcY/266PEYcJYRdElR6LyMlsQ7/AhIuLmXz1URvxhTH0XNjgHOSVyNM4QlIp\nJXZ6IQYQqsvqRk2NKpIbR7Qp5bY7wBqb2UGh3vvGVuPJr2tuBQtL8QbkehaI\nUBrKPmzxGIqnQhCdV2Bkw3mV4xbcXyT1nF3oFJYc+suTbjBAeSeKOXhh6FOZ\n5hJG\r\n=ScSh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHSOIMII1ysYtRbSHDLtYxXaOuKse5Yh4g9Uc4vdKFHAAiBPDZhzGSy3+unxVfjrXtLdtdMWrqWZginPnMjzxNo0Ug=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0_1628502845776_0.2818372909185627"},"_hasShrinkwrap":false},"1.37.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0":{"name":"@sberdevices/plasma-ui","version":"1.37.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0","@sberdevices/plasma-sb-utils":"0.16.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0bb510f34e34896937893887c6ba4047b2f17710","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-xpDzoPIcKBs9kcA01Ff6jMtPPunxbmbq9+BoA7dmW91wT5edtdRjxdAQ1Bk/MG21d1pGl3woyS1PIwCfW+wrLg==","shasum":"938ac0a3f7124b35ad4ba4e59c6759193c288802","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0.tgz","fileCount":734,"unpackedSize":1301125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhERPWCRA9TVsSAnZWagAAREwP/A5MSEhcionaFsreCFV6\nmkQaXl077rgA7mmcOOzf6FjWyWKnLfRAZCv5khmUAcp3FOt8X1uhRVj6DF26\nTc1shCA+ib1EKS7OTGqhiXYUH0ChntOsD+2cWXUHr6IEaVh5Agv4bbK4IHf4\nYbql3KW4poDnraX7be2KFowvmYqSY5qEOGVxJPaYWq0hudQrgwQJs8FPw4nq\nGvIR38uRx4+7y0KG+VNeYzjZ9gl684I0oEdA0hHTz2iljOANDmoNZmWogidp\nIZtzzCkuQ8grIxCivW7W+BOK4UtVUxy4OJrxW3PoMBKrfOJyk9BqyQqLCxMK\njVa/ik3cMUgOVy0mvKBliDrV/fhyw0ZlEibSF+fuNIwIWMNX8hZ6IpGpLjDN\nXrACE+xgN89c4LTHqHcVVbD6467AAN5x0HE/QDo9nXa0wLUk+/vvHzACgmHx\noPrs8oiJXl2Nz9spnBjXkCdlp9FnSteSnXL8Z4zTEQqHNziJ9m4PoL0wC2VF\n6nBbyqUsw0kLEw93T5/inYH53eK4HHrZkns0024g9aYxB/IeYUGQ03M/NdHf\nFlrLjwZUgyAFwdqbgDBLQeILOuckcBCKGcdKCrwgMvEbgqZHBodxNkWmz/eM\nOPCRFwCAIpEjTZ09vc1XrMfb0sGR0xz/4LQGqLYk3hvUhDyuPg4iAMuGCHxR\n6fqD\r\n=2rtj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEK5MGBfdXy7YRHK+TmKCN/wzBcPxQKzQ71mjTVvJcWXAiEAg9JEdUWWAs0XzjTVa81vJqmLRyp++EruD59XbNpX+mI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0_1628509142550_0.879335578460015"},"_hasShrinkwrap":false},"1.36.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0":{"name":"@sberdevices/plasma-ui","version":"1.36.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0","@sberdevices/plasma-sb-utils":"0.15.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2a9ceb78fc33459a812473bcd8c739ac2a68a413","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-7WRkFzOUEH9RQHXt2ueVKDBcmlsXBzxxFJ+ODr3IwD/3biHP51gDs2yQ1/3YJIN9vFXhScmp9vAuflXiDpE4Tg==","shasum":"eb54abe4f80ff3f73ad38f440811e78b24be5534","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0.tgz","fileCount":710,"unpackedSize":1256332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhESxVCRA9TVsSAnZWagAALRoQAJrzNR9qn/WqAFsgat6l\nex04+t2s/UkKvHVOCXvXTUodsnJEqCbxrSL7yOHBlluMB+Cy/5qTD+oOW6K8\n5hz9FaRFsVgJm0lAfBi0N2r208gMVMELSCC6BXWi04gmVCwEzPx4Du+7bcn6\n+4ggx6YsPvrHHNp6ONCMAdotojRVCT9ziHxwNZ0ZgaeX17T5+FsOJ8v1U2e8\n3EOGVUOSWGmM4QMMc1UOuxlgQH8brO7hKa6dqy1w/MvbpESQ859GIvHeOWMa\nGhqk9HYALoaOqwjEIr/+Z5PqGzq2G1kL3HNb+2NXFTyvorXRQ1FiD3ojrrps\nVQTmqMVpBlatsd1Bp8jEp+N4KTulCUTc1w0OhE+cvZK0HD+ShVD77R4gp1Yi\n13p5wQBVI04ofJ3X5I3WI/YcXVlT4f4npJkw2NkUOcdvBtIz3dNuXMTMICAJ\njdoWVbiFgejf2X0UVZK91txnyFCZHRQ+mcSDy31xOdJwIA4V7jD8c7rl65eL\nJ3u/Qij8u5A6JiIf7lvdv0oefLgN4vhPVXT7Y0mEq9fNvHNkG7LoIxaONpuT\nMFLxZzHmu0cnKIyokWNtQ+Ob/rDFybhb2yvzIak52cHUuaNpzo5vXDXKLJam\nIpZF8y1hJX7TcAfyMMIAxfh9q6o6jlsAQ/RTbx9pXUioSSn/QXwkquvPwzbk\nuttF\r\n=W+qq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWolOhKzIxMQ/Yy7UtJ2MpS5a5iAMpTsNGtSfasB95mwIgUjFqQRS46L8R5tlExcNCLyWeJt3EqXauuVC8MvQxmWQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0_1628515413000_0.06822993035351077"},"_hasShrinkwrap":false},"1.36.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0":{"name":"@sberdevices/plasma-ui","version":"1.36.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0","@sberdevices/plasma-sb-utils":"0.15.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ccd69a7692700f278b6a8670a54e922dd83b6585","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-n5jbY9wtTF7mua/Kl6lFgAUaE+gHheAYeHl+mKYk6MndbrxYbJaxOkdGBuVSKuIBIIzXEmxAvGFER9qqGJvtbw==","shasum":"bf7f9e3148e8890511b9e9a53df77bbcab7eaf43","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0.tgz","fileCount":710,"unpackedSize":1256427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhESxhCRA9TVsSAnZWagAANbcQAKJ08+d+p43puOeh6dlq\nUY7Sf9L1ZkHxJc0phGn4ofXg7dhhqWuZbL9xnZa3sCB7vn2d4BpCflbORhfH\n8blJx8zqjP+zTl/encDybWEuxZOtI9QX5jonb1J+K5c0xX5OpV9WFmkmvE6X\nDDQtzWUsVWPj6WER8ry+SDPsptzY+FlLSa7THXryKMdcRirBa58QHTBcygZm\nHDvIQxtC8Nl5vcuqKsZx7PrhD97naW4jP7zgP2CWejpjk6w4KPYF4WPWgx/0\nhGg4DZLVDAFfAH/QWQgwXcH0QtyzqlC6FkonE4jzppHTJd+7/EbMyMNG47P8\nttxM/jHhapEa0wrKXZgETOUnyI/BSKN1iDxucla2kmnxkaKu4EmOpFPUzSdK\nbdJOAF6JGL3gEn1xW5jDvdH+RctxyIORynL5oXjVDU7iGmZQGOLof7lbAmbe\noPOQ7yg4vOoV3ePr2wriD4A6yPPiSfkUXIhqAVyfRWVHyZCGKTIt9+B95qo7\nFx8Ps9G0I1JgztIugQjBe43Z0RX/a97mltfG8jW712rXIpNAUn53o6sa9mpR\nPPqrFsJbEscoM49FdRpXj7hIC/fZmBC1titmPZQcfISGKnW7mum86O1C20rz\n3M/ugedFL5KJ7VFsf0RG7yD8u4E7jPsp9kgttMCYOCP/W1y0DUiadwPRhxES\nTy0Z\r\n=1TW1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmveFiicGnydyN6kAmSIKtQJx6RDzJUTlcFOBpqLcEAAiBw1/Ba2xzfWK57eUBPh8hMjEPl4V/zNFFyy+uLMe4f+Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0_1628515425696_0.10308882794578156"},"_hasShrinkwrap":false},"1.36.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0":{"name":"@sberdevices/plasma-ui","version":"1.36.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0","@sberdevices/plasma-sb-utils":"0.15.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"734c6e96f5361ba27136d15ec9ffbeec802e23b2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-dyo9Y2DK6cZTq7mwKXsm0oZbRFqQzydwLCfxibP+zwDezGqIDmDnYL8vMDDclsIdgTOwY1T23dKftWg3nig2jg==","shasum":"142152b19d07f35368a6c4af8c0a84494ab79bc5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0.tgz","fileCount":710,"unpackedSize":1256427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhES3+CRA9TVsSAnZWagAASyAP/0LWfK+TpgX6u04vmfoY\n7pL5oiZ2Nig1GFUpZPZHdkHTDFmD+USNRIfYeyxF2JfathvZyMls+9gHt+IV\nSBSRHq9yAexI7HZJW1iR2T5MJ8BEk/TjHHG3JvMyg7xxha9k5LUMoNwUUiOc\nHIld+zStwJIxVYxMVaCVJHtRNgaQsqeinS1W7haDteCPPSCztfZqBxfM6w4H\nKVUAd6F3ZjWKIBhnyQ5zgPrVH9/vybvrGqdsL4dfzfBTRKYaf6/G496a2i+h\nzHhWoVf/opJHM6AGGzbYJotq1/vrbBxEeoeg50LFQfL543zCfGt7mCBtpfpM\n6n3gEhRfwsMJUwGF6GeyTCArlFeZRrJJHvCpmqpyAVgB6YnaGVG+FYf8ejyj\nZPpp1g8Eg6PDObc4AjUttFXLCcFF153LCjGWqmOhZJM+ssuj8j8GT3LSGQW6\nqjeSNqUG4z5p4uwUJsPx5vUTHZ3dLSqDv9YuHxzIRHT+c8HEMfurPKa8N2Ns\nm6TulaiBKnEFbCPnOutPIWYhq4mITmC1Tv7mq/ApQGsN8cXicahEjEZLG/UE\nrviijrWFwyRvGIgNlnwhRMcovrrBzFoUIbq1RG8WzNUCFwKSEfD57W//P4Vs\n8WlsonzqJkJ3Qv6cdnLcCZDPxO5NIJ/LegTvV6FRUZxzj9FNRkmVXPmrn8jX\nUkmK\r\n=m7Uy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+6r7yfdS1U/my9t52/8/FL/cchnQ/m/SYg4eaRuw3XwIhAJAmIrYcEA6Z+jVDiOLhzhhINc0dz1+eQlUf/cUyUaOF"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0_1628515838192_0.35429649315237133"},"_hasShrinkwrap":false},"1.36.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0":{"name":"@sberdevices/plasma-ui","version":"1.36.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0","@sberdevices/plasma-sb-utils":"0.15.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3036c399cb704a5d408f07f7eafb42371e3ad38e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-wpaVBhWd4l8vVm91b8kNX1C2GPnY7/M5faLpVCggEfIOwOC23/AmFIYXNQqN62XrsrNTnuF1vQS+pKZTtyCJuA==","shasum":"b6d8a78c40ad3d1dbd00e71b1d6e97bd2727fba0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0.tgz","fileCount":710,"unpackedSize":1256435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhES8sCRA9TVsSAnZWagAA+UYQAIN8PgGOCN/HEIptMg3v\noRjutCR3cuFd5uMGs/+WN3VBvnUlqgiMmpaVLPSEBOD2VGJrSHT5iF5l3QLP\ngRP/KG0PjMSQ1aAMUqaKho7heL2nBo73QMHlZRiTf0sPn+5IZmJLDgFVnHaT\n9xtYoVtcYpb2Yyr9w2uGSVRqZ3ePwevDH/wd+iTXgWJlYfoPE+ZlIaZuJy6D\namP12tRrOV7+2aEAb/7qI0ZVGpbj48B2oCiqzGiRsYg/BhTIBCtl+zAHk0pn\nsa45ef5VBvRqtnAg06NErfC8PCmcfkT/dliCh9oy3LSvO3O1ikn8J4bdPfQv\nsu9hKJfZorER1o541sFKKgh2Baiif3qLW0UgDSPrwp850EuEiOzF8GfFbx7E\nOECD8RTR77+u3ezGg0LMZe8MmhctJIzqoAtoqs7ongkvZVSYoUKSqiyD1/Rm\nNeGv/5p+YLGaaNND4MN2ZJWSMvunqvvcgrRXigMtOztEvNzfni40qodGV7VY\nq/uecRHfRZ5RwEfKg2wxl95H8OG6Fj4Gl4YqpmRft2bQ1BIZlifL9L0HXqcS\naZNzCVCTHDP0OwjtZQ2A5+Z+VuY2Y+q97wehxfMoZ4MJS0o6jubAyh8I5r2/\nMjVR4ITdToHteHl8EjWWNTah/l0WcwYpoQWMqCABKHDHV+FCML0R17GZxpRv\nvHpi\r\n=JAI9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkmzUMngn/qW45TlFYRLn13jHgVy5osc2GmFsM/j/CtAiBhmMtvtJQXmeT/OHXRV10cnPqkFuu3SG+0wVnSlg3R9A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0_1628516139907_0.978544477713037"},"_hasShrinkwrap":false},"1.37.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0":{"name":"@sberdevices/plasma-ui","version":"1.37.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","@sberdevices/plasma-sb-utils":"0.16.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","@sberdevices/plasma-tokens":"1.11.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7b95e9b232adf3c4024bbead93a8bb8c0b59d79e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-NTtGaFxuNoi6rcNMvwoa/ZtxG8tj/P9gcXzC7oyAgq9iS4xyZShuq+uMRoBoiDlA6QK87HxlCzMC6/DFay6EiQ==","shasum":"c0408c2f5aa64d54e114ae9414846b08d384500b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0.tgz","fileCount":674,"unpackedSize":1196841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEYNJCRA9TVsSAnZWagAAN1QQAJg9+/C3qkVAeQl0vVE1\n6va/71M0/sx1dVXYNSisCkZTSiwkYYbYbDiwxj9u2tRGbGUzg5zo1GHsEG7j\n7MxZVeluaL+Uh99n0kDiZ1do3XPbryk5mq1FQ6VXY84w+8GqPEiafV96lCc8\n1lFOBptwCpZAm8M2gnMkJcX31rGFZtu3P3jetKqlu5VvdXJI7vVrlHAAWqha\nOu+jxSyqgFd6Ks5HrXhYZ0/TF4FiVKt898dzGR5BSplp023DymBkfwbP5Ywe\nqQsGSxo/r581yXiHHz2G3/gCmYcW0AkmyBnjAngvw2BlP+GWNnCwONeBt+UH\nUJ3GN34UesvqKKDYB66GLpgctUJlfQN08wSy0v1e+uEUJAop16QAwSpe/Np1\njN+ScfQo7RDf0Edr+/SyaP4f3ATuNZ1RWkDwFxH7nTXKikUqb/TrBylIgcSp\nUH25af5tdGGoUNVL6CeO0lDtaJBNCTgyN7qSLOtNoszQkHpUpbnSJlDrPF1O\n0nRCzZu7zTTbV+Sa2bplzy9fG83xVuqODD1k8P26dnS7XGlz6EkXuZkdsGuT\nE59XLP6vvvm/zX6jp4UW3csOpWgoPlOTvFf55e/Lzd8GDFBIbFeZcGChVWSV\n3LuQupO0+Gh5zLVt2n7RrVjHiXJmnB99L+yYo2jMTmi6HEJAYn7gHRmYylBl\nFLjK\r\n=Orj2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDghDlrphrIx8d0HykDe8TzS6mV+2RusAxGlwDaR8CM9AiASPhoYn6NtvHXJjUt6r2GpTtYFxihXx98a29jVMNTBKQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0_1628537672775_0.6327876665925423"},"_hasShrinkwrap":false},"1.37.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0":{"name":"@sberdevices/plasma-ui","version":"1.37.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0","@sberdevices/plasma-sb-utils":"0.16.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3fcca3ed2de92a5301f926c32f5a7c3f4270ba13","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-E2oc5xxN9Fzx8YvKPa+mbX47IXxmPbjaGCdpoMW/fgAzhPs7RyUZtSJLJ13dVOLmnTBVF79Lcna8qwAO6PbU0g==","shasum":"a81414c7505ac8027a791e452045e7005f7e9916","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0.tgz","fileCount":710,"unpackedSize":1258824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEYa0CRA9TVsSAnZWagAAK0QQAJWI5PW/Q898JYkeGLDm\nsvBHyG3Y4gOn+uDZwEpbxlAvKXj465vE54gUSTkPP/DbzWDk72y2U5mpGGZI\nK6rnQK8y676OAqP79OaJJ6Cbh7w+OmD68+LpE+DOaqb2ZOk0TafntFKWdEy9\n8fqQHDkhKWR7PPxf9YVwzH6NgWUQlj8BxdKUEBSbqofG9uAGixMxpDwgxsxk\nAeSmq/iYrr77vvOHVgj7OjVHjVqzt2mLONYxm4foRLh16bzLuMfr/TlfqxQw\n9gqYjF4nxWRPF+bpUq089FLyfoHuGTKLK2EMaPG2m3sU2Aey+EsgxnplqB+9\nvYwU8HeJ3unjxwcBK0k6Je8LeDdD5kWaAQBzgm/A4lhHTM5PJYO6NY8kwY9n\nxpu4z4kDXXZxI0ntuMOZdqUomF/le07RjbS6RXSt9tcbglEkPraHtrtghAO2\nr71sAhHBGiJy22d8f472Lj6jIyiQ7g6WImr59uk4DCD/bJz/QEMlZkA5mG3/\n11oyZ/Q+gjTutdNnwvlKL0efxWn1+XtqwR5s71IJeKx1f9ln4Rzre/bCus0P\nWBejdMLCbVgXcwBrmG5TGolWNjnmUXFe3uP2lMBcloTKEmnP7TBmXmolxHpa\nPX/xljMEbXwQcCmNS/GhyoDps4MF73DjnS7td7s4Hym9M8k2ctk7VepKqDxv\nUFzW\r\n=7NWy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsG91Ytf0RPbBlpLr3i/AXsQirBOiwgLorwZy6QzBF1AiEAyIc2nENAISJQ1epiUgdsXkU23kwdEBXJ4wrLW7lEW/I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0_1628538547979_0.14384795026500785"},"_hasShrinkwrap":false},"1.37.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0":{"name":"@sberdevices/plasma-ui","version":"1.37.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0","@sberdevices/plasma-sb-utils":"0.16.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"45dee6832de7942c62c9625b63e4dde665c7bf3c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-S8OflQCUtO/KJBdueHvraYYMSOakoTdGyj1xh1cISbavg0VkxZuUveOuGwrf796ROuFaJ6sFxycVpPVq9UoH0A==","shasum":"20ce68f6834e47a24d1b9c3d24249bc7533c965f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0.tgz","fileCount":710,"unpackedSize":1255145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEaMyCRA9TVsSAnZWagAAB0AP/iHhn9y7H1lOWWBuAZmx\nEXrGFlRdIlfUMfH3+AuHXcrrmAH+JTtVhnSxY13WzAKg6Ri1L9ErqtZD+7eu\n3HN1TecfbgQWgyDd8zP5d2P+jnvczufrAwFNNxx2hnvd3ZkeN1wqFjMwA6Ne\nR6A2SAfXYWIy8W/eN9UljQYyvMbpDGOB+33isAk7MzTymsdzBQFwILZMcJbs\n/zY0FB9oMYRargl7hJHVJ0K8CmsXDdQanSYuCByxnj9aS12NN5hfQ9xhYQo7\niMcSdE8gyI0dGsah4XXvZZWp5KCUwpyJzAqqX+1hWd+aVxs5sv0Ush7GhVig\nSjutuZnotPe/prSPyPxQISo794jIuYqc69IKDJBiI0ej/Jrk+u06RlwNOjsN\nIsq+CXgqnxClmMtqxZLRZbl6RbSqyMIDP4+WQMar/LJo8T3GYg+n+x2DR9Y1\n3f6sACcLBrvuNWs2uJyyk6Rh5TXgk7v9GfmxOiS6G+UhrspI0KILDXNYGuTm\nOTlaBOOkA91knFBpc3sGAyn/wK1kWeUGu3Aj5mZy3UQJKzJ5nigrp1hzNmts\n7amjYoLXHU9URpTHGq1qvVCkfcJAvtPzzbDwPH03C1efck3rMoh3q2K6bs3p\nIYCuVamdiTaTH/eZ2zgKJgtXw6BU/8UckEUwCJ/olKWpFdSEYdgcsViaq27U\nWpSL\r\n=+YxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHdiFaB2s10mspqGfFzMcsePenh5G4+FOP7jFERS9uPwIgDrv2Iz6hMbMljsZf1OLjyGcC0HIzKm0uH7ZUQMjQxWc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0_1628545842512_0.358932437771996"},"_hasShrinkwrap":false},"1.36.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0":{"name":"@sberdevices/plasma-ui","version":"1.36.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0","@sberdevices/plasma-sb-utils":"0.15.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"32e5cf75bb5c47eec7f43e5da0cda58a5d8af567","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-ocHHgTutu4sRbrmlgIXmzdTEkPQN8JIf5Dk/uMk0VorMKvs8DA921eZWf0BVFXOEwwChJV+moqPOc45qzErZLQ==","shasum":"4ded54a9aa7eed5e9f837e22130d044c5da03974","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0.tgz","fileCount":710,"unpackedSize":1256783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEheXCRA9TVsSAnZWagAArEYP/3R686DHqrFuYyOx2fZX\n9JD2hhklJcm1og3UMwhVTl/+UMXLgnPhPOnEVrMBiDfWn5CqCxzAq4M65k3U\nnBB86E5vfc6Gwhw2zYVElYzwYF8mn34EgPGoAUBK2x/sV5EjFPKizMwATWqQ\np+JgKxtEe3nqc7jJW5XNXTNMQG0ZxkGq0bL1Rs6L0YmfabeltEolQJPAtTPA\ntxzyYzQ0p5wepiRTFX0corTaI06aniYO2gfrTziqwJ7oh1D9s/q8WsXqcW9V\naYwNa28yP2UWP3JA4KcCvni7J2OhVtw7VSDTNRTcfSua7sbyb5QED1XK/Xj7\nc+BwXuIjxEbI1useLnnxrYpB6Bts7dtP5zYKwwNHG0o4DqtgOelRVnhRjgmR\n6k+lrhC66hs2INkf+dObH01ACgdQMPNxWNF4dl++vtnH4G5BJ83K/HFIc20L\nY4+BbHt6zH9N/+0zmPRGQSrSOWr2S0pP7scJtonx235QfWFt7vLG/vzlKvgO\nuOJ80Eu8EaFj6ZSxnC58/jJ7jIv/0ODU7KVyNeIs9PqBFIlgDo3gBGS9iAIO\n6+0dCUrKa6UwQ8W9ttDxHOiJk3nfxKBMAHcCgNEaaWp/u1iC9MEYF8DkeHAs\n7yE5CRnY3CBT4gXRcGCnNdAFQC32UYYs1nfTetGf7lY/AIHCps1WlWVmCTrC\n65m0\r\n=qXb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAm+5oqQuckipkm3Xujm89rMYt1KqnWpTzEqko9m+dXGAiAhV2/MiZeTz3iFcg4NcPjqPFxcBSPt9lIyv9b4Xr44WQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0_1628575639590_0.03640994840739231"},"_hasShrinkwrap":false},"1.36.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0":{"name":"@sberdevices/plasma-ui","version":"1.36.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.31.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0","@sberdevices/plasma-sb-utils":"0.15.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"12039527da5f37d3998862e0c5c2c749f5d326e1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.36.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-lFvz/YCKyOx9A6ZqDJO9jpiwQgo1obAmd5YCAS49EYqvjfh8HNLylBsU4NjA7AkFzLvSUDHs989h9AGKdLef0w==","shasum":"5624bf438629fd2b23aaedfb410ca6884af7cfdf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.36.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0.tgz","fileCount":710,"unpackedSize":1256922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEhyPCRA9TVsSAnZWagAAnhkQAIWllI/+QmZk2oW8QxXm\nN/+zruf9NqjZ6+F9qeh425RQYMHvunp4hYCpGi6vpYAOoEMZPHeSY2q5YBub\nWi6QIINXc9LxC+lo9x+FTXQKdTAimPsK5NghTAUhtUjGgQFwX+6fVdPndYaR\ng3qWn1BWNfQCtGpL7oWs3RjI/upT3L5LaLpIM7vCghqacSWGdGSblLQbhs1F\nzL5fV7maiR/hJ55pQGy33tXoDJ8f6sMSr6mDHlzQ4S2r6T5AQJmAMNenrytb\nV3X3vdWoJEIV9Xlk/ia1Gts6D47Uiftc1RjGPGnNdtrZuNy8JuLQPqUopPIh\n7imeAJzeexL2gMIzWG+F6EjJjKwwKkLO1eYtHPV2ADPvq5dbCXCeK1vnJUJp\n43gKZ1GL7iT/Ej85Kj/i0JpwFxmIt8YOb7Noclq+ab7EepiYkKe9jxhSSICM\nLIR6gzikl1hROkW5DPkPe1BFIUuiMiGQAA2pGHBpYXptzA8wdRqq+4szVZBr\nbsz+2BSV31nu0W/+7GHqp5YtzVoM1opYQCJ8w8CH5vMUDX5pnW0Zzv3Gzi1Y\nzpYQcRKUUor4jcKATRz7a4A5Qo5gNbnj7gdMGc1TlzZMSaTi7lI8xmyN51c7\nV7aaNzvoL8JxZ8z9h+e8zvDdy3yoSU21GlCbVVXt5JUsRRThCWFts/tDu5G3\nOIAs\r\n=TNA+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGTUHmrG1uzT+MkQ+z5xolT+nW4x5h8hVteFcNMfQtjwIhAPajL8lwhMmiOmJQYlPod5nFD0eXOgDRzuv7nyDMhp4k"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.36.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0_1628576910847_0.025251009044517048"},"_hasShrinkwrap":false},"1.37.0":{"name":"@sberdevices/plasma-ui","version":"1.37.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0","@sberdevices/plasma-sb-utils":"0.16.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9a2e2b86a06fd84449e6859196be01bea9a3e7af","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-uhQaXVilDN9w6Sdsy9nroOG3o1EXrZkw7KblfO7lDn/I8tMGQYRiOvSbo/ZRtbjz5knRgWnDDanR2t3nrtL6yA==","shasum":"65936609c1e619653d545db4039e36f8ad7f5f2f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.0.tgz","fileCount":710,"unpackedSize":1259261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEknFCRA9TVsSAnZWagAAgvUP/RsQXTLw/6ZMZxdx7/ST\nmmnEFoztztYtOWqWEQcBCRZQguwzOD4xjSfPRvIAXE1h6ne1WmDmwGqjkB89\n7svS/LQv94dE/Ly4CR2vlR6jCkI9lHWD7pILxJN0qjWVh9lxTGPhbAVTa6+/\njoLBAuYOmdUqh2y/Q3atX7eItbIhGhoSkVeKb35EaGG5l3jj8Y1xySazlWUo\ncqJ0nHFVRbJYOuqFg6nO1rSVEqGz6h37ZRyHaxlfot98XzpOcfcZOdw2Mp68\nzUHerF8w349l0BuQlkliBAVu46WFIWdoDUrLbcnV8uK4+1WjREI1oqTNjcQ+\nFOGnXb79UUqt4CViFBc6yP0Ko8n2w0hTxTMdQyWKmRaYP2p4v4w7fG+Ib2pr\ngo9il5H9NcoYj4CaMrzD71cSa6MWTq752x0sv3xtaqAUwBhYe0amfPYTUJsa\nfkPKFAlVCWNOAkNppV80P6qyjTbtNq5tZdQr4wbnYm31UeXjnR2rFkPg5Hwv\nKLFHmYIspsoBmMADv0YIEJAeOOk54vYGypy4eyFz29q0dB/dqEAh0S1IexiU\nwqpbX7bFaVi8O00CfTjWFKKqt7R+Dhhzwl+s8bVruJVI5BWBMJZHVvw09hEN\nZPJlDhPbaVYSsclSIGtVjR6ihEpsQ3SalYQ5jgdL7B04wtU1if2bpgJgo/Jv\n6yg6\r\n=zAAi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyUlv6toy96tGyCESX/Tn5PT2F6x/WROaW71D5r6sT1AIhAPUtnzzPHTHA0cHHdXgMNkXrP4f7FQZbfK9ZYl+jsS+4"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.0_1628588485670_0.654861347707919"},"_hasShrinkwrap":false},"1.38.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0","@sberdevices/plasma-sb-utils":"0.17.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0b550f7866d3097a57bc855caa2098cf69ecc6a3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-AxmGta4+BVB0l2l4szsUzfFO0Ew/QcN8j+MsnE/Mh8SXhdd2imfa3X7D22bQEWZnzdvlurP0iwSMOs9Lgo//9A==","shasum":"dac4bb4c5685dd510be64c9ea550dc04ab3502e6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0.tgz","fileCount":710,"unpackedSize":1259477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEolSCRA9TVsSAnZWagAAmyIQAJ2qStK3deX+nX5mY3oF\n4Xq9vEtfN4QFwDoSbJeBhqPRYzpHZI7gV2a11fRmyQasOJ9SEo41szHHO7Kl\nj1KP1ShsQd1/1JBS9liO4g7vymmG2ryhateM5n0Wmyvp2jni9AQhU+wDdP7q\nIXD1GHpNGuvpDQOBv472x+0dJNNDqE+YQutCvSQ6ksPmDVzC+zuo7ehAt4Z+\nWde/Dpf0xmry4krYt/nJq5Svchs1hAi49oI/+rbu4UETbX7+niJf5rnk1r1S\nbCP+4ZSWYJHb+I1R8l4rE4qotNF98iy8+TkfxodW7xzv6WnqPwcfSvlH0QvC\nwnwGsTbCsZD+QGy0JYurC55podUga8mxNT+DicWQzgFH/soK0uWkXUHoNfVZ\nBBCBoeW5XdO1dAKI9k+0qZhYadqOpKTPY/mOl0fBud3fP/obYwlWn188h9YV\nPIxvP4WogCEHGYk+dAxtVOpb8iVSb/KWVUkR23W1wIxisNkX2p9D4Bu5+0cJ\nez7W9tKIOqaJgIyvFFz0NqkJ3jQaUI9UyTGSKHC61mxIjuCdQk1UwlPHscwa\n8HWbf+997q5RtKf8Djd6xkBRVpKXgmCv79Vz1v1Au5yCt8KekS/O3HsSDC3e\nqjTKxQBFltrP9a6e/DCudw5TuX7JT98ZePXOGmiMfWZIMlYlXFs4I7AEqCf+\nY9+h\r\n=pjOt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGJf+qQA+deaauh2XcB9SiqCUF/eDJ7iKMbSgrKZpKpQIgD84myi+K7IGDAB5tC/CrmI6076VOFwor8Au+cxyvNTs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0_1628604753940_0.22448512185999459"},"_hasShrinkwrap":false},"1.38.0-canary.584.8fbb837db08bad540147027998bf2da30f6e5b16.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0-canary.584.8fbb837db08bad540147027998bf2da30f6e5b16.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0","@sberdevices/plasma-sb-utils":"0.16.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8fbb837db08bad540147027998bf2da30f6e5b16","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0-canary.584.8fbb837db08bad540147027998bf2da30f6e5b16.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-ovL4CZojvgyAK2Jl8M796G/qsehKveYIJPVnyysp62QL0fs5+nM0T5YNWGYRvgeTHgj4HzgwOPzIXrYyX+1kkA==","shasum":"fe1861fdabbc940290b1a70404d854613798f83f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0-canary.584.8fbb837db08bad540147027998bf2da30f6e5b16.0.tgz","fileCount":746,"unpackedSize":1370176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEs2zCRA9TVsSAnZWagAAVkwP/0tw8nkYQG3SOgj08B+r\nF+eQPC/lyN1j2P4NF/gehStiuAJr0fg9TX4K0mXtNlKcQsVgVOMl1MJGyaHz\nD3qyvBtBquU5DSAy7zWlsqbzPQV5F/diuSqWy2lh9u1juVSKnXqQGB0lzQ+8\n4I2VhjTXDDYYCiH/A643Emop7QrpQy4tuD/V4xkrKJWzKkTJsEGUF+qF1+YN\n5BKMUqq1Q0DdsaOzE5UoXmtkbAN0IPL4Pz16xvH8ehXtQUBJB56JCkFUVm5d\naqlz25IeT4VywZrYq+SWeFnvL6hs/JpMGxxutDGx3kT+Mc2GONxk7IjObwo9\ncA0Q4whVrEsGREO5Rm0rCA0TOtW667HS7zRUexUC3Ardz/GxhJby2jcwY3Tz\nCePcReNtFoiXpXfOBW4h5sMv2oILcbVD8Ry2oKqoGP7ryJHFD/2Tkde6nVdi\nUfIyBUe7MDpjSmXXz180jPfUQb78d2z6avia0u60SxHbtLZOY5S6pXZyLaPv\nIcwR2P49KqxeVzeznTbePHlxvYWGK8BHunPdfcJpv/sHMjXGmBpgoWK66qw5\nxc+CNQKEF4diVRAcdnR8DhJtWTc9aa49qaP8T9Pt7JGoyXb0kENp9OpVzOX3\n5eRBnRWeYfevSQ+gioyDpeoPwrGudhu1eP1RnoVvAeaitLQwD5nIikLz1z3Y\nYZQ7\r\n=r4Gr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsikz9OObvvBILJrV0hXv7++SuflFVCMjhDDwW2GUVhAIhANWpofTxBziYGtWVQ5h+2WcTVrMSYBfCR3yRbaMnncHr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0-canary.584.8fbb837db08bad540147027998bf2da30f6e5b16.0_1628622259573_0.07037696991731557"},"_hasShrinkwrap":false},"1.38.0-canary.584.50ac8e69f749caad5efbda618ab5e259002f0d46.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0-canary.584.50ac8e69f749caad5efbda618ab5e259002f0d46.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0","@sberdevices/plasma-sb-utils":"0.16.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"50ac8e69f749caad5efbda618ab5e259002f0d46","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0-canary.584.50ac8e69f749caad5efbda618ab5e259002f0d46.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-KRO7GEUHt/tfm1G9kiNfjnUC6gdZzyPFxSC0yIvni7Bitxy9zRQutPUVkI64qMJUACjj4RuxIkEEAa06mFbdow==","shasum":"cebd7514681fa49c3d1909fbfe57b9abc0219c0b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0-canary.584.50ac8e69f749caad5efbda618ab5e259002f0d46.0.tgz","fileCount":746,"unpackedSize":1370176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEs3xCRA9TVsSAnZWagAADsYP/iPJCk5VTe1ORCx84aH/\nydzUTlhuFusUjqfjclsMV3Ib6txBP5W03V6fcbyjTQEwpNTSQIFvKMbSpBcF\nxiQsUf94yjm2FJ+i48dylIWhWx8fjNfwBUuiM0/kH33iHYZLv7fyDg1ylsLF\nySis/Xqg9Kqt75AKXAp1lQhoEsCGyKQAL2pnlcsUtvpa4TH4V9L/RcVi292b\nqBX+hOPsTJ1Kfw7dacWkalgKu6qZd2ogpJr3JrotjIqx1W5yY3vBRMspuDDr\nt7cmxCQw/dzQMY0OmNelZEoj8pkkfTFj+hLa8xb3pMb9XynjhV+XUhqTKJn7\njfyBGy3CTk3HhMati8SqrluMOtTB/PZZMtzw3TDoWOWNqenpSmpVUIggLQ0R\nHZEgPvjzGN85vyFsVzmqik+mNGY3S3ejvTCqnqQXFR5sLp8PpIwDE6NyR85q\nzIFjKDGMoPFF1bqMrTyCW/cQFpPZcCKO/4gHvMck9ptyrK+eA6rvS8g66RVv\nznow44oUKgBSLjPyT1EgE/kYaQqRkZGNd1OPZy4arSRcRHkYSaH1PqUT2ucL\nttsdb4Mj/285e/+w63S6/ZfZCNyNN9ADB1QkzuIMWUqBgbMVcJGkTtJgvAlv\nmxH1dj2W9UxbykN4DbDY1+y8vXc2fUDSs4OTjypOvt4JxXBHN33eiH6zzmPR\npE5F\r\n=RAYo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD67eyhqq9RoUcrAAfIe5t1wP3lCXT2yB5Vkbjoi0WCCgIhAPFEvE2xvTqIrMIiux9QACg9sXxQtvJRWJcwURuhvUzj"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0-canary.584.50ac8e69f749caad5efbda618ab5e259002f0d46.0_1628622321239_0.34808678647518665"},"_hasShrinkwrap":false},"1.37.1-canary.634.cda8a4817bc2da30bd161bcdb4bb9fd74f1e3154.0":{"name":"@sberdevices/plasma-ui","version":"1.37.1-canary.634.cda8a4817bc2da30bd161bcdb4bb9fd74f1e3154.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0","@sberdevices/plasma-sb-utils":"0.16.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cda8a4817bc2da30bd161bcdb4bb9fd74f1e3154","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.1-canary.634.cda8a4817bc2da30bd161bcdb4bb9fd74f1e3154.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-203KLB/18BQDdNnpiwn3hHiWjltMPTg5+Mf7SyrRPTfrBMO10uQlhywJOK0yCzBtMaI+Ot4gdDIoUHQ2jvG74g==","shasum":"6f9fe5c153eb4602b2c604f31a8c51a2857cf2f7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.1-canary.634.cda8a4817bc2da30bd161bcdb4bb9fd74f1e3154.0.tgz","fileCount":710,"unpackedSize":1259413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE8Z4CRA9TVsSAnZWagAAy+YQAI59Vfk55IsFleF8yhl0\nOIEHzHA2Q117kEId6Q/rpeo/cu4p0xP5TD2TQqIxfMMGpAEsYepSRGVSKqlF\nwqXUCAbdTSxxeFkC3WqnxBE9V0bcONq7g4lXwgEtqrNbG6Kx3M8CZ11hAYSt\n+kb7Tkm9c3lPlmTUvaH4OJm9Ija6pDZggHd6ukMQuelHssFt88CGZLIUQ4go\na6LxFnjpq4dxzmOWr+zi/7MFFM0a0gn9Y7eABFlxvRToEwDxLcx3yx2l3WnG\ndQk5L7KeoRqrPJYVjdHz7tIcnvaSuAOB782adjUYRMMyh2Si8gaRyMtFrseA\n1/lOCH2zyLUcV+90/VNNUvRjlwY9otaSeinqkhCcWchaQiEUCRbcuetINKzw\nquQd1/xGfYqa7hCT6KwtMjLwsVsgK/a7S7xxOi/EL6zlpwJeKYHBnvUJVmcI\nJmsBvfEMC+2+yVhryubbY39ZuVs4XtcKbFNYJEU0IkRYOAXqsMytA/VFK53s\nywZdU/Zt0kExXsfEQyX+EIa/VYRZ8lzX4FnWFvXnrJB9CewZqIm6ArfL0pEx\nqqvgq4DE6tYEIWpfvi6WrY0KSkt6I8lxrLHbNmVXv8sfYXgNyd39qcCQz20p\n33H+Y6K87ioT3NmgUpLXKf4qdYP2YmdnH3AuP/k2f0QBBaaFp+ur/urzPNRM\nVq68\r\n=2EPv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAD2i1Fq15AuL2635PRJ0fLfMd5W+2sbWhfomdNsuCNCAiBCYmzScDq8fTEy75/lRAHtUubZBoclDj3FIbPsV23wNw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.1-canary.634.cda8a4817bc2da30bd161bcdb4bb9fd74f1e3154.0_1628685943811_0.25448880708843014"},"_hasShrinkwrap":false},"1.37.1-canary.634.57e6489491d2be780168da93dc80e03d469bce74.0":{"name":"@sberdevices/plasma-ui","version":"1.37.1-canary.634.57e6489491d2be780168da93dc80e03d469bce74.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.22.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.32.0","@sberdevices/plasma-sb-utils":"0.16.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"57e6489491d2be780168da93dc80e03d469bce74","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.37.1-canary.634.57e6489491d2be780168da93dc80e03d469bce74.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-Pp8GI4BkIxqJcFD40q5AohykgaDoatO6gAp0g2JtSO2Qe5bnxdmVcvzTYiqTTUJ6j+Nv0k01mUqOHbQl+Yar3w==","shasum":"ae084b76ff6c977def7edbc7de75c74224c32ad6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.37.1-canary.634.57e6489491d2be780168da93dc80e03d469bce74.0.tgz","fileCount":710,"unpackedSize":1259501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE8yZCRA9TVsSAnZWagAA9eoP+wQ/PtMLk+RJERA8M7bl\nmLeWANKKNmg7cfoO46tpd+QBrTPI/V06hdsevXPafoH5cyhRERDW+J97va/8\n/+sP9W3JrVHIArKpGD4Be7bKTfDheh4nFNuGA0vndm1Hf49O9h5eVS02WgN4\nY3a6rby3WEB7aRq1tHYYae7Dv5KMIqqVV6dwWzJI0jOvD2Zkw18U7k9N3DmW\n63N6cIqG8RsN5OGhfMR1AdvZFebDRT8JxyR/WzEj+WztAcu8aL/2sONphpBR\nBfot4+0eeZgXpTsjnox3s7pkt/LXMaNvP/mWrX1QOnkbSxv61olXDhJG75E1\nX5yzRZES7UwJJWcWKpuc06Wi0iU2KzdkTEzo303G54hzVMDU4s5j8gWNaLWZ\nodZTKsQ26lclBqy/GEXtCSK97EAAtHR0Rt8Bj53E4HNAAkzCU3vnUlLpNIAA\nBUoXSZHiPbPlhydMCwz+Qb+uvc3lcRodr+SDha9tgqAtO2v5LlV+wuozB4N3\neGtCS0KvKA/rDp4qDs1UP3o7k6lJmDyBz/qt9nkaVXpQvxMJnga0VcKFH395\n1NK3hwa75O2cSTHLc4MYHM5rcdXWt3Y8bgroE/TQKzCYP8XzEN/nXW6Idme4\nFbGgX/LHR9B3Ez+sZ7jN0HpFVnhr2+gQ27rsEcEYyUlPHzHO+40UsEvi82p3\nfUfY\r\n=+n5E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqYzk/71xY5JO3SLsW6i05hLCdp9eKuV4JdzmBOG0wsAiEA/PoKiAHfZvew6xiKOHuWfyc8X/H/FO/4R1FbUvhcYG4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.37.1-canary.634.57e6489491d2be780168da93dc80e03d469bce74.0_1628687512967_0.3113876703546641"},"_hasShrinkwrap":false},"1.38.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","@sberdevices/plasma-sb-utils":"0.17.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","@sberdevices/plasma-tokens":"1.11.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"548add975f5b266c622c82c7938940c34dfe04e7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-fu+1VyK7y1L0JlYKYHN0m5+6B3vqzRONG8lLm3fR3N4W/LtmsYf4ytAMlbRxTLSHghzAcSY5nFwkQn/7SOXmfg==","shasum":"5646e4c6e93609a3661ec749fa5fe6811a5731c0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0.tgz","fileCount":674,"unpackedSize":1200832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFDx0CRA9TVsSAnZWagAA1WUQAI7vMj6EU0u7CuxadTsY\nWBUAiK/B8hIaF6qK/W5E7fUJTYPLD1jJ5qXZvr12HzoTQbKBSYufQgJVJXFL\nBuY2KDWqRjdUYJUFg4oVZHJ/eknsxCjGMA3VLZprs3gqIJUfkwE5XU5T8U1G\nrNkwXql2syRn7RE+Q6UdiHFCbluqdJNM2U4qPzqeJGd2tpWvFUviQMxjcFYP\nKe14TIf4+KnfmoXGO2wnqP6ExnvdpC435ZmtKxPYZs82HTZhEIVxFVMnS6yc\nCFGtMMWOeYrUh8WmBOBW5qXwAx1yjmi0QmyViLCMfHzMUzvOkGy/6OIFr5QY\nWMijEvA416+Qb3cL5zwVtb6kDj86drWrPqSvpuwlBjFnXMnhwYImDTcMAh5v\nL+6COR12B3/iw+Vnjwg4PmVoyMijjqqPS8BfIfmKcEWS+g7H5MqtMvcHKRAz\nhoemwg0XrxiajVjGkuyShtJSXbYxi5Hn1nBOBbKrJqQ/CFgJisgJYymQSe/C\nMA7jbeqClg/02Zw6mh693l0Zx4IdU2iPO0w9Nk/66SM5I4tp6S3cALqOJiyu\n0dWbqRYhQGCwJRTzhkqj/BkFJVrNP6dZG4V2gLTxmqEABtoxmMVH8awaRK6S\nAO+Z80k35QDqzxh3nokT7Lc9M2FwHddUW7ZQ1iYh3aT4zVvNO6PO9cU/aHhj\nsjxI\r\n=L6mA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEInIFX2T0Zq+H5n6iUMEV+hTxX3A1hFKwbeAH2jD4RuAiEA/rXK2Q/cDnN0wNiZpV8FDA0EL6l5sxd6LWd5U8jj75k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0_1628716148569_0.9806474257804028"},"_hasShrinkwrap":false},"1.38.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","@sberdevices/plasma-sb-utils":"0.17.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","@sberdevices/plasma-tokens":"1.11.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9c62fdb39631aaa19bbd38555657121510cc7f3a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-dMkmBjw2y+kbp8zw3V+BUuPAVvhUDx5yfRUmQGwGAPMNTQpiurW0THx4smSFVQ0YSzaUMWKZ9R2EFgkjUWzKMQ==","shasum":"e79a5b35cfe0d74a3b7bd797e0748e872739e20d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0.tgz","fileCount":674,"unpackedSize":1201076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFYPtCRA9TVsSAnZWagAA8MMP/1hjnYXR9E/RSkbAAdqi\np/M2/wIaV/REYYcaHwgBNpezqLQWzkYvf9ovIsi/rT+xUOEnhvWWBHkckU01\nKwTv6Tsf5+lIvg+1op1KWX0/vSikkR2nm2GTuGgpMEz8XTmJccMAJ48tVzPc\nX72zuQW/C7eiuynvGWzwnxUhVlCERX7wLh2IfGJFjSH3JS0/xQ/ip4zu6B48\nE/RJwi66NhuN1AAkC3jqGDzkuII2b0+dhowWN+KK0c9ovYW3EiPzGjiWhx7u\nuu44HKB6QzlIQ2tcNm9okvxbaUapsoGHg5lz0NGejl7+J6SsIh6Xzbixobpf\nrig9Y3bHdHh6CHAHHUXEz0IJkmecw8m/a8sFlAWK8dDAPB98sHs/xJagDIqa\n2KcblwKLmgiLFNIalpHqYNgFFnr/OTrAUfGRy7XTZlXwzqro+uhwdislcMXg\nH17xzOqnHsDYSkcV/t0BLcxihZ9CChAI5m2aDQzU5Y4e+tg+7mjvP7lFtSAg\nOgHInOogZu53+7kKo+cBY/PbZ0elxP08PzL+clG1MiwtCDTbrcHyUMSxfXUx\nHNKXd/mTgKmoSVw/cq+6ztk4fls0SMyb2ncxcszF8hpE1Ye3+jBnQPyuItzW\nJiy12M9nDyntytxYnwyCkqMGmvYiH24eriWIYeFgW0x9buLHlUI1QKfRpwib\n0NGk\r\n=Vonz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEH4hhWpKwiGE4WGjlYHM3VBLCF2YBz00QS4upT4Sx+AAiAOk0BaO28fZjdkWm+0fuevNFoVdiwPBayn18VJ3eCQvw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0_1628799981005_0.5579450226616978"},"_hasShrinkwrap":false},"1.38.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0","@sberdevices/plasma-sb-utils":"0.17.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-NJFiRQwR7Kcq4ryUa7pmARtnvKxhgwX7uLD575ZlwTd87SO5+aSKwxqgZDbHJY/+n4y9qtcnlna174ppnJbNTg==","shasum":"7316647b39cf5fdec3cf245535cda3bf22bc4434","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0.tgz","fileCount":734,"unpackedSize":1305403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFmuTCRA9TVsSAnZWagAAS+0QAJu7oE+6tZyWRKdhAKT8\nla4R93vHW0fXOmOw6J+G7FQrZSHGxWsc2O6USsE7pI66LfC6VARiUjmbR6xF\neIEdNbSH/jYLazYYAcLH4oYq1u+g83kKhcHH7czTgurhS70l9IR+uxgLFrvh\ndVTuoVswXOkosrHgQxb4fSexUdi7cDrbVpVP3+O44djveORNKJ85k2V7AMsY\nYsjIEQa+AMyJC7J2cC/ovofAe+oAjZKSzaDhA2mYlOlIUOW5843bmQ8hH9z2\nnduYAwnKORMNFdPsfLVXxF47ws6GZrOa5vQjFJlw+Ggl8jH09CEZ8TmRdml8\nfLg6XZH0EEMXgvbWdthdxX2hVD+zWG0zxPJ/7UV1LKxS7rdRKry7A6rkxEpx\nBoOx81OYAXdNROP4KjurErgT1gg8Mi+zNgg0m3WOlztq7gN35Tq3cjgciv9x\nUAZqOZa/jJ2u2L2C4gq0xoDnMZv2X/24Y//+2K936L6WA/zp45O+6YPp+sc4\ng/KfM6OTaM4431TZKuVYWx1PEkwPllWvw+l5LYDHOCNg5j8GZnMVkpx42Y1b\nR+W6gccCzUQW+xzfuNEcdGBOeM9I/UvFomXM8kQciA01iiP3RBdH6YkfQZOQ\nYUDGgLYpaa9KUjlwXb9WYVQWcA3VYt9uRy9MHI2/IhyPHDiyPGdX0kHu5HY4\nTPHl\r\n=qfHv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbwArs4zgTsNo3/dXrmYfGYPTgL1WC1wTHTPXPwwostAiB8w5EouJEkGw6m/1s8CFdQJ/w7g0jPSFa19aKLz25gWg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0_1628859283176_0.3976060671340671"},"_hasShrinkwrap":false},"1.38.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0","@sberdevices/plasma-sb-utils":"0.17.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e7a351c320f68c3d4fac756ede6cd837d48fb4c2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-mbavv80bzwieo1TTGYV1zU6rFq21G3HsBmERSoYz9AvgW7BuzhLvztrcCtqEFVmDpbvvFnNir6Kbj+HIdoFBhg==","shasum":"0815cdeaa4a6dbc7465e141a33a72bda5ccdc13e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0.tgz","fileCount":734,"unpackedSize":1305858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGiBPCRA9TVsSAnZWagAATJoP/30qLF6Wig/RFhaoGzG8\nDAhA2Q5223bbTVrvYzUlspKrpEZWTnKtaCa2IRP0c3D0XMK+fuUsYAM6lKV3\nuKpOmn0M5XYUPsTtrjK2berKphkOYIIF4PzPijoUXHex+jgkRZcz/Kvws92g\nw9qtvLKMtMM4gl7amZ2xPZC60MzqmUnjBLTI1ZvDwxC9oNcbb937CCReNaq4\n08TOcL+xGeMbovC/Twdo2noLDshgiw1QTaZ6QqFN8anSQgdtQfD2f4b1RZGf\nDy84AUQKqIJytaVf/u3UsQ9Y2+LbQkFxyZxfIm+D4pSckdOSod3mhuo0PO/z\nxlMEcI1UujxBzrrJiKwjdXmvAHZBGoe5lJW4T84QNBGM/3yc7kRAru5+/9nX\nYOBSR9urdYUrf8gTCm6cjGj5bII1NBlXPtb+Rv/LGyuAAgEzOYnVCq0b3JvH\nhheeP3aCpl0acOdC2WOrekdEhWdDC5V6iHpkeTy0/n0sNhHTd0g+iD2AqPDv\nc9yE2CgnacwV3D9q+q63gGuQLUBmPp1fmDm12zAoUeHYPd0bm/Vo2zmazpBA\n24sOP5c3Eg6IaVOsy3OMtLs9gsjt0p4w7kd0QcBNPNZKxkHARStKMcdX3AaQ\nC66aqlBYl7+DtA5g5m6Bu+dPQCdlz31eJYc7Yzt43zQCc/EuMkxCvExDrR1B\nZ9kN\r\n=jI4u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArESDzo3KNdf8OCo7BHTPR8Tpxcpy6ONIc/glp6lulLAiEA9DSMXwOQJ7xFbZ5dknTFR5vHcmmkKudIAt69JGjgAEo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0_1629102158785_0.8534257344359142"},"_hasShrinkwrap":false},"1.38.0":{"name":"@sberdevices/plasma-ui","version":"1.38.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.0","@sberdevices/plasma-sb-utils":"0.17.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b5c3ff357626251e3250f7fd57deb1a488264371","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-HXAdymm/AIwDNGvVu2VYV7ZjQVbFG4sfMFlq3ogVFCPUBeiKggjaBZU/OPAG3kimCmiLkhgs3/vwtV8RNeFFhA==","shasum":"dd7fc04fbbcb72e96ce95eb9a34a178c90466004","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.0.tgz","fileCount":734,"unpackedSize":1306215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGkWOCRA9TVsSAnZWagAAdPIP/ibH3njBtgv1GzzyEM+s\nmdMMQGrE7IrZ2lfBKY6bIFWWC2gsvXhZqT7Nt+uEkDJkj5KUlhpyDUF4npkj\nCkDefYfyZVzmY25v6zXGSKLBE09DMjPzM3oqcwwB/lO4oW2z1bjr/yeLCPxU\nWYnyRWZR1LoKZeqcp1HDlR/QD9QNQZLI/+bN3uyXsxnsrSwBVJmc2OIzSuFH\ndAKrAhvIOA+VNkmwcCg3XzW9PDaGYddxBu+RZZ5aGndqG4ceisrfmFs5OFWy\n/OaAYCUVU6NEnHzqpKXyMIb/RDXeBqltoka8KKbzYnLrDgNZvN3Cileajzkb\nQUUfWyPDsH4qJ/ZBagupUQKhNwsrgxdV6WvAtLZ+lQcGdPP3qvzS0CxYmOew\nJUl3NSSIE+4ffrf4aCbtG2XM/yoZFEY4zFLiUeE7mI+aGYhYl7QfURNgKcC1\n9SedamFrPIKwJWox1FqzkdELEDykJteTufRm+szP8Q57F2+IEOUYxPmgKr0T\nNMgFlGp2CElivcnAckcn1KusrrbdOp4akfCR+W+vRm9CoDjxRahPaI1C5Jd0\nWcMnGCSAhrxeYfCPJ1VfI0kAdLixrPAJ7pt5Fy19+BJRAApdQpA5YjvPEjAO\n3sd9HRv8Fb67Zp8OvNKgAxjQZio/JgszRxbdNxdti9J37odzSibzVXDzVHwm\np6tg\r\n=zelh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDj4I5KPhtWinOJskQzxvPT8ltn697RKPA1HjE5dMXv9AiAKxsq490remRg5uypnJeggzAWmXkKDRIeON4k4j7lvBQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.0_1629111694102_0.20622921791631965"},"_hasShrinkwrap":false},"1.38.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0":{"name":"@sberdevices/plasma-ui","version":"1.38.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0","@sberdevices/plasma-sb-utils":"0.17.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-H/AtCjuzvQjkvJf2wGU/X9B+TBnxp+fwQ3hkKbmjEiDjvkv/k+GrR4l+GY+1ox+7xTIippuP+64IU6E/hnpQkQ==","shasum":"8611bf5a91cd04db520539953db164691b28ee45","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0.tgz","fileCount":734,"unpackedSize":1313880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG5nnCRA9TVsSAnZWagAAuUUP/Ra2d5sPq+AghcdC9sK+\nMfO43IIwT4VnZL29MKowY3aKpWfyRETehokLLyskiL4soRFwGxmrfPYN85Qn\nsSz1IsW+4e2VAvQMKHVMPTaXWxTKKIsMzTmfuQ6C0vm+eKKCNqt58GQhXTEj\nsBOh36u4auXd0Vl+NZ11rlgOoRpYjIybthiytyPl+fmD+gMsHXon6TUv5yPn\niebleAto7tMpeQr79ui986e9gFsYg9vXm/l+yzqQFU2qMSWbshgkcSJAuR8w\nh6SvoKYAmI1XHpT7gZdAMTw5+wCWbOtYtHYOurefCevw/Dsu0o9Z8e1tvTYL\nw+8PnZl5ax19UwB2tiiJypTFkXOP2WKr/vnjkiC4Vo740VDzdfsBPl13mkQW\nvuOqTG6OH0usq780Y1SSBbaLnG2d7Jn5cm/rwAtGHSf1mSvy/Dv3Ig5wQNgG\ner/Ca2kiOMBiq/Jirs1OjT6Uz+qHHzMBTNxuvApZsJl+ddrJ0/nbTRrsa61X\n3odeLEaHI0+oo5CtMtu02ZPIPPyWlzlD0NF4oTYnQWme1UFR+HcdOv1UrFK+\nR3sk4drLANbpeX0mikXwHFkrgQLIqR1DCOFFN8c1oRWF+nxsFhWA12Zm3W+Q\nbFQEnPIpNOT7l4CZ8evE7oexFDZOmbIKSKqRXjXU1C8D7np2XtYXt46/2wSl\nIFNt\r\n=R4Sp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHTyQRErjXXbDsBiEGivdR46+2CcqKdTJNsExEMuLRfKAiBEYvReT5iE9RQ6xkXM0ADUMyc4Dz3WVIx2WWS9nK1MKA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0_1629198823217_0.47385839810543806"},"_hasShrinkwrap":false},"1.38.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0":{"name":"@sberdevices/plasma-ui","version":"1.38.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0","@sberdevices/plasma-sb-utils":"0.17.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"daf2688e9cb48c259c0b39502c4e2365d580562f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-fORnTlcPVrgPqVxI/FXiz3QfaKsUL+QymxWqsteS7q4iOdT0rgS03LKeNek6cvWlNqTO/wnNKNf6kYLzNAiSjA==","shasum":"68fa68b14e843a46fae9d4e3cfeab7e3593d6f42","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0.tgz","fileCount":734,"unpackedSize":1314044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG6PaCRA9TVsSAnZWagAAEBYQAJrFG7YqlmP6EW1ohZIg\n/E6q2GYt80SFYEGZDk+8dogq/WmrslPmKmEU0viPny6S+74FKNeyR1pH3Z9P\nJQGuMHIVsSP8QY8yzvj2dFEfuK+KiJZAZGdN4nuHmYQexNBg1MXD5z1x/akA\niaSbhBiuKOFsLtwoYWN5fVaLlbdUK8fcu3f+V+vQ3rkYSPDlrff/94k1cKZ0\n+pQVTlbIFl37LkoP9aYu5aqujwcW8FNS751Ywk//oT3WgZM9t+gb21QD60pz\nqNzgAxTAQUIYcMevI29fYG3YGRNTVGeLZpD+w3GRs71mDAfFFIsfzDrrBKiv\nrQh8nIqnUBqksnPqhHMLlJhdM1h705k9ngG4UH6d1og/zJV0RK7Nap6Mtbs2\nQqlKJWkz73U2PtzAlHv5Cj9VnJ9QjrBAUZBtl+jJBgxisJpvX46+pRqA5nMs\nDVsxVcc770uGtvfYvkiEX5r/mYfd9VrmCDOMqXmbZzb0XunN0Z8im1c6f5PN\nK89w0wiDBvRNftkyw0k2Nvvhrf7cr+anztlBQkZud3qJOVpWVUlldFQbRq4q\njADD74otJRQExW6OvKSqpQKlEGPhF4piHE+ag9xHGNhrbdQvVgSeuyADjTne\noJJWjl+3efrFbxi1asU6bFaAaT/jwt/IBvciZKk79LTssAEaH/sQmBhU9BK2\n0SSo\r\n=AHUm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7PZe4erRXrj806acc1lTGEqQal5Dag1JGLyWVsGKyCwIhAJbVviMMnPdTME0IIHjEvdT/ngp525ea1h2kuPDSYGtb"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0_1629201370367_0.9047186776862108"},"_hasShrinkwrap":false},"1.38.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0":{"name":"@sberdevices/plasma-ui","version":"1.38.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0","@sberdevices/plasma-sb-utils":"0.17.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf8a2e482e08439ee85cce27b85642870221a30e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-hPgQOWOmfkbkQ+srTTol6TmG8OPzUKbpQk35rvZz4oMjjvNKSEVNot1T2bG7OQjzTOAlJi7PeEGmBjfeaNncdw==","shasum":"9bf0d55261b2c017d7a8869cd0eaf58f502053ae","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0.tgz","fileCount":734,"unpackedSize":1314044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG6TxCRA9TVsSAnZWagAAbZkP/ipk6YP5gIVSdz8fih1Q\nhuG5A+Jy9oHnb2hJpgx/B2eAHYZo/JjR2ENvb1VF1uwrPACkJkjh5oWsTR1A\nWbSmR41t2zVxbIHn5xeMv2NTDRW5qp4ko8dizX6nFJgGLBfoIkG/invy9CGb\nhIg+LEhezZrVNL72JMtgRv7JJQWOGgIw0xrzHGguVwtTKH6pr72xB3jvek2X\nEGxukKk4RhYWq6SJq1NvyiMAU1wXksbSyiUBeP59I+HGwxGoEmKlo2ZHoo11\nbRqL0LofqxMI2FBbmPjtOL6Sd/Y5iVW2Wxyg/WxCa79JTE0QQrSMjGMK0H/L\n5gMq4x6KyKIsZoVBR2N8DIgbZmHtXZmLaxwE0xJa9XbkpHBLHbMsFKYwWuLp\n0VYFFCe108B3yQrraVZGd8XjNTb5qzCtPGSXQtWU45eGiJrsn0YPSD1iMupn\n1870CQY0NnWDGGyDm8N67YhJTe1OiO+zUbOiNjT1lplg2CHTTyrcHtSc4K5L\naePlIR9Y3X7hS7j3270Mr0LF0k6aUFB+i8o41QT7LEPlhIAcI+kFwf3svGig\ndTsoWSJFTc/qJRf1QTr7O1C1f8V8FtMyK3j/4aiIAsPOrB+gWO1LVMXfEtCG\nRANqyMnhfatVLMUIbd+eWoNqa32V2kFM6u65Rjs2S3VpsaeZWGH/NwD58x2m\nQtP7\r\n=s54R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJM5/8J+ypdRupL3fsQnLRSiGuhRgPGuaxSSnHaPhdAAiAlYN6Y7e5SFFOocyQLxslwEb38H9/WbkEKjC6d00mGvQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0_1629201648847_0.8419977029959831"},"_hasShrinkwrap":false},"1.38.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0":{"name":"@sberdevices/plasma-ui","version":"1.38.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0","@sberdevices/plasma-sb-utils":"0.17.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4bdd90f37d94cd9db958bf6a887a9172b83ecf19","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-CFgM3Ld51oO+jegXcLVN5t/8ZHwoHLdJVBqIA3SilxJYpgeSNHjr6fxCtDoUYxI3W9VTq/dSH3oiv/+aPvwcYw==","shasum":"f1277eb74ce45ceaf40f16712f47f22aa815205b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0.tgz","fileCount":734,"unpackedSize":1316479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG7tsCRA9TVsSAnZWagAAymgP/3tdo7fUpOOdYswEeZjY\nhV+Y3IsAnBGBNNXAFFk6jb7a6gfiqjWwYZ4AgDn88+Oq8JUvcyG5+RML5pgw\n1Wj2Z+l65aT9UAs5uEkS4c7de86WY1VEsqASCfNy5DjM1RQYrmhPzsGCxugn\nzZ/BbzBVfZFMVWyNs5lOJLVn860gayU3KJ/dwCS9nfm4w++8/6K8YrSNTaZ7\n6F1QtwmrCbbC44/Nr4TJoh5O9IxK2U/CBlQiu9I2EW3WAvG481Fn6cFiOFRI\nJiUkRI2A30t2gNsNe3o7BgJozIY+Nkq4Wjg6fBd7zpRfCnCPtzzMEbtk1B2h\noUlOSlzk4yPAQWxAxR7Du9CslZFpQkbyJ83WlMgbVLlk3c3r2WeqL+MCE5uv\noXAriPvtDY+Gm8cY/GUoc2TetUS2hBZ4kMJdL18yMAo0kGlomFallgsqHq5F\nIcRY+cL+O+fBqT8OHTmljEyMTxzwjQuO/1haktwRH+IadsEo5/LMXrlDTvux\nDvytEbPOIgupLTtJo7spsQoGwP6vix7SmIOIRL2mpy3C+fY//1Ht5am3fnkr\nSmMUvsEhsEODC+LP9ho36Ngc1rSNb9d2vZyAtI6QhUpu+7Fz/MgT82JvN2tp\nyiZEE4iTeF7lGc+fLVIfoak5rNMxqZmw+89kudRxatTTet87OQtIvI5KXIxU\nStyN\r\n=dJIR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXL/MANiK4T6QGZc9p5ThghLO61OC1BlR5eUYj5VDpwAiEA4+eDPeQs6J+ac+Do3cIiLzi68Bpb4UkapyWxEJ2VikM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0_1629207404614_0.25103345058034"},"_hasShrinkwrap":false},"1.38.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0":{"name":"@sberdevices/plasma-ui","version":"1.38.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0","@sberdevices/plasma-sb-utils":"0.17.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"86edd578271e94efad5bb931a4c581571443d6c1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-ENxgToGkh1yRVyjy4OMH1fBLO1fX8UBSkySzF3V4ZdgNSy3W7sCFuu/qI6V94eMrrgTN2fJpOz1lei44HHvfWg==","shasum":"fc3b30fe181637d5bc50575f6136c9330167d9de","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0.tgz","fileCount":734,"unpackedSize":1306563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHMGTCRA9TVsSAnZWagAAYxwQAIwbbtYJVUxMUu5kpUTQ\nLKExN0F4UV1dgNHaq5ozkEnnEg0z/5Y3aePpJRz0VNFOSqOj1Cn7qihE0ghM\n6hUTqtxVd/9PXyr7bJCWmM13PqYrmhE1MOpMhyTxEbDdmmCzoQFV06LX3L2k\nI1hiePVJOjPGc8rtsugjwN2T/g9ZEN/WMEbBAhs4Mc5dVpxecQP4pQ5Et+e0\nGVsE8wlvYUebz28PLiUgD1CEVG/uFglylgxNCf2OkLN0GDTdKEmNKSSr09BJ\ncfig1YN+TZiD5pSbmHOyGOuo9w5hXQZObP5QdOSOV2VnNqjCNDh2YLu9NPfB\ni6BtwlrhWBJ9eZ/VejbIgh6rVWumtoB274v3Sp1jyTOdVCMsSfRDcL2UIvl6\nltpamEzoT9mMwDCHacJmhGdd/ZlUce+Sygc+NBPvpaA2bBab8iku4j+NLCFm\naQM7Skqwdin4Q+mM0RlRL/gXOc+AXUyAsWAQYXO84EgCdlqEMdpfTUApYTTG\ncIrAWXtiXhYgRBGMrH7rOfG3CVUA3zzyqOZSU4kgk9VgwzerKhGKMHi+8DwH\nrgYHLdVFcqDB4Ux01jQFJyv20q2T+dJDhiinnb27obWdADNaXTGaiwqcwyMR\nviB0NVQjQ69ADMQj8db8u8xGlCW9FzRNp7UwFLnncumjXW/SWbbMwrj2bDiK\ni+jE\r\n=1yHn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnnpTm15+vdORHdG1F8KQRpL/NVL5y4aANTM7JrFU/bAiEAy9qUPcwZ8baDCRARgZFC2f3iVEv6UNAVU21JNlEzviw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0_1629274514886_0.622583382460832"},"_hasShrinkwrap":false},"1.38.1":{"name":"@sberdevices/plasma-ui","version":"1.38.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1","@sberdevices/plasma-sb-utils":"0.17.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7ee8deee07fcd80e2f95895b0ee88f063fa26580","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.1","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-GDfngAC8ar+6vFo3oR6GeYyC4Sn+WYd4H38XuIsA5uetnHAF+X2qZYaQzP73nuXqhoJHQT0l2/uxVl2zdkCMwQ==","shasum":"d982d17f249a621391fa1d7640cb0ed8335ee93d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.1.tgz","fileCount":734,"unpackedSize":1317129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHMQLCRA9TVsSAnZWagAA0WsP/2fuhmmS2SzqEeZjOcxD\nyphrgZl7VDlS7MJYA9Cajh09tkc2Z4tZtcLoLXJ69uQuxSzBEk7P2vpKPHDD\nNbp/uwctdJCp2O+MffilZj+FrhNOBmCbe6fbnY/TwFeXeCGEbRCQhGuxwzF+\nDtjdvWnmUEyn0GMQOLpcU3l8JgI6n99mbiuG4ZbyOPWmBQsRsOna139+6VDP\ntNL9Fb46cF5wkpbj4fAzMpteVCi0j3QI+ujOX6F/2w2J8yRmTlMf9hsoY7CF\nCCMSbfIOIsDcvMk0fhxtLt+g/xJtYJ+sRXGrAAdE1KhJV1ABTDCwgPUH7SDn\nwqsHoXUrl5JXUML3KtyDjWOtBC/LHnhlubKEbh83SPsAieHZRW+m0Maxj/Cv\naPbWGJ95WgrC6RcXpf6aAHICZF+Mi7cPMnSZA6ld/bVvzmyCdHzvIBObYjQ+\nkKGoEJmbB8us4ITPp3fGrRwtw0f9qVEXPeK63pSSld6S/7esFhnrXYBbuj7T\nJwZsxIwYujyT4xiFj1U8Goc0RCEFKiFvtlm6oydfegdRYoZKbTgHXi7i3pkr\nbc7BN8xvQNZZgyO/n3DxLqXPrVlPdW4lr2T9mQGgfnOLyTZynUD0pmpgFVTN\nMSdIij7X5uvNBZWBrjzrUp0lDeHctt+1W5kUh96ARpSU7EbdSl8yNr5t3RZg\njoCL\r\n=CpkM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8zOqUUWFdgt9PnvV/hIjN2fcqHS6v+9iJanKEz+WyGgIhAJOl0fNox+D3J241MmFtfsPBbWtVCf6SaObXoLlnjh4O"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.1_1629275147103_0.4360425613731431"},"_hasShrinkwrap":false},"1.38.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0":{"name":"@sberdevices/plasma-ui","version":"1.38.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0","@sberdevices/plasma-sb-utils":"0.17.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b2783ee26a2757171c846c4ed4a5906ed80ea48c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-tw+6/oPpvkcv57CcCveNB8tb62Kiq5iqLszmdnwop9kKbzXzBwbywFT1foAsPsUR6K4SYSfzQ4s3lVRIhRvTew==","shasum":"5bc7bc424f1bffd6090ad0812c66b2ead74b4330","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0.tgz","fileCount":734,"unpackedSize":1316665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHMUFCRA9TVsSAnZWagAAqp8P/A+tXCBzxjoQK1Br+jTy\ng3+cuC+DwLDwixi/hkhPip3JMpfjPu64EmNnU2QoyOlFap9ytpgaGnA2Te3o\nsqjynmq5EBMrHOzI+TCIHoKcR+NjCcP5jYaKh5+nyAH01yJy4/1t8FcSghlV\nCjIYKxo91F5ogAEdyyDp2fTvmLuSOy5LwrhFTrB1Kq3O73KAWgYvl2nfMwrD\n8bfT7gdd2mWh0strsoNvUWwZBhSdzcWfzLRRqJU/wlCkpbOToHZvzo5NDyBR\nbjLE5f2OUYk7OmgRD0KXD/4bV20cos43W1DOr/Dxq6tkxGl5h8XNyA2n/P7N\ns1ilwXf97zMi/W3bftcm63WvcM/XHHpZjg/zLlb32VPRSJXrUy41/dzz9xtk\ndkzwGnJLFq3UCa8jTRWrN/6Isl6RSv5LZbJZJyW6W5qmtyGPlK3JVt6ZH1IZ\nU5vUYeIkLsndLC2WA3KmBRzjlpOvyXHCH2pqHw077i9t9ZdjV8j1DXQwQbXH\nWC2ErGKF+W7+yzAn54S0wYgf9DRgxul8CqUl1+WoHSAIQaSJjDKrNXMuZ2Zr\nOvn0gqIw3N6XdyH573/DPYxkZboWcdJFz8ktfCBI3gqpj9+WNawrbnqCi7w0\nJ7ZDLmFDejcYOFX9h5KkguYr/9ZFb3xqPQWSpBcT9TRHrN9wTQv2ExxweT0G\n8BEW\r\n=Rwu6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpmuWUd3OlwZ4Bn0GAzNgLgivBRZdyyCpV9aJp7Nv6ZwIgHgrikj5dwTjtfaZSqOvS/nry0m0GwJ1sUroR9QueSSc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0_1629275397664_0.17114592579520038"},"_hasShrinkwrap":false},"1.38.2-canary.634.86e2eb91f1d745a363e4411278e14b67ffd95b33.0":{"name":"@sberdevices/plasma-ui","version":"1.38.2-canary.634.86e2eb91f1d745a363e4411278e14b67ffd95b33.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1","@sberdevices/plasma-sb-utils":"0.17.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"86e2eb91f1d745a363e4411278e14b67ffd95b33","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.2-canary.634.86e2eb91f1d745a363e4411278e14b67ffd95b33.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-mYOmJbXJYvo4wa8TO+RLNVc6i/UhjKUVsqrGb7SVjJWTqPv2meXfL3MYuT+j8HEkiop5gPU2IBL0KNr2LNMPQA==","shasum":"2a3759a30f262b8b14fe8a3de673870e92b1a5f4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.2-canary.634.86e2eb91f1d745a363e4411278e14b67ffd95b33.0.tgz","fileCount":734,"unpackedSize":1317369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHM4BCRA9TVsSAnZWagAAUG8P/RPj4KXp4xCPOsZSXZKE\n35wa1qmUkR6mx+hi0lCQujZYgEIkWL14Lbq1grygZKgGjpbmcBRMYcsCF8iQ\neVNIWTOBysf9kpDCMpXPGgvR8UHDFBwolk4FDWqrg6yNfohsEmWO/og47qqm\nbaCmtGApixGZx8iFR0wnX0D3TgGhUbAMta1eaLtYcInPbsz5WKM66WmMPvwj\nnlFGZgSRO/EWgpp1CYfG7B4ixhWuD6rg8yQcjny/7pwMLRVzf9UlmKfYDw5r\nta/h/SLURFc9UvEcP2WEXn06j2MojmH9n6Cu0DvX6TrHnhI1zsL/OzXoHdod\noBT6y6InhH5zQW0T50h5fUbpT8VyaatI9+7jdWIg+E5+6VrvnQpoqjgpPDFM\ngFsWdbOeeM1t9PWwagrt4p5jvC742uBiBUthe3oKGQ1xnyzWmWn0A8a378QS\nocwwpxY/5jHcHbgP5wU83Ol9fat9cAF2NZGMc8fHn6DeLvmFsqfmz3OIuLE+\nVH1o6HWe/HD+ZMeJlMCjNKZeG9y8KGd3g0KISFvedy/ugE6aoAr23gk2tX/M\nYwFjWcLrYq1Q3Ywh/vQIZlh5Q7VF0JweEYJeQZD2i/iML80SOOAvQRbPTA/K\niPm28r5nUz0rza7Pux2XOflAMNi99A9XUxluwwEAc3qsvUeCP/thN7ekyavY\n1AOb\r\n=xv4c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/6/sn2tdXEzpSPeLSCUr0zcER+f3Bw400Nj9gKrVr6AiEAt+UoLLGYFMT13m9kPgyIM7KXhFNrSsLt7vMxXddWWDU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.2-canary.634.86e2eb91f1d745a363e4411278e14b67ffd95b33.0_1629277696741_0.37175216540243516"},"_hasShrinkwrap":false},"1.38.2":{"name":"@sberdevices/plasma-ui","version":"1.38.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1","@sberdevices/plasma-sb-utils":"0.17.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"baa2646207179bfbd1d424a9a89209ebe1857e4a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.38.2","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-ZFexCP9LfacPRRIlkg6AZ4OH0Q+JqpRKKYul1KwV+Z1ZLviR2KbzTTGKAXQEsHO2Erjbq5l9RngtdbXK+LaTpw==","shasum":"853fc9684764fba2963ff717fa79ce0261376a3f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.38.2.tgz","fileCount":734,"unpackedSize":1317757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHNCaCRA9TVsSAnZWagAAWvMP/09Vr3VKsc07Be4peuhZ\n9k18jn7zFJnQUfyTG4DwvVNkP42l2AtvyLP+EBtV3NuknEHT4dbkAtg7MY0Q\nV0VHQzV388ynYVvmDwi9X8q6iMUPUptwe1psV6ZSA1pb2UFWIDcBC4Kb2rTS\nwiNdyjxqUiJv6eDIjATg9QJigiIqrm3kGB6vhWVwGT/l4u+WoiLFvBcY6dGd\n51gn/mHUFBBI7cpy+T9NjIFQ/qKUjZxlDjkW/iiOLyHOm9a9gGrhcAclUROg\nIFQNgD/DbEqMOIfZajjwwj+Fk9LtC45RwmzEvMct+Lpt092/OUuZTPozumjs\no+xXcOsfVEkodQLtIaBfU4ye9Kxj7Opz5X8MHgtDisjkmDl/UncGTmwcaFIy\nYoq4BF/SbkVUCAmWI7yc3dscKnXbz8c2O2oD7Qfvl03iu46Igx0iiQXgDLBv\nVfGz1dasChMAHLlIWRj72pzlTvGiVz0qMXtNHYRqAQY9TtQ5wOiLgCiBB7MC\nKED8Tdg2xSjDywSWgZxA49Ah+/ombvJH3r5x6vMr3cVdA42DU9kKIXDusS1s\nnHFlMXiHlU5e9FH0O3Ft2VZMAKpSFzvc0KPbrfs6E+yefcZconx5BWTaB977\n5sADDKXwXR8JJuHqUvuw+zpLTMAcxzDe69SOLJJZnGpQ9qPRtzCbfWpm5wVO\nmorT\r\n=RD/9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5YSgi12gcIP/6PWuLjeuMsXnfCJCKVlKg0c0jf0wGwAiEAxqkJuu+VeWKyplahe5bC0uDrElVCkCkIBrS7ihma3Ak="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.38.2_1629278362018_0.3763612795529565"},"_hasShrinkwrap":false},"1.39.0-canary.584.4dd24b8a56b93d355c2f6dd80e7c15861888f88e.0":{"name":"@sberdevices/plasma-ui","version":"1.39.0-canary.584.4dd24b8a56b93d355c2f6dd80e7c15861888f88e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1","@sberdevices/plasma-sb-utils":"0.17.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4dd24b8a56b93d355c2f6dd80e7c15861888f88e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.39.0-canary.584.4dd24b8a56b93d355c2f6dd80e7c15861888f88e.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-aiFJZBkcdoDnvGC64FLrQlZNnqmfBhD6JYmApKR26iD9urAlICPDVhL12nN4ABIVbHSgqbezuWJcFvsBUNLzzw==","shasum":"9d53a493fc57c49b31c6d42cade628268305376e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.39.0-canary.584.4dd24b8a56b93d355c2f6dd80e7c15861888f88e.0.tgz","fileCount":770,"unpackedSize":1428672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHNJnCRA9TVsSAnZWagAA6BoP/R0cnC21VBu5PK+G4DGh\nssJ3kOfHka9bv/fRnOwAlGvSPIE0Y6Plm9znbVuXIeBk7ptuvMZW9rIb0GiM\n2oVbkWLi932DmA8xiN+RkM7UtBS7zIbY7hUz/epBE/5YwQBrV5nv4BDucYnW\nUHvHzscq2Xe/A/Vzx3a6c8topzkMrChh+jvH+Dl1MglmcPeMkksgO0iKLDwK\nFAXKy8UUthiyH3FZCtNNlw2lLWv0pTdhO0ym/fjk89mSo07ZJQUl6OcAbmnN\nsuCcBwIArNqJw9O08fEEEVylZyrArUJQ4xiuSJB+bwZ7B+wmLIc0EcJmBrRk\nwxFfeI68d2P+Pq9Tc14fh4aeJqTpvFn+5wi1pNxXUS7/4KforEdPb7aeZ0rB\nirXDgjo1+LOMouHWSCwzXyZhvCNb6cZ9BHoYcPAo8UYC5ov8R0v+FHTd8+yR\ny2CrJ9hmkpFRzI+iqcbswkMEKHi4q2srdUWQ10cN6e5jOQlpjG4AhH7aJL3G\nMAEhGzHXq+L/zU0v135TVLAGKCBL/PR1XJ9MgOR7q+nFqC7Sovz8rzm0rnn3\nJgD4PLhinlqhnaFE/WHR70q1BcAZCmm1k2KCMZACev7nYCt+i8Sja3M0yzFU\nmqXSJ7C10nGigsSlchq7FCYPsA00bLHlOuUWY4EIWXesAajFELwqBYFay+uM\nCoRp\r\n=ONQK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+3bEYAa+lhz5iNw5BeLz3CnJLyfmPm2ollQtA/9Gi4QIgGFQcnG9/Av+w4XUDC5VGfitQa3lbdyyZNy6JIYJNE/0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.39.0-canary.584.4dd24b8a56b93d355c2f6dd80e7c15861888f88e.0_1629278823672_0.47011107888467785"},"_hasShrinkwrap":false},"1.39.0-canary.584.30b8eb7e5f99003121635c8de591bf0764474916.0":{"name":"@sberdevices/plasma-ui","version":"1.39.0-canary.584.30b8eb7e5f99003121635c8de591bf0764474916.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1","@sberdevices/plasma-sb-utils":"0.17.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"30b8eb7e5f99003121635c8de591bf0764474916","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.39.0-canary.584.30b8eb7e5f99003121635c8de591bf0764474916.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-QEzwC8vmPW6uswMsdFzFv9ApXXp1lv8AVkfZtXtalcBbnAt3ZQrTPswfgcm2bJ2hsbIjpE8J35qcV8dd1mA2jA==","shasum":"09154f094461ac727809e168e2c1257483780167","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.39.0-canary.584.30b8eb7e5f99003121635c8de591bf0764474916.0.tgz","fileCount":770,"unpackedSize":1428672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHN1WCRA9TVsSAnZWagAA+lwQAIeT2F7t/6H8efnhwE0d\nTir40FYw/caspL5IhfUNsS6/UvkkMjeEZJ5QN/U8DaEWOubcg4SjDNd5vBNt\nwVDi7tsrM8SLTFmnT4hevlAb4xspSRMgaTQ0+9mYLoFbn5iyIA1FKVNsWXK6\nI2/DJXdOgcQpki2K81eug4UCd3UkMxdATDPodBxBFwSa1Yqe4FTO4N6LNxPX\nod3E1945qs4kUcAgEduaJZeUpJC9KjZ5OWij86mFb9Js4nitvNXeq1JFDf43\n6rhdGHgPK6a+SiR104ZmLUm88I8UV9NM6rf3GbSIXp/bDhqx2HzugB+tsjOp\nIBD4hFpbvdD8jrV0uRvPheF9q4q75NXwA5WZrttp6OA03y0n/5rejP3BZTm1\n1lbehyIk3I3wHBhNWDqrweQwqjeBGumPQ4zc+1E6x3lIXIY3ebCjhxXdMhxN\nk1f4Lq0Qb7mTvGBijxd1LJIPEtK96479KDh8iepecPdswor41yEzu3YkCn3K\nJac0niv+Vv+MnZaosB832zUgQxTUcAyq2RBrTkQXm01t/6mUZSJtkeo98+/E\nDHvdMBDbd5kzwntV0SZuh96usokwR5+OSbswFUuKqQPt0GDBMhcRCFwYCz5r\noZAWXTN31fjn0fIBnLNFHKPgvigLt0FFlXR2F+17vc+CS5doiKf0TgEWTMX2\npIof\r\n=JQjL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDamy6iurffNFtbLgMErNwqnGZYwJsBD57ULnjRsIq8qQIgONqDFBvZZ8inxq0MLXKqRhUvprc9djNsAI903bsQ2/k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.39.0-canary.584.30b8eb7e5f99003121635c8de591bf0764474916.0_1629281622263_0.22171006892697775"},"_hasShrinkwrap":false},"1.39.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0":{"name":"@sberdevices/plasma-ui","version":"1.39.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","lodash.throttle":"4.1.1"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.34.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","@sberdevices/plasma-sb-utils":"0.18.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","@sberdevices/plasma-tokens":"1.11.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"640e8bd2f0e4546f43609a6ca7bd075bbd1ad669","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.39.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-SXWLoIZOlkCO4IimIyIh1UpuHpTcuNndBgQapRSRRtp2wIs/dOe2xvjfcOz3Ei6aoweDvC8u0KFrcL+EEXtPsA==","shasum":"324fb3490aeebc9b05ee06093d46e7333e8fd72a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.39.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0.tgz","fileCount":698,"unpackedSize":1259572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHN6VCRA9TVsSAnZWagAAXf4P/3CfMMOZZ/Fy0G3cQvZI\n8PTxqKa73EsfAR5IvuRp++j9nbk/ltChahMNbIbth3hH29sH/PI7miTJJbuG\n8/FkXyeUU+SOASwR5I2XgJajHrbyJaomvoWSYlpNfujfu9UdAlSWXTlNHFz4\njDaOcG+q2NxogyUKLZoz39a+DRj1jk0HadzKAKxHFH3PPh6onIoIz4XK+Bdy\nxdQNpz2Om5N0xaQWWy4/XVf2U66vnfhJxT6roFwVPNAk23mOiHCqeszTReqW\nXA1GNt2sFlZBsTNPh/6hO7kZWCsp6R+cT53wIL0LS8RYRRrmFFPHln30E7RQ\nZURSFJRjbaG2VwR7VJ3XmR1vudojm1bE8Sujz/vdPWZnMs8mdrAvI0j4EYgi\nfmC18VvjDcBhKTyPvio5ag4pCXasjKHBevfHu/nDkbpH0cRkiIazR+h0p7Yd\nBvOdBuzRiD/tZzSo//YQm0WMN7YND+wEkxPPoilvwIgiTcb042Rlc3F1D1bC\nuXOnuFrBksr/deHpO/DrkB+0w+E0qkzuBffNPrbAa71yFaEscw1pU0qBvqrM\nyDFTCsefpoW7GiFtXNgRn3PBAP8XivQscTb1wBsBXTQsB6V7gnSRJ+da/iK6\niJIykNBPFW+2T1mfIdvQjP4bDBIAbLG552V/ZhGJIrHmCqM47umZZZR5b8WJ\nGXA1\r\n=z3yq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCotpKyA9Kv6JQwlUJE1dvaIKPzGDwnnKtsvpvgKllqBQIhAMmC6fh/zVb1hWd2Nz+PKjlI8zSYP4S0N6tNw4J+no02"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.39.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0_1629281940917_0.7929128843547277"},"_hasShrinkwrap":false},"1.39.0":{"name":"@sberdevices/plasma-ui","version":"1.39.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1","@sberdevices/plasma-sb-utils":"0.17.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2c85d1310cb5f7c7827fc10961cd9bf45539f1b8","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.39.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-ncZaokmzdzrMesdhC5bGvCChL+I7h9iTleqW+yZ+Prc1hb23Ht49vq0J0m1kDZOuYcKapN5zH/jik/1NLiHtQQ==","shasum":"32e60bbaab420a37df496fe472666ac55b8548f9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.39.0.tgz","fileCount":770,"unpackedSize":1428894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHOENCRA9TVsSAnZWagAAqSwP/3gOrbjOsNdicvjLtbzv\nobmGIM/lU5GgDfoQ0jFCyMMJ4ioeWCNSZTK/IqyhQ2GsouTQ+lj747ibvJfR\nawudBLoTFzJyLd3FwkXb9152BN1fcMrI93grVtW3gDPwsp0LdUdBesAAbVDq\nBb25u8wt3LsXWr/Id6OCpKFAVB2DTQAsHPDkBXgJv9FB8k546uhpBG0+vgt1\npHClzKdWw1qenINKtTNDjTw/EmeqmS6TGi8+7oTZmwGv9Lb6kaPnPGIX924l\nDTj1MqfEw6RDNjCgpAEgUDBy/qp598zcoU0z3uGLIsN3T1UV7DmWjd9cqN/R\nH6B95gOY5yCcR524LsfZ6RM4LgmtEF4/hJwZxquy0VSSKxKAGKDBThWGXAY8\nSNx8N5ybORjHqKJ0Jl8XQMfLzvaggfV7NNQ1waKUoMw/oT9Ypb8/EpYMajv7\nS+mS05X8FdA6fJDXxiOsFd259prioodNDGGGuH5qpQ4/Az4E+cqstpMnhkjo\n5Fl4ib+kztKBwowlV2lggsvR1dNgLKPPuivUKKBB6Dti13XMDxftGO/ExxRC\n7mckCe8Uswd7IkW4nedvSEtemaFAGjvGRry1Hp55o7xSme7AgtWiH8MHeVNM\nxx1Vi3GdNF5L7EemFBONE2pNRkQkel2jVJhDt3aTzwKc6kHpMDgwOwCIiwEb\nqQlo\r\n=n6uq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbbLnGg5riybeFazZAICJm9KlYLTH9atlU8VCQCndRfQIhALGgTkuFapxwz71izZYfJw1nlkhlPcOfovBF/6pMUebJ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.39.0_1629282572966_0.6165761151621536"},"_hasShrinkwrap":false},"1.40.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0":{"name":"@sberdevices/plasma-ui","version":"1.40.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.34.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","@sberdevices/plasma-sb-utils":"0.18.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","@sberdevices/plasma-tokens":"1.11.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5ff380d5a6c3de827e29a3ded1f45c292d64a22f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.40.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-mCFJ5uFr01hrQ+03BXv4NZTGAd0r8izYYpmT+11FNJWcDHp+YoqoRg6O2S3CIJqVnNFZ42C1g1D8H4X7sZbiNw==","shasum":"4c61feeda287856e1ecf5718aab21e829f0b49ee","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.40.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0.tgz","fileCount":734,"unpackedSize":1370709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHO/ECRA9TVsSAnZWagAAcdsP/RHJCA8CmaqTyNRh88RL\ngAC1d3uxAqTJyEpfXU1Rm63uSKxoQhvhtrPiKqzDv8T7EszP+mMdfD+UuBmV\nL2L/3VzyM5Yasgs3YDIRwg6J6LG5ZCRiztLFr6XF0luEJCpqbCQ0xQzNl2cm\niPaQubcPCKQCxQOgLbLEs1+TVo2jvdWj7bPC4MMVUDq5MlOKV0VlDV7b7GmF\nLkINBSDXLdMnSZPFgmiqN0nfmC+eFPx0dPpu1OBcmBP5rQ7jb+fMO8NMAa5n\ntj7jNRLDmNWEaUp7Z9QssC31s7sBkM5HxHUyC2QrvnD65Jrbk3vAq6sN6gfq\ntyJmKmkHnx0cyGbE52VzT3/HTNkMVDBc2bFOM7LgI+OAdPzXI7Tc6qkAw4v8\n9PXeUEXFsbt1hMnfAIPM8foqm7Ag8SN7G+pomSGDOeIO9zxA0IUbvzhE/EBT\njPSSu3911cY14RYUJLASpJLn9PNRVFeCwqyJsHwEE9eAs4mOD8dWwWcXVv3G\nJZCjn5x3mtgpIn3jrVMOrw8WKQdBLCQkegxU4Vuk6azCPVDTwH/oxVv2Spa+\n7cqvY8yAeowQfI09Dngy6sA0+CLzFXduSiAlFU/xQOczAPeUcX+qt7SqPBSf\naHa8ujRoq6ihpB/wavyEuWRTG7Hrn32DYvd60S7qdXY5Gpm3kWqgOrrYU+6N\nglIH\r\n=tJxJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD9zhiZ/E3IenuDBB4JlSa45iVkVR82+Pa0lq+rMjImwIgI0+uT8F+1iakNQuqlmqF1AEtOXGlokjcbRhaYE0dHpU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.40.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0_1629286340370_0.42804829103368514"},"_hasShrinkwrap":false},"1.40.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0":{"name":"@sberdevices/plasma-ui","version":"1.40.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.34.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0","@sberdevices/plasma-sb-utils":"0.18.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e78bdc577757a0062c6e41ecd71f7d96d700e06f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.40.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-H0xrxQvAlm+hJnqRmAh6OZ/tsuV82EBnGF9N4ZVKBNctdWap6+fS+OtIBQLUqPcyR2hTdgsIqgg46S2kXijBDg==","shasum":"fe17cd3870ebb0a663289ab45a485e835e9623b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.40.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0.tgz","fileCount":770,"unpackedSize":1429110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHP5oCRA9TVsSAnZWagAAvTcP/Rj6AC4rJl3fvTBnI9uM\ncNRRNUxwFq+DtAbN/AdzAy/bKvE1243RJTmQZ401PeDO0dlzwKHHN+KC6m0+\nKhi62HWzquHymw2e4FgtkfthJu0xUQoOfBw0UfrSDwL6seLZxxwCx2U4wpGR\ny8SoMO92Uj5LL48gKPLf8zs5XS1bNWIgP33NM2FVRwjHycC7v2Js/At4H5+Z\nqcyqE1BVx+rJUknjkfY09vzHYUgnr/gfqojrQhcmatg28yN5FMDvt+3Oz39T\n1R0Ffxoe3BqwRAvmI1v2lUSgFa/6+HuV/BctE9WWe68fbRGEj+xSKt3C5ZvS\nX7NrVyNfcWqz+di1cDaLLTHgkCrmFf4KySSs3V38XfNRNX+lqVtkiakMdCrR\nCOlnXqdaynViEkgH8U6ZXlh11HXbzu5/ZAyfEsBlwHzNfP+AWdOel8dRQTdr\nlJACTkK51kFnSOVIk2RJCRap0gyvrs5hYVvWXMEx6tWqEaPUwpt9IzTrJXGK\n8uJ/KUmDFDu/3aRPC7dRXZ7xRBhmpbYfTZgeOQyYux+C2WovbU+cGFaAwO5M\nOAhR0HQYZt2Ktt//8F2Hot5NQdtQAW3bBxXiRzQmnxJTQ36+07zaIjbZBrjg\n0AOSaVpdsMOPeRZJz8kmzcccyQJpmoXMB8Y2ywlAF11a8i+s61C1F1+iUAam\nxxNx\r\n=eoIj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYHDrMnHPtpucl6/97gF1LeQcbQwAbjgwTzCn9x6Q7QAiEA/w0jjZZzZlvEeW6Aa+W4Ilg/yfmrOpuAC0fRQo/0pC4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.40.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0_1629290088058_0.6362793239830311"},"_hasShrinkwrap":false},"1.40.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0":{"name":"@sberdevices/plasma-ui","version":"1.40.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.34.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0","@sberdevices/plasma-sb-utils":"0.18.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c35a444d43e2f5bd642f340a4628cf3d36aadf7f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.40.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-N/UahimcBOXQ1xLWQGHQ4G76Zr17PtlcpxMuU+2jljTJC9UI3dW4nrW3mXTHw/c523ftJih61kKxys2suQVYPw==","shasum":"cca2d32c39c67c054b8edc6360bec38aaee35bc1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.40.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0.tgz","fileCount":770,"unpackedSize":1429951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHY0vCRA9TVsSAnZWagAAXcwP/i+5qsb03T/iWT8pdPmF\nWojiY/AClkHSfpDmE5Oh7R9b6Z1fJ3u4STE8Ya95B3vEpKE72WN9iJuLxk4r\nDN+0Xw2on1UksUs7oXu/40k1zGUwd0Cw7AeVGXF//ekc2K4z3TtfG8GfXA9l\niqo15LmpSedjc4w/BlxvRaZcx8AH9CzHdHe88t6CnR0/+/0B5qHDGcEWR2Md\n6bODYmthjtxPIIPUd1bkpYSQOAX2XYUIRxbg0sydR7i39VVNer0yvoTChrZs\nqMEF1NhE5YWXMSvWLhzH8EV7Tb5xFP1dcirFHbKhQ7sgnX/ydlkn173xFm2N\nKhY9qIGjZ349gx4DMoPt+PtwCwCoDGp6As+PavcvwFUGpp/ozVpRXKmRhKAt\nWsDOVUDI4NgXL6PzoqnM7fkDJjnz+Wg4qAZbJCDk96K28FWidgrp2+FC2jZ+\ngw2ouuhp+MzNDeNe5u4Ruw7zXJmH4PR7UAMrmBM52CLwYgdcZO+dpBdqyD2n\nb3Oj9LTp9ZgdcPEXe3Q9JiwPuoDNOFRg9NJbbD/EQ5F1BMEufGAug5ON7CpQ\nhmTeKarHc1+H4xO0wb01sF11N1BchB9gkQ6PzUVBf2ul/btb7uvUMgPPzAWa\nFBl4YA7pKFqAi5+j4jRL08iBEfpK0yZk4pvkOgp+uKpmoxwpwqrGGo/Fu5Y5\nPeUK\r\n=rRcX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAeHpDTGXVNsmauuTPPhat/3epSz+SGUG9ENZQ12XggAIhAI0h7i0ePDTUxBhaZKzFcHeylc0xUkhp+/8de1Ver32F"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.40.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0_1629326639072_0.5049073392528318"},"_hasShrinkwrap":false},"1.40.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0":{"name":"@sberdevices/plasma-ui","version":"1.40.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.34.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0","@sberdevices/plasma-sb-utils":"0.18.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9e46e2bcff93c6f3dcf445748402e4d90d420fea","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.40.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-amNntbQpahcMail0BIkvayd+hskjKsHLbX/+GQYgYthjq4bjJ4KfvcpcpsmY72DJ/cf8oGbE4yfhzb9kt6gSmg==","shasum":"364ceaddba3233e249968711c613d96121dce50f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.40.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0.tgz","fileCount":770,"unpackedSize":1432923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHicaCRA9TVsSAnZWagAAQuMQAI2nDyRm7kVBU9aKR41H\nyo3kwvNGL63sjbAgFbZT92vYa5Y6R4a3slwWYMHY9oyGDe3ZOoN2SkCgBOWd\nGD2wZF/XjvPp3adARQLefxhc7MIy4Bu1zNYjFU58PnkI/1LswB3hu8urucDz\nOHyZBym9O+JpovHNUqHXaMVpVEzTwiiUabo2lHq6AzrcIoTGhfzgQUXedMKj\nnlRqjOT9N4jSRJEm1OlBX4iWUo49cjb8RJWi3wUgp+Oes4EO7cZ3zgczyf42\nZIS7vXpXzyzvRYo4SVXEaV1arZbprCheWDARp0K/5TZXWRf5pnM0uT2PoU5i\nAENPw5uiZXO5vhsu6xn0veuYe+OmrKw/LRxo+P8/LjPVZI2Wd2cdH58Z+a0v\n6t38XdnTzL+n2hZRzPHaEl8mcW8hIt+47eltwGus2a94DOY0JrHwh8WkBatd\nonK/dOQFWpSZFU2s8l7sNaI3I45nLdoydziU/QdlcnwNFapetzKYC8xCIOrq\nHBE9tfQoH2NI/K8K5DWBVCwvLlhNqntQXg84MbtzpHxf0FTYg9TTmah4Mu0m\n5+b5YlQgyzy/36uduxlhioZLbu8dlbsJHKlnnGie7ZNP3L0vwbfzFLXpG5BP\nreds8p5voqhF5MbqNROtbyhGC/M1tqoKNvFhQm66wucvmTRkZ9ISKGWRPxRp\nG/su\r\n=t3Ms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnT4inUTt57T15Llik0B09+Modvf+C4f0APJguAFdhRAiAfno8YwfLgrskgI9Yghi+cF34W9162NLQw/n6hnxjuVQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.40.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0_1629366042707_0.030735754952619487"},"_hasShrinkwrap":false},"1.40.0-canary.660.c0bc497a27e3e3e7dd8a7756db53fb21188d48aa.0":{"name":"@sberdevices/plasma-ui","version":"1.40.0-canary.660.c0bc497a27e3e3e7dd8a7756db53fb21188d48aa.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.23.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.33.1","@sberdevices/plasma-sb-utils":"0.17.1","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c0bc497a27e3e3e7dd8a7756db53fb21188d48aa","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.40.0-canary.660.c0bc497a27e3e3e7dd8a7756db53fb21188d48aa.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-I+XSG30alXG1OBbueZ+6fyycWrxdrTB96IeGzMnvyOGyqQeDs2ZptLZbJoLkBHE0F3EaUCroiG2sAU2IpiZ0ww==","shasum":"f89b861ac29cf2b694fb1c270097006e360a2ba9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.40.0-canary.660.c0bc497a27e3e3e7dd8a7756db53fb21188d48aa.0.tgz","fileCount":788,"unpackedSize":1463646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHlJKCRA9TVsSAnZWagAAh6cP/3hW4MwRheT1nvfJXfXO\nLBEN0hFAB5q77e7sPguHu1jBOm0qrjK9RGpNrbxED10rWq9+0Tk2C2Pwhkfl\nuJVjTz53FjxARXMwCNNgXls2MHLhgQD9eyndbmuPwcmq0/K31P8dyRlWNXSC\nxSKOZDWJ9D/e+kruQKAzveWufM2zQtBIuFJMszCdVULpFxTlm1cscpBAGU0J\ntRQg/8B7vv9Znv0nIDSOW5AGD4mY9Ako/YJ12OQ0/9Oc0m3FxBhJlPAIEtBU\nfnpYOLsiF7drsZOvmvfBQUCp4Kad8PB89DXqh6+oTF44um/4D6duZFQlzcXt\njl1aOZ2EPBrDGtRSPhZko5cilhu798/i8J/K6uNbxJeYqgv2FEK25/zGO/C2\nHMjcDlxrrqMYKNDhfj0yFXbF8uUXHVSWfFSOw1EB4WG3QLabHamb5Ek+KCX+\n7QY2Awag02od1SWb8IaZxvH7sIa4jTQXJ0rDr9rYLNEgYVOsN+x0UNpjVHQO\nc5JqZXCjIfYHH0zAQM1yWbmiWOQagehfMGLZPURY6qCrludU5VJN9tLQzb3l\n4jlezvhwBs3ZVt5Cn5wr/VhK2+UDmQ18WsukwKGSWo970nUF7yu8dSS/GioR\nujcRSaBp9ijpLoesoz+0Tnc6esQX8y49HPEHNBnSL7JjBFIS2h+g98Lb+ZpB\nqiPh\r\n=zo8g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/EjI18Iz+BFl9g/MMdtaSRURM+iHxfh0TC17p/TC5DAiBBedulyLtIIia1ZSRCxCjq5Wlj3vFMKMXpKKZi/osnAQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.40.0-canary.660.c0bc497a27e3e3e7dd8a7756db53fb21188d48aa.0_1629377098036_0.33357705996107967"},"_hasShrinkwrap":false},"1.40.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0":{"name":"@sberdevices/plasma-ui","version":"1.40.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.34.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0","@sberdevices/plasma-sb-utils":"0.18.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"04a5152caf31b5e377d118cf30459e29ea53f078","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.40.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-EdxPgdl138eIxYkttSznD5Aog7CVsFsKXlYvOnZHEvX7k60clRLgS/kdrrqRJMNiqtQSumAmaTChO2qL22bXuQ==","shasum":"21d4823fa0c0acfa7e1895c4cdec319ed0879c99","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.40.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0.tgz","fileCount":770,"unpackedSize":1429951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2tACRA9TVsSAnZWagAAK3MP/i1TqBUmrnTQ2pst54Uo\nHxnPw2nPkmZnNm5dzwoZ8RICuPGhKthHbqYAB6gT7tFIc4QskcPNdl7vXG78\nId0nBLEdzRyyamzEzMLTeSydPWzR+H/us73hJ1u+CWEVUF7rgsGI0wtjg9bC\nz9JEb12+GNBdXRuVDw+zh6J899sOniSiPm6SWRzpwVzR2338T4oJ/F2JsOPy\nepBz4HGGJYhr2auBwtTTc11OMgLZadxl2g3JZdqDxszeJSi2jqFp20YnnEK2\nAJEmUk0mz9rsOwusil7/juGLV5pZlHntw3sV/ivBDRwkd/FVzCexJq+PIabr\nhvEOABBxQ62tZb4hzXX2wNhEnYisDVJ66pfADVxT8oOxl1xvbFvYd1nVbWF3\nLr/K4lV5LO8wrRoT8+HSwNiFtAYrBVHE6QOzalWdJbPf7NUM6zc0BiFx5oRK\nXvOMQi/GJfalLX/lWB7iLrB5hdTjz3SESU4xTXArP+pPHHqmYIFbK8p81M9W\nZWYpvbZtQRhnZm8dA0SsImkcc3HI9i4I8ayNNRC5ADXMnfXZtxnqxol5WJsX\ns1tiwtPRmlFStJYbE0baZiK0YJpcyZiBU4SxOpquqsZfcG1v5s2BTcasvx4Y\nHFc2EqvFPm1qy1mBRLuZDmYq9pg05q8d93ih9Y4MYqNvyIc6rv6iRmT5uXFh\nmP7Z\r\n=zEEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDavT9/aN92ebChgGn7odtgDRaO5DO9SV4qA/Av1Q3LcgIhAOE18UK+M+kQxMaq130Yi1GV/jJNR0oI+dYGMe5GeSX3"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.40.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0_1629449024169_0.33081036547018483"},"_hasShrinkwrap":false},"1.40.0":{"name":"@sberdevices/plasma-ui","version":"1.40.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.34.0","@sberdevices/plasma-sb-utils":"0.18.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"caf3b27157676a1a116ffacb0b7be9ca32c96d0e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.40.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-ROLgIojPAbQBrSBe7mFMqXi9QlbnsvCRqJ9fNd9aLVGhBZqpE08bcWKaZBnoe2P13e3pVvJ7sLXWGZTkJcuNEA==","shasum":"ab5900ac4c0f520fcf428138951dfc380eba5102","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.40.0.tgz","fileCount":770,"unpackedSize":1430684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH3ZNCRA9TVsSAnZWagAAx0sP/jQFdetYpy1WEd2Ax+ps\n9WLx3p1GepuxOF4hEraNLZdtBZI8QVcwPLZSbk4AeQawvAhK04tMMuVM2ReG\n7n5pyTOyA7PWrXQ0rJaIFKwfQeIfYpU8nchYD9/qeL/eeoxMqDpx5ek8hxUk\nwxqKSawDQln06rBh2f4PE8f6zhZGzNwhEfAcC4gK7rSSXFeK5HoobT3kR2l7\ndBVPD/MKQkPjtL9mKAT0/VtrdL3mEnMWj8ukM+UaxyXgt49MUQHJT9L5LFZR\nKg94CIoj9h0KtnBeDXSfUZvcZCeFhhdnyOJXX5SZ0skQNXRQLYf5PUTAWWBl\nxcy3K92mqB+IirKdRwhtOLYu79pex6Uos5x1YNza7Vqwjvk3MKNkcy05gReU\nV7fIhHUo60uAlt7PsAhSNuvhitZXkJtX9UILekRu/H6oBsLCffJY+Ufwk3fH\nXS4pBzV+DZL4Be05rifWHETfI8AfZyStcQEdgdYxzeTE3DNxCHZzmn9R4vOC\nno3oeCV3mXAmhzLEofH3R1vMFHtJrLiuvetCwpLnwgb5a5rR7B96WhvwNB/G\nDHYjuGSPqITaRzTzmRObph9/gzeeKFBsVu9QNUeI2DFIceJsPw/8LAXz6NmM\nCS5dERRHdaSx9lgPWKWpca3rsWGFgVVTXxEB41GeS9tDAgUmoijR/LydPgf0\n6gwg\r\n=4bBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7GXfrS7bM6ovZqcu7IhQH/IZyJePjTWpVBmnBShMOvAIgVoRYQJ7mhVjt5iyljhDT7jALFsY66pbKRVte7ZVf43I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.40.0_1629451853207_0.34184579841555474"},"_hasShrinkwrap":false},"1.41.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0":{"name":"@sberdevices/plasma-ui","version":"1.41.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.24.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.35.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0","@sberdevices/plasma-sb-utils":"0.19.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0","@sberdevices/plasma-tokens":"1.10.1","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9a57fd48afdb3b29b47f507e7faf02fd44b68bca","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.41.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-x6lUfGB3Of/cJ0/un+Q7KdKXjSKJXZMqxoLoppnMRaTV8Mpa6BOTH5DOZ4oEJXBVeAeVYu9VaNSGJBsudJNMhQ==","shasum":"5d9ad0fd1a6696f18498419432fc3fbbdf8eaf58","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.41.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0.tgz","fileCount":788,"unpackedSize":1464769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH4HACRA9TVsSAnZWagAAJVEP+wRzBeJNbyWwZfK76Qx0\npbR284BSWL7XwgAhjxHK/nqk7yBNxy4MEEDdDdVg/gU4TIUS6JqqFlHAIeCT\n6Z85T4I4Q5eKv3N+hKsURrA0q8lP/u2ZvDwo2tfTiYmam6idZ8qJgX4gZzPe\nI9XHHd67e2NHPiqPo4Lce/eFNRWKiI8h5e13Os5qBMnsMrQuPhvvoVOPtUv8\nOOkR8BQrmebWQ7+AewH36BcZIjovmF4Qwl0pPydEVPWgz1E7IeYSZ1WAwYZl\nyYeOTEED6e9L2Z9KIMbhhHsjnFx1hSvb4VlINFDjRP9QlKw+OikqbKUNwwa9\nqLCkR8t0mRu5sOSm+iDhjmqnU1rc6MNz82ft6Map1tNxzgBYIZCiHfXHtdgz\n0TvMmYBQTZT0SKhTtUeVbRI5n/sgO7kflbNUEKF0TjEButeTK3juWkpWQPiR\n95jJQOGeEfpifaZ3zolwkQ6giVGU2prTT35+IiMtXtbzz4tHyW/2BRYZ25cB\nTbPEzV25rkVWDbk3IGQm9it3M3JFo7i8I77MqfsAL3L+WcM5gCpWhidGjmXn\n4q0tuZBvePUEAzIHzf25E+10IvSSCkZuewaHTpWUVu+zAQPukzsJUzOsu1QU\n4RPNBtuwNtkIKoFq8IeSFCjccB8s3gt2J63PONsIxNiZd3dK7uhbhLB33XZc\nfU2y\r\n=J9gt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhPtESphZvydPbl9j5T1y55dZsa7dy7lsJhvX3Z7SEBAiEA8ZG8GM8mR1mHUfO3NKqfVzcMl0VPBLWNLbUCJNP8/O0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.41.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0_1629454784422_0.35269775848144946"},"_hasShrinkwrap":false},"1.41.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0":{"name":"@sberdevices/plasma-ui","version":"1.41.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.25.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.35.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","@sberdevices/plasma-sb-utils":"0.19.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","@sberdevices/plasma-tokens":"1.11.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9529cb00a93f0ac3a5421e616436186a6f04b29f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.41.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-oIjYgeYcNbwACzVpIiBNnLZpYW7vIAO37iC5HoHrncWvODq0THrOEDizKuuN5UOIghMXIcLNoB8uTBAarGjzRQ==","shasum":"ac090f8f874aecc9e89a01d742b0c9ec566ae304","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.41.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0.tgz","fileCount":734,"unpackedSize":1371997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH6VYCRA9TVsSAnZWagAAWwkP/ixiaYAtdzkW506E/V6b\n+jBElbjfTO6Tb6pS8s7ZA5XdNPuV/tc2xLdKgayULom2a07SjabB2m57Y3YT\nyGOqOeqse/y+rapfCvggqi+oTM2Hcc9Uw4csev9sIhAa29p0G1nViI92/tqb\nLM0sAAn5nWD2OtGnJYsawj/G2oV1wnvOTRUyIfC/WcA4T8T7Q/L2+54a/Mb5\n1ZS5FvxbmDTCHRnYNY4KgXQUZNgDOWfOxwaEhmg1rvl7brQdONBVnR4VwnRZ\n1mntel1VR3mJueV+pbFnoBNywLCzutXqu8ZPkHYVe4EtZUGDQRRfPF9I2dWh\nhPfhfhuQcl319qXHuh1zJgi+w0ExtdmMUuBRacKZxzJZBjwiERfMHY3flVJS\nwH/ygQXcq66LzP3yWJqkujhkHzwi4ef0636LiBHog0lAlzATMq/kWx4vYERj\nWLXFXFaFsXo6z4E+vWVmbFiNR2K4zBIwwtKb9RdUttyfK63Emv+ADaoiGlDK\nC0ooG7l3L639wtioVmysAWfm3/HLUPC1Rzqapme2vD39403KNS+dkkC7E5Q6\nTwb7xub+wcEGG+QyPRLDpfWHWEHaoImZJ0FKMOr2HG4zqK6SADzMDjgRshOs\n0L5uMRxwRkNo1sVan7FIccHuf9pzVWOhKJOTnTikHwhyR1EIBeMuQTIlprnw\ntqTW\r\n=AwAx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETGu1X892SrXlwrHBvdiY+KEXXUgCzQwIJ7WLbR5RwqAiBJvBSVEadfKCIyiNjgZSHQb+xFAHk8TrHqf1U0ZArSXQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.41.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0_1629463896128_0.7027293598708393"},"_hasShrinkwrap":false},"1.41.0":{"name":"@sberdevices/plasma-ui","version":"1.41.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.25.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.35.0","@sberdevices/plasma-sb-utils":"0.19.0","@sberdevices/plasma-tokens":"1.11.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"53106051d3ddf45cd7e91240196921ac2dfc1b6e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.41.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-62HhlK5eA9bAU6FkOdYNUC03tK+5JdyRQvKBLd6NSPumyrURVA9ohOWNSzeXiPpWS2B6WoFhd0h248n0vXQZlw==","shasum":"e5ff677fa60d4653fba804dbaddea1c3e4e0a2cd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.41.0.tgz","fileCount":734,"unpackedSize":1372166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH69mCRA9TVsSAnZWagAAf0YP/1IsoTepsK6bwKFiht8P\nYkDxG31Z9/KHjYC2WTcQCDnwinBwhlpZ1+qjRegWtG5E3m/P+p03wWoupgBC\nJoRUJOdSqvHU3weFKwjkng/T0DnW+cVX4RvBM4h1Cm4l3lbZFY0TSlYi93OK\n+d8J2o0k/uoYQLR3B/7CRCPHvVJ2XgsLovnc1ohzxlL60kxwQPbXbKqPAyV8\n74Fxesibpz2q+KGLknt55nFFLUHD+J8PyD2GBEYY8cFPWIY93bY5VclCP0GN\nxuGxyOPdjr52GwmOD8C+ajLzGpm/ar8EUn/TGBrHPuboZ/x8FaMngF5i6AOJ\nmRlP5h9wxySMvuhRAqv8BbvTuv8QNLprTUhwGPfNHN3VjtCX9rzC1j6YIxOJ\nWDlS2vm1vJ0xPhapX7pd8GYxVKAJWgHO05bgGzJoFG3/i9CLnWPgTJcngSMb\n+GdblPDbWka+jUyQVSsl9U/NOlDdtbhnrzjU2xCqn6fAmPXirDipZkbKyBdh\nilK0/Zo3u8OD8EXDgRNDZrPs53YnfP8a8OScvQfmCnmFAvxbThxT47s0r8jH\n0Bob/X7c9CNGa065WSeikLZt3dRQT3APex50CDGDiscDWKa1/8+qAf4iTuKh\nS1tvzp4LmQ/eVkXMQ4uXqOIvfD+hYH1GileC8X7pfwSt4xOSO8rlaGBOQf1U\nqOm6\r\n=Aq6V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFA0g8KgYhbCXm2I13CUXWyCtQPMuSN9zEm6SzRQONVFAiBdosCiGUVFbqJzW6cRNW0HDMkdlJg7Ky8riv5vB2Xx7Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.41.0_1629466470710_0.6452508961120349"},"_hasShrinkwrap":false},"1.42.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0":{"name":"@sberdevices/plasma-ui","version":"1.42.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.36.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","@sberdevices/plasma-sb-utils":"0.20.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","@sberdevices/plasma-tokens":"1.12.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"301116efafba961f20ac71b158c7dedef514f793","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.42.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-eRBZ/EjqAu3NFeQtVsY28E5JmHiazxFHdmUuIAyheZhJoOgv+xRdo49ftAb7pyeKzAS8ULa8cvGerhrkz38Rsw==","shasum":"4d12e91e6968dd68eb48a615611b6ab6d3f76b7d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.42.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0.tgz","fileCount":734,"unpackedSize":1372436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI5kCCRA9TVsSAnZWagAAufQP/3ppvGYbnPp8pGdK0Uy/\nG46+1iH3ywODFzlpuktjQncKoZwi3OuCttu0Mz1HZI/NfeXAhwrRoiGihSxd\nP1tDplKYQTYvDP6u+ttJq3PqRl6HocptViUxsolJcWQC4l9yBOft4mGLWTxv\nngmwBKdKyMaCOhWiWeQAEfMniI7lg8klXbkPpSzspQ0DGu56NhAMmUM1WNRk\nOg2Dbe9QPXFI732ljQJnJ3rgEcp3grk6qz+4AcERTQ6xGEbV8QIr/Ba/q/aP\n8/ZUZytCtF+GeJDNK/MdtlfDggIHnvNDMh5wRgDH3SJ/ACWJtRDtHZ1SFMAv\nYzEWP8+ZWJlqrEFlsA7oxcQFk56EEQxzg5jp/lfsZtXvpFixCQ/Ub8NCYudg\nW7W2AgvqszoDVlvet2dRVKKTU355zzIDwVwfK/uOANcPkApcr4uY8ZsmVZVb\nxGnWdhiMogufSJpq0Z59NXIgWHkfaisjdytlM/q2cjx24RYdiDfGYiukFYEs\nD6N/6B4ELoxMlyK2D5x3q+ZpW61h9Bv+PLwErZ+zzbkpUKWIn2LYSyZLQTxW\nE6mhMvbulpQBRw3BeKUE503XL1KIOwHG63LkbLsgkWoEbx7yRsJABn+70CoO\nmCZyMcp1aNTe0TkiI+jRon64dh6LtHCP0XZ0UnnTDYTOB15tzbINx6oXo/kV\n2Ob4\r\n=nBer\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGitbfCSA2f0theigTivkewnqS8cpf4VTCqJ81ElbOkKAiBW/W/CokYUGJHufxIg14tqHk73GG1e+OSiRRxM+dJTBA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.42.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0_1629722881893_0.4791047014830683"},"_hasShrinkwrap":false},"1.42.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0":{"name":"@sberdevices/plasma-ui","version":"1.42.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.25.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","@sberdevices/plasma-icons":"1.36.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","@sberdevices/plasma-sb-utils":"0.20.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","@sberdevices/plasma-tokens":"1.12.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.42.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-S67sSe74k4RDYfKrKHEKJX7DuDzIi75yiwl1SSZtDX6fuo2m2Yo9V39tgsYbEFLormSp4XMXz4lfR9x4lb6r8Q==","shasum":"9956d9ad6db8835d518bcdb7c6dc4c5ef88a8fbc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.42.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0.tgz","fileCount":734,"unpackedSize":1373799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI6XNCRA9TVsSAnZWagAAM1MQAItMKSN6GAFs9J5sK0ne\nm6TkOJSNWm9bhhK4hycg4GmZjXPGLGqkEzzYxIO3AlQQRFwbziAH4sRHmEqw\n6QwEojPwdT/sRCB0KzViIg5nC38fBg8ETTnNRGX7KXlM8PHqwUkyf7jMImYx\nHic4neKGD7oea41n3XVe7PUvBvSuaSUIjr6iVEH3QHWu+vfnb1krkry7Akk4\nQUPuQGswoJMpmFOVYgS+UQvL+jJeqRAaLypJKz1jGUgr6yQ/XH1MHz9MQwVw\n55IPmGiEBbCbrr+Eo+txYLKuH3MSLEU168UkQlmQcfaM/KFvYPZm6VoYJmhf\n5uFyHrkUQ8+6oNRefsz8NPenPBNc3RTL57JnuhoUTLfMteO07MZ4KRv05sT6\nr36Mp7UH7ddt30CY4u8ILXXk3kM52LLIQmYX6SerhzPeL8Ns6Vcw77NYfP1w\nRAu4lhJSlhWH/EtAtSwE4MPoyGmCi5FJPp2Sogz9n1Go+VyB423kEkjMyh3E\nZQBFWPuJMgyCJx4zQM9ygYLN3oTHQ+mrT5GKstvxvsVURTXXtZtup7II5kW0\nM5FXuI3wCZnZqdyCkH//hztD+j3odh5R9tzoCE4LGv5/03BrbYQpKlrInOEa\n6ALR+Sggyacc8cjhz98PM2nyZBFgwy4yninNjF3fyGSGCKyM8WdCNzY2nixU\nSGW7\r\n=ecar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmtqAQK6W2i170+KW8X2+dsqjiEeRPngW8atrTbS8C/gIgOHpyZE63yTV0+iCM1C2JyZLFJGbMn/UMS57jrybId3Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.42.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0_1629726157493_0.11033012083181681"},"_hasShrinkwrap":false},"1.42.0":{"name":"@sberdevices/plasma-ui","version":"1.42.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.36.0","@sberdevices/plasma-sb-utils":"0.20.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"739452c3fafa849a731456a009363f8b7e920d6a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.42.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-4rdi1ncppewC5AAmqxGmNj7gkeTVXJVB5TKkXfXw75sI5Cw+FwqwFoz9+WRj1fWCIsZs42Ewfu4KWX+mTiVjow==","shasum":"2feb35509c5f6746fa9003d4ab8367641c159ccc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.42.0.tgz","fileCount":734,"unpackedSize":1372394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI6dmCRA9TVsSAnZWagAAedoP/ibD7ToWP/Jx823JiGqd\nj+kfyoQUOsl9Eafh8JqVUIcNtk6bSv3XyL1y7PVVGGC1RdBJ6VHiLwJ0l3sK\nVNtuvYpdXpld4/TVFAFTMA3tNj9vTm/QIFJ4lM4BcNe70jIupB1sSjijpLts\nv9Cc7UR8qSBNrX2mKFX6cDdWtYAOLwMsSV6dGZbXdSzC59ydNPx25AMDdVG1\nI5qXL8jbo0u8k+/iBaF3+whWMgUh659ZIfZ42nKetJigfiYUA2+57JJwaV6K\ndCA9Mvat3OiBtLZsw17KjjkFNLeF5DcBSlUk8urZbOBxv5O8zt19a7bygIXK\nbZuhzZSbu5dS1HfbTJokQwGeUixNz6G2kjx7uer8fv3+Qfxtn/A4hitXwVqd\nUvpFzwkw5ez87v/6QZ5hhdErFO/YQVjoWsgzEE28lSgRI2M5lnPAriIlkM1Z\nqa4hrEDqmsXCeiXoi5puFCYvfOGm+DlrAxCajNNIp8dm11jd25HG8gg2/CGD\n0oUAdIuS6J7nk7ycxEfJp/E8z00u8d3yML1ZPW7Et0B3NWsks4MKOvl4zxhe\nrIBszH3yLYg3bYlHInapshr2XYcAsK/ufYTAZ1ROp2LrstUEFSi+sISPzndx\nUC+1rnqlvKlTUQE4lSNE/Gil9lGQ6lf/ngcksb0gCic2cH+rsv5JqNMX1RA4\najGu\r\n=jtn1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlBOLTkgMSZ4VxnLOU25/AVx9h3ArfdhhqwP1jCdXTkAiAqqnXL6cdvsVxgmpnQzBiMLLFOETx2tMRHtzYywHlPMw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.42.0_1629726566442_0.23860720995582296"},"_hasShrinkwrap":false},"1.43.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0","@sberdevices/plasma-icons":"1.37.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"37dece3dbe33bbb49d684edc5f09dbd31318ad51","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-lzCAgXj5lRwF/bQ/SLY7ZibdI4+4TvfwqWBOgiNlqWTkf+7iKxMAHBbe+XepdtAuDeU0UFMS3L2nDUhxRwXqMw==","shasum":"8750e2214c62f0f761ed2fd8bca28e567b26f12d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0.tgz","fileCount":734,"unpackedSize":1373973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI7irCRA9TVsSAnZWagAAR4cP/iAVUJkaouOQivMoathb\nHp/9vOxX1wGKkaUSTM0G/W7MfY30XJIepSJNnEXyESHtpPpTkFa85GNOgtDr\n48wOxXTDh+qJZjgCDZ/e9oShsoGKoGNWSgpVNuGGGq/JhXFEWDJnjZBl6EzO\nxQyvkIc1SlwnNzJNmqEH3V5eKfmc4iGsgXVyPK/g+Q4F2Tr2Pkfs1IWicVr/\n/Em/aNnwuDgITtUtLsc7uDNwVqjUNSJEB+tw6i54cXcnNZQHrBrXWk5iKkLU\n60UZuyJO9bnWbdrvLWUp65CVPHCduTDkkNwMpzhudb4M80Nmymx2NhBUdjxD\ncw0Pez2GHl7b7WVmCU4Qk+XTjGmH8/Zuxx06hhejRskFrvUj7e0mWMzAi917\nZ10gplX62j0DdwCYK7IzI0rf97qYTl23gNJNsDie25S6gAzH6GjSWL4BixoH\nohecVVKLVMbHp7u+qXFkjSDSR2lYUXtI60sXvkcYfpY3S/CbEtA2hFYB9RRe\nSbNr9a2EOtZe+t/H42bkgDSaMStZ8tjVJgxD+44IfCQWCqBXSIcqwQ2AUYMP\nYMpCXCq4KSK4gC4wbZloImvYsTQLag1YwcmP3yPA6bUNSNOobrPtLXMm8Fc5\nN6x2EFWXNJISzvj5Ii+nymnoexNBsHCE3qbJNygNQgIuIBhNNr8xD6EmBJZQ\ncY4L\r\n=cvVB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWadhK/esDLfhvP+Z9YtY9db05J/xNr6HpQtelUa+V/AiAbwVm7l50ryGs/8E+mU/Hb3PNPum/p7nxyq0L7qKb4YA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0_1629730987178_0.5745614305601126"},"_hasShrinkwrap":false},"1.43.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0","@sberdevices/plasma-icons":"1.37.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"310d192642a085c8129b8d412c0301499748f64c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-gO9UA+0FKe+NHHzDO76axFRDrh+IYzStFhEpLBZMJCAU9WX2hldKxkK4JWoc360AlpEGRSPdtqM0/5vw+oNV5Q==","shasum":"e52d7d5c22d136303a3ead31ffa4896a66c58512","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0.tgz","fileCount":734,"unpackedSize":1373696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJJ+QCRA9TVsSAnZWagAAhU0P/2EgPZFo9rYHZ/M0jfRg\njkUMEmG3NQRCc4wfz8poEU+PotfmUFGZX3hySwAjp86FQVORIRiOhCIFgEmf\nD2eAlagbOUHI7u61BeYP16acP8VglbUMkoqX0lQ2LjgvOzTgSVkyuXMGJUMa\nza1zy0ET8AEYH3CUowjOICQg7wm//X63FKI3CMH1NF01NNsBYz/8OcRYo2/h\n/AykCmjKBG3I4QiO5YmBvyriLU1rKEwD9dUjnDiLD0N/czUv1KI/Wd7jgYcV\nngziljojFUEH16JBMWJzn2ZmZc7/c+2gKK6sdbBgf5q8mjAiIDRZfoU4/2y6\nQwI3nPv2kaQHiJbJjBNQV3p2jeMEuIM0b+TghmDnlNlqUBctyTa07tWwyiPA\nq6+fXkooEHsggOUEUo9M4tpb6TEZwxXpawrQz2G/A9weYLPzT/vHVmq2p0EB\nu76fTq9c1AdrgEGxx/iP9cQIn1GoiFbsWq9SumxuVs2oU8IKe0jM/L5cXrpH\ny0R8Im4fR1UyIRf41GeGYOEjgbI4bBik1M3y4J5zMTnfk7fe26wdn0aXWvXa\n7rbr2DR91l8juA9cCalBTqvSj1ieqWkviBN2GJzSd4BuVlfse8xlgdmRD5Dh\n6bHu2O6Fqdj9s1FrxHvznmBjuOW50VrH2MZp3q0DG2imsxgTis1c8/sJq66I\nEsuU\r\n=xYsL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFm0fC7VX++SvdUeGLd2NmoTc6+DwBMUUy48bKDz1cpAiEAxy8YYn66+fE1YbIMVHe2ib9VeSkIITGppCrEIKGWx+E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0_1629790095927_0.42443700993402955"},"_hasShrinkwrap":false},"1.43.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9b3081a1f0707d44ec7ea864709549c3814706f4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-710jIzYH3ygTn8cdulnWonHuejVm0i+G808O7GFsSUN4inCFJqyz1WObHPW3fL2H1f2b2JCEpDYj16ANxpeDcg==","shasum":"3c50243dffe4eaa8b6e0feed2d6cdda4f543f4a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0.tgz","fileCount":752,"unpackedSize":1406535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJR4pCRA9TVsSAnZWagAAmSgP/A7UMA0JvnsCRDVXKerM\nNXWN93/tzZuUbet6WaLPv+NMzB2USjxiNz06CBDXfTCxDpoTchZ4xN4RsNgd\nMB5wxsGq/uJ1ZsJd2I4WS+UHCx5eEfHgji4dlHebugamgdaRKYr4E6I60T5k\netCM6ZspCHa4lNmL/2gtnUZkcnQpIB9pFCiPvVllB87/TiFPPaMpOF1N9GaE\nKY0QAl0/XHPcJO2925hhfUTng2w9YJZN249skwk87kBobSEFrNRzw9nsnUk0\nnGLfUiYjI4bdW/nZ41m/wLnT2a2rA5dEMMr0SbUV71cB1rXQnJaliWkf/KwL\nyjVBrjRBJHVqHy5CgS+JKEfEjv3YXxB6iNF+jto3d2SKfZ9XHc+9i1QSgmlt\nqDYDBGQpbKeRIzi54/pJvVKsDFpq3IX5LS7OWcdWMt/jfRoIpNpnrFFkt31U\ngvhgc8mt90nNIgRHxRWFH3P+fzTd/98xKcS7cNaVDQXiU32mneyIUPGFkm/l\nV2gWRLvjnd6k8JIwgRBOPUYHjja/t1U12QsEzv5GhpfzDtAUuYN0CytzMqKy\nTeOmLsE5lslq5K/n5zr+8hGcIT2cMheTkvHwOIq6FuuhH+PSGi0kMN1Ab+IB\n3gD/FAs4CsN6z/pyVc7fAqksBcTAhTFKjb9VL4c+ve7oq2xQnL38Gj23cRFy\n0Kop\r\n=lSNT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcgrxSOil/dVwEipY356ElW6su8fr8RmQbGJemhGhIBAIhAL+e8e9zBHa2ScmqcmLrpFQYD6j7LCWOfstKB2LlMQdL"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0_1629822504890_0.6498417499345315"},"_hasShrinkwrap":false},"1.43.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1aa5bfaa74e5a113239547d399f05129bdd7ee8c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-uPtOQS+kUuJKFSM36fs4Ysgj7rFEVqdhA+4lH05W8jUvORKCq3o+JfoFjAMCi7x6Cre9pgesDJbkj81gxJ8Kug==","shasum":"a0b355d5519e6ef65e917a01eb3375ea15b5fc14","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0.tgz","fileCount":734,"unpackedSize":1375582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJf8lCRA9TVsSAnZWagAAmP8P/1GVv7eHeq8KllmSFz4y\n9jecUGDSlj9LWyo6ZAUsjAVH/hyip9dzIAdb8ZiAbg+/3bktGNh9gndfDKQk\nHhOufV55GUDaViQm1zTrhIx07G6VcWLzpBEjb523wG7isZjVfuSBNf/h5Js7\ncliYggTg5b6F4gdRXh1gW2senI3fy+1StnUKbJRmpTo2zzJutTNXCZkQZvZg\ndOqOtHZl52FUYH33hN53nxKgckfZzfFqbylxeh5cM4D7ZJClsJNuEo8JJBwY\n9clVj4NdTZonEyE75LIJSNdLzFVzfCY2kcruYt5tayRP6bYFhNjjZoISti5G\nPfZnnIxMQjabqonpbIjYN7/0+7cFp8CTUPi4ijetfFA2qRG5K625wsiaPnYr\nfX0bs5Nnbt2dKCLPoVM3pr82DvOSTLaJBAJfbMxrLaDqB8pwe/NYcpmOV9E7\nJ9KggawSpoCOj0MHTgJt2yESwOO/3J5D/rVHZ0NpZQ3LsRAulgBtc6tSu+U5\nVwrhOFXKzb34rFBFpFOPTfoKMYfFcl+Z2IveEOrceXnQjyGDaXTdVXZVddxI\ndgfOUqwbkn9c6Ovv/VRgmaB1O+aBvPrq90x8IOTs/qnzW05XaHldxiTsBJRz\n6ej1fYMQMMEOfeL56iXH87cPTeUQZ20PNURLtvaa/CRVvQCKbTWywyW5w4rM\nBf0f\r\n=0Gwx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPniz7mHG+jo1FqE3yh9odbwVuklp1jXQTbLI3gOMThAiAvLDHprluNqGDUjfxZhWap34NF4uoIhyqJtmU6JemTWQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0_1629880101565_0.6259339244936459"},"_hasShrinkwrap":false},"1.43.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-0Mgrt/KLvjxF/AUwfJjCGmwPK6hrFjRmO4XyVz1S7XmrIQbnWPVNq5kpCa5mgi+uW6FqjmAhnviq6sZx24fROQ==","shasum":"6eafd5978916240d958107f7f2421afc7a00393b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0.tgz","fileCount":734,"unpackedSize":1375582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJgDFCRA9TVsSAnZWagAAz1sQAIVi3crqHi2kXuTnTALQ\nFinWbF9ajoDl+kf8vCwbWGWi/RTRUk073DP7fd0rLh1cI/xXJvoRUFMuay6B\npFoxoEZHbsrdC0by8esqGmTy7uJzIhXwOImj9M8IHgw+bqDePOszRFP7uFjP\nKtRwnRceOFl2F4ySaZLhTZ9t8iY1/3miCvjnd+AoQSstSQexk2k8YN+XF50s\nl0WEgPhbK5WJLS1Morl3t8qXG3omAxDuVivWlt1WrdA5doEK5/pBEbOxWS5A\nSz1PDqWKwcw17UpUsfJ4BPwbqzTPpYBXLK8R+8P8sDQ2IHPPqD7Ogj28kBID\nvO7OvSE407kZGwXDb5X4C3xKt4oo+Zfc7NWSqkiQVRxu1r8dnGKtT6NHDGya\nFjpBaFUBLwLp+zdQMg6M/MSU3Tyg5kCJs44e+ZQGF03+eN/eeFvOX+2Iqo9G\ni0VlFZDMdCO2Hv6K8I87aitcULxkFz8PQw3G0HdXojxq/BLkUTGgXd5OLjrF\n6pn3l228v51mWpWSh7tOEv5Smn3QGHU7WaFNzXD1BFEJBTrSMMZJD7+eHqEI\nakfCoQRsNbvVtHvS1iBJLnk9NWXdAIDtodBkwzY0/LhHg2Cd7mwlRKkLwYeI\nBnR8hFoAUVmFZZ1uSIFdtVsx7yYEnxkDiV2X2BHbODPtAvgy2Zu9J2gEwt8w\ntTlJ\r\n=1ImF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhlrEHAeXG/HZFNITuEBy60+LMODSNlOqnMlIjgDB++AIgWPMFWBoAQ5H54T7T2ZHFsRUWI3dtrHF+a+kKllNAoMM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0_1629880517573_0.3440314520203134"},"_hasShrinkwrap":false},"1.43.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-QmDI6BAE1rD76fpx/QiCEwW0DSGxT6zyCbd40TOrQmsgC37mj3rEPB4AWXaeoMGBYkN2L3c25RYXbzOckzsHMQ==","shasum":"38d16b11a6dc08e9b6793f7099db4e44207f1f2d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0.tgz","fileCount":734,"unpackedSize":1374562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ6iTCRA9TVsSAnZWagAA68AP/22539jXMEISagzWQruY\nVYfDMhw/pK0MSCzKF3oODM0TGveUDmvcW4gR10VVAb1gvIiM3+e8ey52LuxK\nAk6gz9dPaNGp6O803Mq5ygvmF5Wi0dk7yTYigRvvFk1AKuYOorWrkZaY+djv\ncdahVJAmQRG/75DqM531Wzogg8FfGyKFBQyWtd3Cfpx1Sj6oXQg5Afn7B+T0\nZxAv1SnN6juZbkygm4DbF6pRz4mpZJ9x+BMKm6UMSwE2fOx9okd1bLJgiTpM\n+N5IBtZpXorUGDDoYeJ6z5WdLbW2h5HT8wbMEUAwseQIiLqRXwlitM51ykFz\n0sIDZK8AJrnOIVOkEY5Cv8Qisl1t2jb3JAnNvFetusKuheh4jEzv2FWr+hE7\ng6I5SL415g2oQB99OmWELd3tTTiOM4CLN7UdVGkA7cI2X+hzUBGO58gXj7Bs\nbOQc5YGEJUUQ2h/LCnuz0/e4LEpOEcr8Ct6/wKKZpZG5rkeG55dJY6HHYSi7\n81DYC+e/uHroL6gRKxwYjYhSi6OJ8k4PRbA0VXWeeNlU0T96xXddMfW8bUch\n2EMmaxsAnoNeG8N4+xq9CZ63ektmukDUm2txKnWDP/Tre+qeP2J5ZGGJI4Cp\n4plcvoVDhczKnf8JylZmZ+JVOIw+XvbF6IusynsghOyP/kixwbgK/XD63R3V\na3xx\r\n=Eydm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzhBEYWe8hvGuL/KH+ViW5r0gcv8le+2ly56lpj24tdAIhAIP7VWZ0jRc7mdKeG8iuMOtEBDVtZUb+WHl3lipzKj4S"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0_1629989011147_0.9723730639578612"},"_hasShrinkwrap":false},"1.43.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e78e6fe21d868fe1675de167f327dc5863472793","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-vFPGMHeE3gJn921t3D56VEe7jW+IAJESpYCTRGBZRQ3iW5hQGcRz2FZfY5/m6Gym8mYBXfascp5yTxZuNQOz5Q==","shasum":"0c3a81bf7abd8d3a113f9838af862ee0991e6392","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0.tgz","fileCount":752,"unpackedSize":1406535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKKBRCRA9TVsSAnZWagAADrwP/0huJFbr/f/zDeyPMlSK\nCCd0iJnW/SHssuwAk9opmWKJm/1Uw7COOAEg0MDn+S9FtxJ22KBmTTHREzW5\neNTdjYZeTNXqJ4NA/txrXBnYzn8K9dGW9WuI/N8MxvHycac45jh8iWSdZRMr\nxk5BqQCNerFN5LX0zl6FMN8d9sXu4+APJRSnzrGJOtC/tJJ7NjfUipx5SNUa\nX9vV9c8Eoq2kUY3IBh3DET+vj08Wd3mQSRm4bVPGOosyoAGisVf/lBfkZN4c\nW7MlbrPatGVH1NGf0h3yzPi/d6KbfBEDcFMYWilyg/BtLrfiblvZNt1j/9HB\n0iXMmH22j6/Y85ZwDk4f1kr5XaH8YK5Q+WKQPr2UE5VaY/uzqKeMCFYQxFl0\nltXVFiARyUgbjipjyFprfZdq2166Uu0RUqMXLdhDO1gQYIIRyfY+rqUnu04p\nLvpwUPN7jxCxSpvmY1uj1Q3fakfNeJ3iXUDdWlGia0cvQoLwIT75uqLgcwgi\nbkf7wQeGh80O33x9OqTBPUzpJgbQWMeVab2g/Xw/pBNmIZhvEfeDzVhlPcVX\nWgtGeed6YGS5C/td2oFsNDGfPJvkPFupTHJFsdnsihIBz9RwvWyUtRYR/+cN\n5NNTCCvw/92jdGFf4mZhzlU95RxHwraJUxEsW1b/1LRZRnPknDTaf25CSQdv\no2XV\r\n=xgbO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnin0Lggp5qoLyLecBYrXfxrt0VrUsxtSOVViwCQuQMAiEA0+YOkUeenPEf8G6uko1cUerusRS7SociJvyVtmf4J8g="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0_1630052432856_0.14217765845397112"},"_hasShrinkwrap":false},"1.43.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0","@sberdevices/plasma-sb-utils":"0.21.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6997ce517967663dd1552bdd2ca1172d5a8a86fe","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-EwoRRUnJNN0Ih6lAhCnnDfKmR+sq1JrhBxKe2Hau2ICe/7wGxF9mPZfQOkGlZWH/ceaBIrhjR3M3yT6CemwphQ==","shasum":"16bf022e467764d10dec94ea739e9445bd9e9146","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0.tgz","fileCount":734,"unpackedSize":1372556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKKLkCRA9TVsSAnZWagAA7IwP/0v7K6L/ocYC7C5Q5eSD\na3Ja1TAA3ccX7P4l6jCqU/npTj+H6HXXrFgySuaOLTpLsC8cvxx25IgK2jZr\n4urGYuacpDYcg6HZnYWuRPSGgpb3XriZ6iDhUy24j1nWmwrmhGirjkrQbRWg\n8H1L1PrpUXxktq5v72n3gqbXsn6f3u9ZwM+HH+VwCHTSNgvJlDzeem965VsT\ncM19TRZiTahg8oD7h0JzBkRHICTvXOP05NcvCNAz9V5lowpG33a0cv2MB8R6\nzy8pAYOdCtbI3drUne1GuMZJt3DtqSAgOzQJmNiCpcEjHkRMRcfHFexQjAkC\n/0s09o6ky0w8VdpvM5u97NqcB6k88u5eLw/i/hJ5an4IpxP+kPgmsBZQcBJt\nrTbVrQIlR3Dsl9Q7OHOUuS9anYhtWiAvzHdJDNr4Hw4QkzFxWL494Bg+xxtI\nmOCE1+q8XmdfkywOZbl89RbBqWoOiXSdc9y9+D7VanNgM5TUbzh1UWR0m+64\nFRk+zcBG5Qcgzv+k4saBx89TsYhXxoNd0umSxi7h8XYI6I2HqCIRv9LxsA47\nuslHNSqQyjtAbpAZ28SJEgpCLpcJmjxnwf2Qu++J5FZpbb3dDQGzcU+CAH+1\nTQ59iS5wcr7Q9iQnA2PgXSL4nACyfqSJuFSyhrdI0HnB4Rl+PqNLiAj60nyi\np5Ws\r\n=sEHt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtdEGw2G6xecl+Yg0W5FubRbfU3afKiRobVn9NV1vaQAiBAl3g6ZCxH1pZ2jWt8mSCYHOwE4wpqzri7OMY6kHfzBA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0_1630053091944_0.8352137859735007"},"_hasShrinkwrap":false},"1.43.0":{"name":"@sberdevices/plasma-ui","version":"1.43.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0","@sberdevices/plasma-sb-utils":"0.21.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1aa8d11db3bfcd2e1a412e1de4125bb89098ac79","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.43.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-1TzZL/8puNp/o0TiIXWuug76ofMvUfWUqNvA4m9haPfLXsdM3iKTYucR4vvwJnhRayxnRDcY8YBSwzU364S51Q==","shasum":"3194fc73fbc585cb7ba33c2ba9983d5799f0d3a4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.43.0.tgz","fileCount":752,"unpackedSize":1407152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKKaBCRA9TVsSAnZWagAA7AQQAKAx/S0mHE8x6U0wFwvz\nNFpTPWVag3Ab9LjzASnqW4ps7/6HdXRWXlHArn+FP9UMzDtsUHvaf2WK2N9U\nO3Av/c5BM08J6Uy4ZNLhdntukM3CRcQqVhFcawms+c4PP4V1ZGv5mYeUc77t\n/AiD4XJ2LLbUIhoynPnP75ypptdg42KC3YENhC4r+BJecpqtNs5xH6leXUrB\n6VfrurrOmzzmQ3bxLwdKi8M9Pyqunnw1mPTfGY3klVB35VM0f4qt4GRIohjU\nzkt1HrQ8nptm+QOnU9gAkOUpJ4XFCCo8KF8kplQR4YqjIncTfL1wRkvKWcgq\nSch8KZy5DHvL+8+FuZP3pE/QGyyscdDOTlaPBYpdyIPIMe6ZA3U+Jdwkul5a\nN0CjbUrG/4LLoGO/ssBacYwoKLueZ9Gm5rlgqX3IWTLkijazUl3yZHK6MvDS\ntfRZZvjUm/x9LleutG0BbJXCGdwqvkQ+gWDAd2yHhB+yqlSXn6j5aF8AEZjS\na//ACv6qREoZpXbyPSsb52njY2ueR910pB+KSNbxQLxIe7rZ+XdXwemGs+Il\nwZJ3giLIwQQBz7bxYZWE29Vqmz1/3U9LezK+qPIp2AG94umadWsPnsQIpLk3\nAlmuRo09ZPBP9pa2xh4BV/l3RqrDYBJspVETTqFlo3Kdj9j/IYsjfdZZTI0T\nDh0O\r\n=GXO/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGIbOlDBe285CgIxmsxRIGaJ0HUt/kitflE/eCAbR7xAiA9LNWPnq5qBxA7YVQMdgG8mPUiInMBDGfwHckcizJWtQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.43.0_1630054017303_0.4056491663745416"},"_hasShrinkwrap":false},"1.44.0-canary.675.ebeb0763cf7fac55e36b258a3058582a6c073e13.0":{"name":"@sberdevices/plasma-ui","version":"1.44.0-canary.675.ebeb0763cf7fac55e36b258a3058582a6c073e13.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.26.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.37.0","@sberdevices/plasma-sb-utils":"0.21.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ebeb0763cf7fac55e36b258a3058582a6c073e13","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.0-canary.675.ebeb0763cf7fac55e36b258a3058582a6c073e13.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-1PQ9NkMIO6ddbTP5uaVgS7lwsJmQulYylbw5/xrpTDhuyJHbYofKvVBqjtFSI2xtrb9dTI+euIpzAa3i9p+uoQ==","shasum":"435c979e2556dec062811c84f1bb9655dfa3b66e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.0-canary.675.ebeb0763cf7fac55e36b258a3058582a6c073e13.0.tgz","fileCount":752,"unpackedSize":1409326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKK5OCRA9TVsSAnZWagAACEEQAKDPa4dIsgttrXYVMtAu\njeVhbk5BGYFE+B1csHOsEugzpAWv01ecyVfqQtWhzqlOg3GPaxoMVB6v3NKV\ncqBsOX+iYBVkCHwzm9okOQhnaHv9hV0RmE8bLIW7uWdt7Dgw6oEyLJVyipDn\nBov6mNJSHVNHahwjzBH9dJeumLsX1NlVHfNeiVa5hIUHNecpClRgVPZPunbk\nDGjLxYK9LJ42Npi26w6UJkjg0QQZaQJP/5KctuaYwI9KU2eYhJWFmxs7hrKQ\ntZ7TpHFkZRg3aTYJjmAhLh1xSwrWDDnAUo3eLfsgXDF3DGcp4+8AhvxAE/rD\nkaIquy3T6GcoP+/9omTih49OZPXdmR/M3ad5GO3SAoQ72iIOYc4CT6MliFqO\nD+M1bCD08zWLMY9G0FMoAoZcsAmV5fn6P7prTogZyL2/rp7YjZaXsFwp558/\n0r3Y+PCkZoDOafVIR2cVX7hsqQjQaO6Z7DP1EC7SMJGUbEytIJtf85JQKKsG\n4uFD9EY0gkO3QLuuDi/PJ/3/DE5bq23SGtalk3IC5zLTmg8J4jNgpzu/8TRP\nZJRD3pIqXM0fY7WZZRdYzKj2x2zlo2z7kpkQdiVCJKwuH3tL61OJdSCE71zq\nuLO8HtD0XLWN5Gl3WcOhl6/hzaO0+AlAiSCkelAADq+Il+iaPmEOZPoWaVWs\nQfyZ\r\n=0bes\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbzcVsJLzGG04DaWbooshKQWGNSzPTITvXI6cqPzHomQIgQxyyr9Zfpdvd6IYWtyKgMZiL4eqQOspUzGsBAJ7lQr4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.0-canary.675.ebeb0763cf7fac55e36b258a3058582a6c073e13.0_1630056013895_0.23950619369819925"},"_hasShrinkwrap":false},"1.44.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0":{"name":"@sberdevices/plasma-ui","version":"1.44.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0","@sberdevices/plasma-sb-utils":"0.22.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b7408b8126aea4d811c07717954b9da79b0deaf6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-18lIuGWXOE77YX3jA2JUZgP1L9ZQ+Qiur3mka98MuN0iiskmyS3Ulanr75U/bu89JTnrPouIIPhYv8VN/oOVXQ==","shasum":"3fd9076e976e795b1b7c191dcc8a448db637a3e1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0.tgz","fileCount":752,"unpackedSize":1410340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKLo3CRA9TVsSAnZWagAAIioP/Az1CQSDw12Hj+8lIn1r\nsDgDAPk9vVwnwMNes3avphsLyKnHEG9FCJmPKkU0d8eoQ5OXkv1mEU7KEQ0H\nCPIINJuyyt5P2z+AnVwWNIsI4mbIiuHWhQKVOsMeGEmUGYfJjAfaS3UNYjr+\neWivON4Guk/LKavSESDivGj711oJuFqOaeaSmONZiTYNW4BFNbFlw9IFnr0k\nWhE0XlpbCL0gKaZuj6zYVwHab58LfngHoHaulXWnUzbXr/sFrlXHVkJ+PZuR\nfhGduUnbU/6bH9FYHe2C/AMsGxfKzulxI+Sn7PVgl65VgvPRExUhmnmlzxNL\nQw9cNdqTPSirD0MJN6mh+2w467hoRLR8VcuI8gCmpXtLVdawqLS5Vov8zWCz\n3LwHeQJK5PS+qhOefv3GUbtgZfTfoky/Oh6JD4VYRNcqNgFFAJ8oEAldY3nl\nDo7P/oq2Rtj2FPgwr/4iOgz1nIP31HP+nugdzTV8bh2SDB/bptsKie/CoCIN\nwqZazs1nqpsV2v+/Fy2mauTcl1EnvmvyGDa3ogVjHtvG0zBbut6ROvqwGOLL\nO7E5E2TUFCy3+mHxiRinSYpQCozpmt7OIxEbzgI16NFNtzh2/AfeDzaPOo9C\nHQ5By1M/LR5CYeBccN+wfLhzz+8CTr692y7xTbCDHPH8PlRp73xN83n6G/9j\nO7GS\r\n=ghsz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg0yPt9VYYracNIDK8Jr1YGSPc6517NDZUtVYiZ7zLMQIhAIxxK058iDAlsbSo+OqOAIJMTnYZtrNqBYoX02F6q7Be"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0_1630059062821_0.841423399373505"},"_hasShrinkwrap":false},"1.44.0":{"name":"@sberdevices/plasma-ui","version":"1.44.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.0","@sberdevices/plasma-sb-utils":"0.22.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1abaa1a6632252e9f9e3cad51490061122295eb9","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-p0Q1bO2jpO0JJhe2sWxcNUljQlzY05ZtnsrzM/LHuu2ej2buqyX1lOQHBV0YmfBjAUn1A48kHRrkHT6loKr2hg==","shasum":"2eb960ac9d2152a6cb4ddbe8ae5c4904ed7a57eb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.0.tgz","fileCount":752,"unpackedSize":1410919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKMouCRA9TVsSAnZWagAA01gP/RrzL1LnPf9i6jHjqY9V\ntjk9IOPMIABqEVHIONEoQBwZhLEGpZhszAaJgxe3HclxwHs/WqwHj5eUYjoZ\nzaka2SST2o0UqwNUGkAFCJVCKi+RZeHSxgmwn+OK/i/qp96edHsuT2pWTHpf\nQIYg8m5kf0Vq0LlqfMmTGyhQH2SgjQJFN1uYYLZ3+32IpW4sUXvSWqutAWfr\nNRTDtpYbj0OtUI6VSvahgE1DmDni6eDzQ6PuwznsRHhsx/kl9MV/eRPEm1q3\nfU2P4p0fxMRBnn5ezLm5a4F1IrssoaazLEGWaSPUfR10Zy/QekfCofW32HP1\nT06aJdBpMxQxyxpIUoa0X0tQ8PdWcxEJq9kaM4dL+rxIl9nXnygEfGARc1tQ\nx3QjkHjjjJj9TEjt86us/NA6sGqbaWEqK+BuOFBzShw5XmAXNZ70G+/9nnQZ\nuJSzTeiuhDtbb1+B7NMolmimJngK3lH2JetGzRnac3KZcINz9IggClx63El/\nX29kPwqEwfNnS9Syfy8SvSlyy2Vq9nDzkjwVoDh6aqR6GapOo1iLtJ8S2Kms\nlBMyX5CuaJ/kpfPvAtiU+9u18hsqUsBewT+deZRwyW7xIj3sDyM+2fHfofnJ\nZaeZBx4cB2x3sflw1Hm+I7GKX8jZ0DdYQusbj+t648oZaxyh/acC1sqO56sT\nF1x1\r\n=1sKK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOICx/n7IifIx1uqmWWu24W2ExWpRr99DUpectAT1wUAIgevYOb8HrLP3xv1YgcCwLc9Qt+n2+DfrWRoJn2UmPJ1A="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.0_1630063150608_0.7574156471261417"},"_hasShrinkwrap":false},"1.45.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1c605998356aedd9c0f7b83302d3cbb11fab47d6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-AtAk/qb6BgM+q6RrUQIdFS4yWRwFE5FIOOG4FWUrlyeeClyE2y5mOyyeFS6rbxAfiG+PcdFWBn0OJAYKFso/Fg==","shasum":"3b13aa012c7664da94d0fe915ba7ca084f218642","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0.tgz","fileCount":758,"unpackedSize":1417173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKN4dCRA9TVsSAnZWagAAUUkP/RWovEalkI5/SbwLe5yT\n0d3wQgOjNhZPypX6rTjSbDUZPIhs7ArlHPjgirpYJcx7A8aOK9ar4THLV9XC\nDOr1e3Vs30Xx6kvePymOFyi//cXtTSYbaBwiC+zb9mNXRCmI8y033RkOwyyE\nDHgtqpru5IQsBWAPyXWrREjloQcKcC2xJrjkOvRra8nNrcO40dB6p+y+99XW\nHLTOX7ZJQJcfWyYbDIAq7bEYU8+Sj00GvmsRJr8GnR6YGGoiZBLpcJFsN3sF\nMc6aXDliJdEgblU8gqMItbLk5Lvznq7xznq9ZMQM7GYWdQ+TEjrj2FnQ/pXs\nxFGXXpUaQxzvgsjkNSnURSIVfdl7ylfIfJZDl/qdx8FLz0vt/kfdGblfK28H\nRhPV9eDCmMV8J46/gY82esY50oxVMdqqWJAkgBGd5OGFPi8eQkuXkYGAa37b\nhPAheDpXF9beg4vVRjvfB2qeZEZl924YaPy5xgXFFLnirhiPX5RAqQmkU1gR\n1POCEx1otI19PZvnyESNpDrObHpw5Rcu2am9Wnn+F2ly0IKkwJm3SCGjVdRi\n6WHrE06z+Y1aF/2N1gMGlVaqtevg8SqWtlhbStN47wrbK+LVj7ahTpu64IMl\nhVfJ9sa6QcWNV+WxvUsGGGAdBL5/GnCUWDnouVqKyzS5wlYoSYUWv8nNp1KS\njqOX\r\n=CvhJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBy2/QIfUWiuGH73ZB4X+pyjzfTdBSIlQ5m5WHvGqVaAiEA0QWxL/9tN5kMKKLurYKqoi4P8npZBOVy23A3657WY3I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0_1630068253174_0.2504218612151239"},"_hasShrinkwrap":false},"1.45.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a58bc4f3b4459659bb6c452535b3a0a11f2a826c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-lc1HiaKNbr6DpnYx0DQIqzLxAPsYeQbD/JhR9wYP6nYGnc2+hCyh2zCTUnVF1H1+38guCu5PBrK8OsmiLZdKdQ==","shasum":"9354b541e79e34c39f2e2c9172018d33fefe2e8c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0.tgz","fileCount":758,"unpackedSize":1417173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKOYLCRA9TVsSAnZWagAAjNUP/3lq/cL/0pOeNNZEJhos\neZxntW4payqWr/wvg3Jm4s689VotlSmTrNuXxh2n6auG7bwmxe82u5iKvxnY\naGoaggIdNi+sHqXjTAqR1kcyV7HGPRJ8y0FAQTkqj8tGAKbVTQm5ycqsNf/W\ng0lj3Ss9MAkCCBaHiUfQnCNx3/nGqhMZhDBivk4n5ZINKDkSQ934ksynSeXD\nDjp/azt0yyF2AOIJdTlDK7+Kq7alVUIBEYqNZEn10yTqqI7BMMhHYUUnW6z9\nZ2RF4zUEcjKHXM0MOT2hWCImzBbodK0ybhLID7YYTAdvKxTs79+x+c8chlPR\nBMASj8zOcK29t5x5y796fVqkJuuAS5r4c9AACppSCzMlzKpNb889AAOyuzum\nPXgAEV8FJjjHUtKArA3tcwSWdvHZ7FGBJ6VvUeb8mI44qHCzkY8EvdcNpSY5\nPxbTcbqn72+SkBWF/gUh2J+kiSI+kexC4EQ9zVuwDwxdlJL8i76kLotf/S9I\nlGf0u+ClSDY9FnRbt0U0iXdhYkxs6yuOtLhMyHicaQHyzC8i3Uwfwi8chiLJ\nzxfzThhbrNo20w0A3xQd2COUMaQ843UEpXuM6rQ/UikzVv6TukZxsiAlkybn\ncLDQ1a5FZs1hZwXf1oiSy5AaJbOQASPYOGAJ316TrTf1Da++n5EpNJAeTnrP\nhaax\r\n=T0Lu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDopH0p7HpEnFOikQYXUsRVhluMtVPHgV/6+bAIbcTGaAIgPBOw2XZLiY5PPJxd+lVt9d/vRf6hjBciVmfF4hKt8ok="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0_1630070283029_0.30970889579121974"},"_hasShrinkwrap":false},"1.45.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ea07b2236e3b3d896cf2949af13d5c2815cae282","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-5Qw6XzJ2C9Sjg21HwfqXwn451TiHKUTBlX6VdP3CLDNbbQ32x2rvzIv3n1qlWbmq7Lb6PUbX2Gigw45sHk7PYw==","shasum":"8620f5232a4cc00ae4d8d550670173b2a6b9f039","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0.tgz","fileCount":752,"unpackedSize":1411081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKVj/CRA9TVsSAnZWagAAK28P/j5QJwzqLF7O6Gbbh63C\nNOZfTcD7Ahh+VAq3eKJBuPK7QQHmauMeFYntAjKFgnnWw/+jX3tsYYjMwSFd\nvV9us4fMy3swmlaCaFNv/H6zsU36ZYQwyS/LKykFXHBXOHrnU5YfDQW39Pp8\ngCceYdTTMGCI1AiYPWdnKr3kYUMFdsOw/NQJwaJsJtHV9bpDA8cljKNRQ7qH\n3M/och+T7zOyiWqlyuhyaKspgPNVWClD88Zh8Li85FBb8+ALdnep4xLoiQ12\nIDre8C8FWdoixfoziEGO+Vo1ab5C3zaHsDg5hYmuMf1h6ckfELUHabCWadcG\n30tPLvlw8nk4P7CR7vV63W5r0n3bApBGCKfWeH2R2Bek4xLr8uNlr0GgF5Bz\nyQAX8SM8bsu+0JWzDrBNYia35yWFyi9tf7t+/xYn8qpK4M0lg6Wu4ena1/eY\nf6iBXOk7w69eWPmB6cGSyMONwJTwy131b1alLJgekwbBvHw0ifYcWODJFrZx\n7HhSXfr3wpazuhFB1b3UftiI8JoxRbtvzX1oUs2pQNQBkP4sSQOXBe9d7II2\nSEgpt8lebgT6qb56X0UmJ5IcOMl2cWVQrcCluYShjQyXkTF3PS18AT+/n57i\nZfGbtUiByNN9fJbENha9Yu3oPJHllNzRFo6bc7OML/Gv8uAO049mQkfHnAq7\nrMhj\r\n=CKyi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSKTzu+F2LpqqQTvlCFfONs8R8wXowqcaLr1D8aHViQAiA1IhF+IOdP15kzsCq49/iY8KZrCK8HexCflNJH2rsZcg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0_1630099711061_0.44942301610132795"},"_hasShrinkwrap":false},"1.45.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6cf0ee9da6be359171b77aa703955fa539d6bd20","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-ISkQ1/KQL0chwU6mLzkZmDWbrN3KTix+Ni3CQ7UVhnBq6Ba+mhyslStxmWQSlc5wrILujqqWlY0AZOsoSN4o+Q==","shasum":"db9e3727607571e46f26e0fe365ed6ad64bf082e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0.tgz","fileCount":752,"unpackedSize":1411081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLIs9CRA9TVsSAnZWagAAI2sP/2I+sM0BCPKhVcTgaD/t\naCHVfGvEfLVu92jgdZGjW3Nh9GH+DyU40Q4poZDF5jJHtBnDsXTYRUOqQ/rb\nscl3XENzUV9njbwO03ehjrRjqpN3lhE/mLnuUUs59dbeJ99fz6uO95qL5bVQ\nQKflt76mfUhr+qM5zVLNrhLxMs9evnz0efw9/K+P8cLIRNVO44Cs3XesrijI\n6rmOCbIg0+m3zTGJLjPRCmg0DI6tDlFMsjaWrhOasjWC9M9XxNbnzO54c5uM\nlyRd3pwJd/9PsJ8leg4gSGy7cYj+6t9S9DxhxusYlL+fou1M0MySftHBxnSm\n///FELLL2jwKx28QhHbDDk3f2Jh612qk0ILcFoL7W0LevFvz+3Wkx/IblQpP\nsuua84KH/336XCgKu4VoARjBMdVMQf/FFbXOGJfpQ1rgAI5lU1D4nI+0gsLr\nXePxttV5F9Im1p0uT07WDJ124p5IBpkuO0Z2pNX79FD/gVjFC4CinuPj0dLe\nB0wx9fmXeDeG9pP/qgy4k9K6BZb1X6ynX1ofPm5Z1ayNpswXdLlJhBL5MoDz\nmqgyNSkNzwzE84QFi6thst7tztFRwFcsnUOaLdqPll3RFeJbpDqvzqGXEjV3\nRh/ky4opq6+ERRBLhahA8d+HLROLsGXGF7NjtgRiyiRRdwCoBrnMuF579DRn\nbaQV\r\n=J8wG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaEq+8QM7IAV+vgSnjOIa8PEY8T0oVfQt/Yzpp3UZpiAiAn7B7xKLuYGnKkipgS4GBZeHakUVbCE8cu5oOX+C81JQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0_1630309180923_0.9819840245414884"},"_hasShrinkwrap":false},"1.45.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1f7111e6df6948b61a9191f5f3e125d3d12397f1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-x+Zt2f8u6UEy6FxBtNDi1nbtrS8+74xBz9/iVKd24KW+V05KJGese+mPYNUlJMP5VsdNmeqwmeA0t0ilwy0taw==","shasum":"8bb078e0e0ebfb2d2f80d10bab005dda7dd4e0aa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0.tgz","fileCount":752,"unpackedSize":1411081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJULCRA9TVsSAnZWagAAx0UP/3KJS3w0QrvcBHp58F4+\nsQeXAqm+tRxn8D8ZNspiYFKNZH7j3DDPz5oUjk9gkmWLHNtrhir71TmGAsyW\nBr4oyQ0iE8qyS6Z3qjr1u/dsUPNoLCpig8B7NA0+t+puzcPP6brPWA77zqVF\nQvr/cwb3esEhofP+z+ptpHAZzkBSCSrH5IOvuOt4dRBrQKNLRMR9cv4SSa6G\nyUtekBnw4G4sn3wl+jJFk4NkHrbV1f9XDbL9xLyKpPg2kZqfWc5h+Ug9q9f7\nuZvywk+jNHlhhRmjNOXijqVHt/tSSNIIVQWWSH5PazXXdUl57js4xScpWy3B\ncysGp/KD71qkAb2HEW3XvXuq1/qb4wsfi6EEbdO7DaL79uxSkjAga6cFdS5I\n4px+8dsVhoUiJ/vEgl/YxurViOP6WhC/YICC098Fs4Ve7CYUukDJrL0pSbz0\n4flbLuwV2J/wi21t6mdTd27JhcbO1sUgQlIkFSbn1DLrSJHGdpSJ9Axu5VUS\nDJUZxeUaJlTZ/VF95rtS9DgizJhr5k/NHt4VTpFnNhj2gWGbs2dLjQOMxmGV\nPKvoQqjuCCDWZ2U2/H5NDa1mTLxSFVq3uewruOZdqu1PaWM4Mk/hnnFufvhQ\nlLwKPQ7heKyiKt9ODP7vvIJ/0qqZknLtgNOtNQ+kWFUPN7xZk9AO49y0SfJS\n8IZn\r\n=Nz8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHR+PJe+FIOad0mICX4s8b/cOl6Ad1ktbz8zApV+ymigIgcW1je+e//Ux3UDSf/TwUHOB1QBn3XSfmMVZ3QIvCZMU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0_1630311690946_0.9532045500339028"},"_hasShrinkwrap":false},"1.45.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"02c1ebb0acb8395d6af56240819c9c490182da60","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-6h8yWcJjil0TN/grKxghXXEqMMEezwIcutV2ktmDUMjs7giwTTucKvfrP+Kt+8LRtkamsXDm6oM/Jz3mgwIORg==","shasum":"016cdba9b501f7987862b142f70ddc32ce840c4f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0.tgz","fileCount":758,"unpackedSize":1417173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLgCiCRA9TVsSAnZWagAARj0QAJ2Q0iA8JwksIW9lMhc0\n+gluyB4e/h1400OF8JKMuJ0BbmCR5Ilv46J02Y7EmL7rS32WwdwJ/sZoEmU7\nLgmDSsEXdnZP2ONvBw9NpAcLwKgVSqHDjGG1qcbJ9OzTMdEuW7CDMi/l8h5r\nyoHXk6gRiohZcvcx6JkmuH6du+S80Au0+KpmDxxIby6wyVoa2B+fhswmMzO/\nDK+XBJMnmuBA4dH0TBba8+fTpQxGo6ShgCjfVXD2x4a6eBwXRw7rcg8ueO05\n22b1R3bB111zHgB6GKLR14u8P5r+EV+hMn0goiJroMgzX28JTQKdmntK9YaV\nSxaxeUKfQHAk+pUCDbiTOSwpGR9SSuWf0fUqzVla3xHW1FZSRxePC+MzS6th\n8omXOwFgSd6wsMKhpClnuGEyG0COY/URl6+RCKNOlZwpuKDk0KWQ68crJ+/5\nt45vo4OUiz3aUQxjMganyjEnefy+CDPqd8INpnqNoAmBBWRUxkfDy+f17poV\nNRsLL+/3IYoPhebS/SDFBT7SoH5bTIburuk/WqwS5X8AXAp8rpQLiqEoQ4fG\ngEkI6U+v9cOmGhK9zd/mEn++eWc2SPErUh9TL8ZRpVtfmpUWSBTPMm9Jldo0\nhySlzf37c27bO9e26JjiDGHmYVwCVomNiA6rKvowS7HmpH1eYZ3+Vd3J3You\nLLcq\r\n=E3cU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9xh3qnmC2B2IgZdLYYfTB/ByOlepxK9/HR5kYp/9pqwIhAO3zL1/TEmo4K4XpNgRKAJFtrczbrotaeAXI1wocs4EO"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0_1630404770121_0.45747339912069296"},"_hasShrinkwrap":false},"1.44.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0":{"name":"@sberdevices/plasma-ui","version":"1.44.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0","@sberdevices/plasma-sb-utils":"0.22.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-LjGABQqS+Wu2pZ4Y2CuDdLYLWOGzH9ohxo1r9/frecLRQc3m8FxFQC3Kt5Z9h3pvS64Z6gJzCgN55eDrSCRa5g==","shasum":"ad72c1ff86b7b62c2530c4b231006be82dbd6c8e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0.tgz","fileCount":752,"unpackedSize":1411967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLiDACRA9TVsSAnZWagAAMaAP/ixq+8mW/Zv1YNpt0Fp7\nJ8WJjxEGnr1sqtxwfdAihhQEoKlinmPkjM/WfV6uDk8VGdZop0GlOHKyOT7K\npV59LfhO0DA5ZYss1Wj9wA8J4P0z5xU/jBBzJQF64ffvm/syHI1fVWpBAK3c\nNCek1mY64SYGpCB5OY7lC/6FMEZXAK0FVgdP/FtmDNeturH/EanYZ+03UfQb\nSqVgtwctf1wb5Aai1R1iX+WldJW2WlIEPA+vB+xVDli4CtbBIoLQ8djyvUnS\nTZD9utMhsTLZxPTySOtfjF117Q0+63+2RgWlLDu5JlSPExx+Ld2LHwZIkCix\nHS5EHANDLafYWzPpKOtqXwW1QvGFanWlCH/J50RDU3N5nnSKUJpeKHaSX+iQ\nYLBIKKTHsB6FL45x2YkI4S4CI/vvPgGs2m5RSmI8TjCxoBVqcmFXVo1Bd+Of\nP11ehuAHyvvVgHe4h6KFe2azcJEcC6IW8f+0O7duwJqPZCOrOGmN365G9qTG\nZoHqAoxDreGouoo4iv2LUVanjtBQqPI8LpbFVIhoHd1Y0KJh2ArSsbQRN4ZS\n3KIZMlDIr0e+6rxuyfKAeW30nwm4mVbEZnqoZbhYAJySkmXpPW/kyoV9NV1t\n+nZUwxjoPcBNATMU752Qnwgo23kZJ0n3S2ZAMl+Q7XqxrgZbjMZf5QKdTr6L\n90Yk\r\n=34/F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJq/DPMWUKnLkIdL+kSon3gV8aAEuhOnMduVWParF3fQIgTY40conjiQIljSfVkKvCKfnijersN9oLhhAM+FvRKQE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0_1630412991785_0.0728291621933781"},"_hasShrinkwrap":false},"1.44.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0":{"name":"@sberdevices/plasma-ui","version":"1.44.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0","@sberdevices/plasma-sb-utils":"0.22.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bb6175dd26a02bbdcb875baa523ad78df04c8c98","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-CQTqHTr10uQCi9HQnu1kcJ2SnqcvtiS50Gnyc353gheEOPs7zGM645JFq5hszG5RXSgs6OvoePbTHB8reOk/9g==","shasum":"a4a2c4728bd301ca6d7f8581226d493680abb138","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0.tgz","fileCount":752,"unpackedSize":1411135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLiygCRA9TVsSAnZWagAAJZAP/2Qm0kQlPNDDHN23gF49\n+zG1Vzzh/FA7GoFklS7k0lO6Q4Zynv8BnO3Tbj8XHuBUkZg2GSNhQKI6cmqJ\nGbN7UNlSX9Y1CNIcBhLCgW77a1xZjjzGl0/PaNr9/RKJxYRnZriIhHcfOyAu\nr0QGFQ1Lemeld1iIrRTFAq6Xo8yRaqMk1gXZR5+g9eLBFftugZmFxJIPCAT7\nc25Y1mNdyCgMc+Sfs7V3mPN2ysSqJE5rUQvGJQPBE9py6hocIJ5QGrTIYA+G\ndjQ4kEb9V0NUtq9VA7t032oZfEmgkauwhN1yQ6XBUPA0w/C//39rrivP99fN\nVdTIxTtz1MRKCF+kYXM4HjaLBL1JBxiNVWC83UFmIWSJ14ATdkXogQyX/lli\nRZnyZpSjxdyKUR46UMlGjM4VHDWA7XyXDhuwpmRA4fMfERthg4seym765yEF\nojppQtPTHChl8EEMcnXtQiv7SRt5+lWo9D6sjE879KoN2eLj90FR+yzdYUPq\n52JaPYDIBNkk56FSW+sVTDoHhJBYWK5+YlCiy5hoR2XN/9QooHHL/quRddnG\njaeq/weHAstmGPyCZBG/FKsveNZu5UbxOoKp5xw6DBJnEt1m8Z+uzRSXDW7J\nv8A7Gux1UqDkkDGNw87CjziBfqL9PaVeuj45MSNRjK7kmW1DI7sMEJQgDXjX\nSmQV\r\n=xxlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1xyCvCz+8/J1VWJyAcmR2LpacVQTVtaeDpfKth8TebwIgX14uoeZwHLdjWeY6//tDfsJscRNYIuQ2Rc/+ybSa6EM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0_1630416031962_0.06559857212864761"},"_hasShrinkwrap":false},"1.44.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0":{"name":"@sberdevices/plasma-ui","version":"1.44.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0","@sberdevices/plasma-sb-utils":"0.22.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ebc55690d1176326e477aecb8720cb5b1ebc4173","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-6UX+QBEhquuGAn7xBGRxWSjv04UoPWzRcVoF4Op+tA/EjMrOL6YmDsrc2GnqHcBSbqPWrssHvVrBlt+BTqYulw==","shasum":"123bdb42610fa578f07021c30f961918b1818cdf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0.tgz","fileCount":752,"unpackedSize":1411135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLizjCRA9TVsSAnZWagAAlKIP/17Kp5SqIU8TA0jmSwG3\nRw88bntQYecQ1JoG0Dp3xJY6XQc8TmsZqJ2iQ3FzBDMfqO+mBmyfq+ZVbnZu\n6iUAx//yx+xRw2TmMvcmXnIif6G8p6MPKjtuiHGv9TOl9ttD2+F//cd2OmBK\nB/5QfSkfM8p6sn3eejamKdVzPihYsBVj4UyQ5I84+b1j8Xnamr0Fnr06ZiMJ\nrHDOLUjqaPXUHAlq6hIiPsJbNRp0zcDcGjJbMXyoUD6hSi7OjEbesl6jwS9u\neiypesJc3sZTxUvlpkqrABhrwiFnfULAHnToRcm01KPzM+DB6K3R+eT4/Vj6\nPEUDpu4QsiWVaB0L81xADuJxuS3wmKSB5l/PjgF8lHTkcYe5jpmfoL5IG/TT\nRNvs1HhSYFdBSmBKTB4YkihZorWu+EhMEvr5rXeaNbvGsYhitAvRkRHtu7EG\nQEca99dLgd3iIeiLfX9/LcfXLmSPJghLC0W/QOjuTzrWRBNy5T7g1Ag76Pq7\nRH1CzjsQN6qZcZij6sWmqfm7NaXsY0mxKQEDCesH7YxnVqejxI40ACeQ6phu\nHR7RRN7WUxOfgAbc8YIKZIUlmNZnEPyDCl1OBi+FwEXX6Jg3y7yk/yVOqrpH\nO5Au/1QppmX3Qi2fjCk5pJEGahyGs4OrWnxmJJFhtGxsv/Ne72j9TzZQe193\nzOnx\r\n=wG25\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDshvOtkdWjvzJscsVGxd8xJWyrj0jJyadcWtJB0efzmwIga0jfQUSi58gIP+9wXF4XQUruPaztI6VS2qPks3cpjSE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0_1630416098799_0.8632115119526214"},"_hasShrinkwrap":false},"1.44.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0":{"name":"@sberdevices/plasma-ui","version":"1.44.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0","@sberdevices/plasma-sb-utils":"0.22.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6ef005876432aa2f8fc569626e71d6a4c7e56379","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-CD2dZCtrcScwJ4+wpGvSotvUqa8gsNk+7Sd+TfqfMSopjcYdBcUZQk15OjTk4no4m5xS/1Ca8ikKUxbBE3KZ7A==","shasum":"08ebd624075c817c4a9232cd835aaca8d4f5c26b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0.tgz","fileCount":752,"unpackedSize":1411135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLi3uCRA9TVsSAnZWagAAYiwP/1rFpliIQHqBifE+BLkd\n+cp+y84lVT266azYkeHmj8E8GtYZrva97m2XIdF2MvJ8P+j8optDrbxAU1cC\ndT5PJj+UgKJq8k7r+DLYI3VNkIC7vYae5/VSi7dZVhKEkC/dR1Kvy1wlXmfr\nkuefF0NS28NWhMhhHQdr/1lX4O/6FEwfRyQQ8bZimWjVpH4ICsHrsZXvYoBq\nQa2XAKv0iC7CLWx/hZuStoc+U5WHenp1UwJFriPI4hCXBjZFYnIStoBrXfQB\n3K5T5/5I4d6t31lbEj8A+GN/9UAJxheZOoHmKgkQzFAza48eHIx2o6PNBaAH\n/MMuRjmjGLSUBjiit5dslMAmiwangKmdbDjj/uS0ueYamUBzzWWiYFH2DmFH\ncDgdLUZDbxjQ1WXYg+Zq5Z13iBklS1TOoTF5kFSIlC+qLme4L+6biMoqCEvE\n5gHzRiRf0ZlywW71a+ymgPjLVfGcyCBS7Fcv7vPZXBLlUaBGCVRXN3rIUBkp\nAQ+LHPA0Z79VmvP3wkYSVJyAUe9DGgg1tb0U1q6ELm/DF5/T213Jkst9jNI2\naftkaSdEBQufUWRxC1XU4CF65+hdSmghE28/OjRLuA/aoYlZ0nQeofic4TWl\nwNKI99ALjzjTauwS4WRe/I9DJbm9xBwew+zcoKpHBNQVihxZf1AO0Btl3yDS\nlup3\r\n=FaXr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtZq6cofrrIzUQqNTeq6m0dxuc6E8tpdTbzR4kJ7MWHQIhAJnnYgMLtVnpYRrC8k3UsJHxNsm76rEWOzXH60HNEFTB"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0_1630416366026_0.7248626655731727"},"_hasShrinkwrap":false},"1.44.1":{"name":"@sberdevices/plasma-ui","version":"1.44.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.1","@sberdevices/plasma-sb-utils":"0.22.1","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cc22744fdd65959f923eede0d202536e1a8ff8fe","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.1","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-O9RzfiTfvHCAlFIkVXUA5+uLMc5kawirK2Af/mzZ3KBBbMK1FQfqBF3JhRcLGmTMlu0QwmV2xxGLdViyCFGZzw==","shasum":"83fe6a95002cb3a34ad8bf989e9057fa15602488","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.1.tgz","fileCount":752,"unpackedSize":1411147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLjUGCRA9TVsSAnZWagAAud0P/RgKFgT80d5tDg8Mxggq\n53oK9ammBE53NiX4Zr4U3GMsLu0GVCAbxGre3A/f7oLDvL6Sy/mNBA/HU3mU\naBJaflcZIFiM6N26vqdmBMfqzHrNtWIOuDrmJKqY6OhgzMI/kZj2G/ixIPEm\nP8/iN48dewMYFjD9LYxd6pVJqgkE9kPyB767iKpPkeu75h3Azy0oeFdukwq7\noTnxo1+dnr9ITzL0bfTFqaWfzalVw1qX+DfAW5zQ072OWzyIWGFfcjM5iPDQ\nSg35irwkRno6zRSM/D4qKRRSgp7lo2Q4FfiYDpxOYceZumYZQo6mdiCUlTnL\nVyjDpwpM1MBwazJYU69OrZs6C4y6QXbOIdfXZaqeDfg1JTHgJmrTl3C81PTF\niXSKwKnIG7un3qA4NYxf8bXUrBl5AlJ56khjXlYrn8Itu0YiE5JhGneCSr78\nK65elNL77Y47oaQNIypz394sAihHZxua9w3xysd6CVZwUEdTre0U6hIy3hL0\ncYN56ahvtHMgbSy1AvTrwyooz+IwdMvPJGZ0tYcontp2l9RGZLZtPJhhq1y2\nYqN7PBbKemLK8fonyKnE9yyV5X7yY7c232+4ZEPQahDtB/utcawdgHtbz0h6\n6QmCgWuXKa6i3HI9AE9wMzpUJ63C1UU/sUZm1tNXZd5XUtduISTQp0BFhMj4\nrTkG\r\n=C9TG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvq8B7Ced4QyzzaYYR63/aLfLYMtEN9quHWR2PlS3T9wIgAN2Ae/Jt54Nii7T2wFCUPb/HBwawsbhButomvpPcpuM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.1_1630418182576_0.6636123293209923"},"_hasShrinkwrap":false},"1.45.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5cdef352e681636d3e1baaa415bc55ecc013603d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-pwlmBMF0PtbKGPHQUGfTNNGXniJBVNWYO5nuvF5cUTOg7x6ThF68qzLAbMs1YuZ9P9Atp33LvEaLQVnbbnh9pw==","shasum":"823964a93365d85e9e0e5988814048c160c1eee4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0.tgz","fileCount":758,"unpackedSize":1417401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLk6uCRA9TVsSAnZWagAAJ9YP/2fktHmL8KYOructO87U\nzVUgNHtoDDaOlb0dXa6bHqFayREaB/6Fo+6Ik4DhFMjThq2y/YjBM8pXz8Iq\n6lMmzf1gEyXE0sgIjcsFtFs8O3+7Hr8dTNzKXqXOPEDvu6O//RE+uPhYSc/D\n3hF19wk8mmS6AMTqjEp7qlvElg2ZA/AslPFdU0EEEt4TatpbQOHjQCc9HzwF\nxis3UGGZh0AYMfYLi8+XaVJ9F4iqTj4UDIweN8zHW1qC3UmZyC6ZU5DKTvt5\nVc3uIEZ+zuG/JRekdWj6AbJjWBi7U6Nd/HW19rpaCQC2iJxZQnhFd65NuXAl\nIoieOJKwbLvViCnSVJbBdRzOT4pxg4+kjPK0SKLrQZ3tighZ9FC0tfFOzQle\niMyJ4uz4BeLTv9aHcDeE2EPD7yT4ZuvYE52+4PkW2qMfT5h4ueeg+fTfAm6m\n/XOQ/HZnRWJxYt7VqCzNMQ+tU2ndo9CkSkKuHWOayYHZLbQKY/1KjueZq2Xh\nSzVw2p7AiOP06xNNSMxJbx+6jZo3gt1E0Blx4zwpql+3E3Oi9NBfbzsmlbgr\n47n3SANCMswMd1BXD5OwGKlKTQ+iCMv9iB8RMZw7+Dfs7K20IjXGs04TY/rJ\nONauAOK7IFneUzd/DILH5jvU6UyKaQSpGqjmeHyUHgOCgE7uvzzHLJSHaOUv\nYahO\r\n=udS0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpPaxs9opfWEe4tguCKdsZSFXdrzjVC890eF4MIP+bnQIhAN7Snsl8ozjxQpT5WcYzHKMCs/2bGh16sF8MMRgjbves"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0_1630424750073_0.7525389077635187"},"_hasShrinkwrap":false},"1.44.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0":{"name":"@sberdevices/plasma-ui","version":"1.44.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.38.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0","@sberdevices/plasma-sb-utils":"0.22.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dc203fc245ab13e50a502bcf1285ee319e2410c2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.44.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-c2xAs3+I3Qp5tYO/lh7IhBnGRhZAgd5cP19bvyGhjANzE1nfyr2PeBSvl0fIj2FMTWARYDxB/0uHpnWha9iF9A==","shasum":"ccde537175fc5d2ce6f9a4b8da5a0df257454bfd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.44.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0.tgz","fileCount":752,"unpackedSize":1412994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLxziCRA9TVsSAnZWagAAVdYP/14aQatqNwXu9FaTMW2V\noS6WkLMa1ZXa1kmlmqKlpqozyxat8OSRQ09czqmGcY8yGpCX6/x9SDG49Pdz\ndSRJvB7DKx6cr/ivehr00D9CcNWNmb7/A2p0edesXcILCG4TDOPxFHREfP5D\nm/tUUYSXyLHnOdDpqqkgp73QMvY9Hi99NwbM+fFmSMV64GmY1Z4dBReClmWj\nGu89KuYEsFE6thvpPa6ZzFBwTXDQef4AlSSGcPl0VShcU7oWsOkkKMw8qZIg\nFHqQR9gnMSd2XHqW2d+EosOeInVs4kjFJPV+HYYggr2uA79rotOckmJi1Wm3\nNw9LGwJnk57gu2Uo1QpJDOv3kVFMFY6wYLsfKUUhfkYMw1aHy7MUlK3Xomqm\n4l9fSwsvuTJyG+yjbrNxpa4WCAT4msi6Kjm+YYaiHVM+fhS6YM+vQLN7BnIl\nboQaOaIqSH8bFSeQL8N7PXCL9SZB5gKKrq65wPWe4qR5rGOFTj/tZD68sJm5\nOe78QZk/vnDdz2yROkxR1h4oyF0foOFPogqdZS1KjY1pTMtoayAW6/Mhn10B\n5+oc6XHgOLgKub9ECK4+tjaQZzG/702zsjDS5A2z62IqoGCNDj/7Eyp8Y6v6\np1iaeUBnF1sZinpzN5/sTHTUFM94QXUmCKxpC7aLGAvwPZ9gI4B1vlzUnSh+\n9oZG\r\n=ylml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIHRDHsTwj5JL/2WQjpCujHkGW9B7do1hrf7d20XmLPzYAh8k+l+04mIaiLbLQ02ufzl77paxtSx/A4XhLNfq+Csk"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.44.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0_1630477538326_0.6584287064581171"},"_hasShrinkwrap":false},"1.45.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"68e24f8cb7d88ec7f8445b0e7f70693e6fd07956","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-9kLuAYKOqmGiRxjHpBmDyPb/NZG27q/bxKJKC1cROiFsIZ7jpOuejvV1m3p17CkYdhHdHRhFzdYEn+qCVsmpKw==","shasum":"837ab92a3a1afda4e11ca37c07930789a36a6d51","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0.tgz","fileCount":752,"unpackedSize":1411309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLzThCRA9TVsSAnZWagAAopEP/2lcUDc7LgIVoPNloNpV\nKJ85/wMFTCGvk6KoJbEg78vkNuQX3Zb9MNiWauMAjRCgiL37XstzrkXxBHKT\nAPE4u2Vr37wdeQPa2MZfdLLu6KybkX78oIV8XuzzhghAjlpE8eefWWAwKlk2\nlAdXk2Q3dNwf5goFENe7/iXhYX8qaEroZX+eJbvXPs0V7rToH5mCOzWR30e2\nDi7gWQHurkc7KSja0+/eaMKt0NKelXkVBXkLv24oRESYFPTJVCOP+9jvsgY6\nSrpBqlOoWJBS6w3W8q5rELSfBmDVdQCw2wVRWARN1B/lpd/DTLzGJbrMpXIZ\nCNKYgkJx8aUdwl8vFDyZCzkRTjqiuelwEpyLJbUYFeZ+F+ydNMIttgKM32LI\niJQjg6y270iMk/xl3lcSH3J9USsRi4pAbwqS7ulzV7DbeRMWXzBbO2GQdwdL\nBq/Sqg/tjEusjCFyQQVVd5CnpFuQ36q+9RilwxJxguUMqO6zQF0vumEo+vvf\nKvbezw/ZqdUZYaHx/mU3bfieE5QZ7zvis77aGIxdFnX6RA5Nt088dsu7uMHS\nllFELZ/5aJiJslNqsueQ388SSGn14qZjnsSZQdyRjYRtYuE6jKYmpP/7Ypgr\n1xcoqfAdkpxeim+VwhHybJFLJddPENx8dZTAvT/cV6cQvB+c8zgn9Yjbkb3g\nRsto\r\n=2YY4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwsU7qSGHvAb2XkOlL9rooOSbwxaKIAQSaKiGVEy1l1QIhAM7AAqrseriOsZf/vcGEKdeXeZkdjiGvjaQ0FmkEN2lT"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0_1630483680716_0.4552296975887069"},"_hasShrinkwrap":false},"1.45.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9c8c5aeaa36821b49ffede8e24cbebea6ead1e49","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-LPoDpiHSycsA5E5X+gnykRF0SUhejE9n1SkAABMCEsn1NNgxHIn1d6kQRkBJFO/CxVUUUGOy/qOvLBfrUdUSaQ==","shasum":"6547ad28f58a1854ba207aa39f8c478231c1a622","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0.tgz","fileCount":752,"unpackedSize":1411309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLzT6CRA9TVsSAnZWagAAEq8P/16YJDF7IvN1AfKUC4KT\nB0hcV4YqwWFJA2+jl8i7qVJGKRKN5uVm0TVyDoSn3k8trkwRN6U2aaBHk6Oi\nDJRjWROMa6GxIxiNYXAcK2JMGlc6zYzca48X7ZH7Zf4GfxWjpOj2SM5eaW0J\nzSo+rmrqUdBXrgzy+0fJmpDdQjf6E3BZTf9X/QKGSuICB6qU+kh5/xl6RgUm\nLxnKWgKKkPdk4mLpV3t0jEzT1sNuB23xhZnWDDFClJjaf5AhBQFyEItbaGUh\n/ZV0msnm1jBhdfg6LNFEpq/MClQhyRO9a+rhFzVLmB71RbTJ8y6C8xerTTkQ\nshGkMwtIgwJADG/J7QRf1t8DRK7jlkGj3WQELkRxJb0TDx8mYNDg/nDQQk6a\nUDvJVwEpI7aQ8TUmnK3m+LCHkRQ4Iv/ZQOa2sCL+FTtVn1JFEvHOEC816OYA\n1dNM/VPTTLa9fAjr512fvQnqtcf0J9D8/9+/B9wGx4aiFR+xMmt2aXCiFTRf\nNT93Z46L1rsramgha+VJj1rh5ZAw52cORUr+599V8D0qinS0loD8sDdU9Vg6\n6KgdFr31yI/ymQo9Eda7yT/teFfQsSv3BNCErnZd4lotMKb1mHHgfGe01HqA\njFJPkT6GkWqXpd5ZjVsU+DSncTOwAtcY3Gk5en6pMmBgxoMp/yXvp/RV1nel\nXM7i\r\n=w8O1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzxZ6YFx1yRkY8WNtZ4DeoBhdcEvvChuSyD/k7JZYI+QIhAPoI0OTiLv/yM2o6ciPHR/NdbemP9jAQ4MspwKK/+3xY"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0_1630483705878_0.6662239953820945"},"_hasShrinkwrap":false},"1.45.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0","@sberdevices/plasma-sb-utils":"0.23.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"607142e275fdaa154edeb7aeaa08bc4b22a32a32","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-Q3ojNkBYbT0e2iSA4HdJkabc5yb2sPkncnZ+qD3L6Ji4VYuWR7KqNavYcx9DVR2lCxszKfFHqKiIJRBJiI3crQ==","shasum":"ae07d84e5da2167c87c38a7910b32105a41f58f0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0.tgz","fileCount":752,"unpackedSize":1411309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLzbtCRA9TVsSAnZWagAA4P0QAJozBH+y17iOtMUodhlX\npzqHWhS8lc5oMk1W+3XDvbprDscarMYqiZaOlkw6WkjUW5Nmp518j53US8e6\nR99k3YmkznniexcWte42KIlXmI+90xDA0rk6zpZCeM0p5O6kWiez7gJe0Hpt\nghhwxpfnpJo69C4jraia07ghu5Xz3Wj5OnJ0mDMUniH9xclylQpyVBLSbNLv\n9LFfXwUzwwKFhjKkKauljTEnsV+Hv1jDHvEk3ltquk73enqWiBGWyW8fx30j\nUhCa3LyRi7+9sDdgJgyWmFMANoZN6ENcc1pnW5MqX3HKqF1qk5HeQv3PSeaG\nrsWo1M+FFsWj72F9RbJRrp/fZqjbD7QIRhCOuUBWGtyJzUQ7BkL73YC5FN0s\n1SMK8DVE0oe/L2wHlnSRCAtMXvacPl3GwR9++wr7lLsuD7j3UMvrUmJZb6Qw\nwA3J/dfhUc9yHV7buG4M36jm6GxaOo+Me2cwIr4MuX8GYgwNtpD5nyUILL3X\nrAk8s7cbTe+wHFMZ4bhnKXQTDOUPuerxFdh8+ct0EjNRtwmeUxRKvWAvjZft\nrg6bL+4mKJuydEVfekXIYsgdyXbHWgCdnWvOU1kOEM6SoMG2LN11wsmMYzUZ\nv2EU19tJqqvlybqEHXtRfpVTIaxF4pz693reFwLJCwLlecvqHZKsnbBUghYQ\n740S\r\n=D4l9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZlPKxX4EvvGqBHgo1ay4kUQVzr7e8HlnSrGqKiP4UMAiB7wSpK2eHgGHbE5AAv+XC1ZtQlJNzkLEPuOaJMcnDRFQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0_1630484205656_0.28844795393492917"},"_hasShrinkwrap":false},"1.45.0":{"name":"@sberdevices/plasma-ui","version":"1.45.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"92bcbe8d6174248e88e38087ef3f46f555c627df","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-vGrBhC+ZteIl2Er/Oy6Fx/RcLMZ/dd577fQaX704djurKnOrNS+2VvWEn2j2B3z+74YfvW5tNht9Xc6LzVW/SQ==","shasum":"8aa83af34c25abdd0ae8f16a61146c2ab8b8f815","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.0.tgz","fileCount":752,"unpackedSize":1411375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLzijCRA9TVsSAnZWagAABd8P/RyH3AU/OKH+4eRad/Mq\nSRIXD0BqWIdO9NlS/O80goXOKyqcDQE37IRWcpTjsZITcuYY4/yrpsj05FKd\n99TqjrG+eyxQx+1WqloIX/VymTRpKcU+us6IxL7BpEs69EtQSWY4oKk2pdpS\nB7u/oRtm44/Wg5tsjW5cc3oHrMPHhXVW3N58zAp/Nlvx1b1Xmsj7A2Ug3AEK\n3uyklqxwxKXVs5wLsdpPDZlOq6Q9l0VAefeNTKCDjYnGSR4VKncBz86PVaBa\ngr/+u15c4epcX7SILpqzzmM50lckSbyH9fClC5CaETK/zavKUGkp2qRoLA6L\nG5T/NrGf+/Xy9ANxXdy+CdJQdhdKZj5WKhGyICmIIsf2QWwU66knEoRtGPAH\niQtFqsBDxC79VKctUd0eyUlT6N3eoWEvquC/cjlthCgrIl6A/uyrsCEJMg9s\nIxNzSwPKcAZg2vDrW+WMSgOAc5jPVUNigQPclutGSJfyoIpiAM16S4RT/uPk\npaFxqQzOorUiBvBW7rfqK+Gcut4g1YY+08HTJo+S6CDqAPR/k8eLR/J6+cWX\nKjOWGOi8bHveNZHkxR8uEwJDnC7vc2f5ebuEuFmOE10g6D7WgK4jWJjS2OG/\nTtLMVBQ3GN27bym/1iPnYGNgSmayLsnwSBSblr/ng0rMRYKG9fPNc9WyYkg5\noFub\r\n=08Dz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjYuleBZwz7smExIXKz/a5BOGW0oee3PvZrujJ/K+osAIgf83ckXwaT3GC/AqEwrhmH8/Nfy3EDNOClhYSgnh2uGQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.0_1630484643108_0.7301606170075559"},"_hasShrinkwrap":false},"1.46.0-canary.675.249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.675.249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.675.249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.675.249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-xj0R2Z6zdTPX/BLZqjUjZdXdgFxYVDo0uqz/vl4NcFVo2EdILyfO8y+7yvPkwA8h7j7AkjQ6O1BwDmYZnAcQfg==","shasum":"5b2ee54a327078aa3794cccc0b140b3e2d194d69","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.675.249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453.0.tgz","fileCount":752,"unpackedSize":1414393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMJhwCRA9TVsSAnZWagAA2l4P/0dUQplonCuH4PK5pe1A\naBgmD2jS8Oim6j6D9eW/v2Vdokg4Z/lTVHjuIL4g2jVXUVJvX4xF+BP+RKVC\ndEWnJMVUL5FiaBHeDqyEM54V/0SonwXPhx2+o97YO4On4xyF+/VfFLJMNwyG\nGAKcShN/CCQYwKIaEM7nBF9iG6mmx0BLRBr4lXwgdADFDzoS1XGKRE7yTeFe\nLB3tuZ0jgbbhVZorVtwZtKWkCdMWVmXQPPnhQJ4oVITS8Q/rCegR1Yqp5tVr\nAdRT6fCfjS5UUDGkmsRkHLHLhsVuLnnlx785MNcvDlt7UbrsBpwOqY4b7kYN\n2qEAUM9hgOTHYy2W/Bqiw+YzGw3uxo+MRfxQ/9oL3c21BlCAPXe56u4x/cPY\ne0YZHzWPU3SLUmlYEieO9T3NESYmJcV32hdpg+SyGE9THnKBo0TkrgFXaLDm\nXGY/8PHWaHOJNSXu2xO269UG6WXNs8XSfXSUiJ47humvGRQ98vA5HpFSkvON\np9QqtHBvNqPshQxw6/d3PKpQcCEz7TcipCEvHYJ1UDq47wrZR/inC/zJIcln\n43sbsuX7qGAT1m/g6lETcJPcJVunhD/OnvDY53ePQRUDhI7qf7KdhxwBl3PS\ny8UIN8O6Nfoav21imOIiYtxWecHMKiJqHHIHkkFwGOucf8bpyjYhGPOZoiM2\n2Muq\r\n=WcoV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpU4fagRiv8O2iWUJJId+sUlFB3C2B99+8STkoge/ZnQIgEjRHNCNyLvqCosJ0Pk4cLGuIEVqkQz0zwXa9OOc0FMM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.675.249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453.0_1630574703844_0.9278802193350468"},"_hasShrinkwrap":false},"1.45.1-canary.647.ff0be2eb3de41df345c163311b0003c785432435.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.647.ff0be2eb3de41df345c163311b0003c785432435.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.647.ff0be2eb3de41df345c163311b0003c785432435.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ff0be2eb3de41df345c163311b0003c785432435","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.647.ff0be2eb3de41df345c163311b0003c785432435.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-C5SyF/3E2zzJOKODT6NOvXtFZJVvA3rjJGo7eZE05qwCtNb5Ys7hk4oHzm0tns6yXAt9VrJXEw11ztYAcb2Dvg==","shasum":"9846367c0f71f733faa2662f8dd221085bd06742","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.647.ff0be2eb3de41df345c163311b0003c785432435.0.tgz","fileCount":752,"unpackedSize":1413243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMdokCRA9TVsSAnZWagAAcagP/2YIKRZvlAc98qogpWef\nuI+cI1NAQlxgHO2oChmRHEvlBLfsvFNHfCIwNDs7ndChZJxFQEXWa6jseITF\nenDPWG+DYz4NtZe9TvX9xtE4wZJBvLoTWjG9NIyNUgSb95Npx5nJ7iGqPdg1\n6RSuVti1HZq+U00zkEZuxhMyKj02p03cW4luDaocVYV257wJGMvSZXuurre+\nYy8sn4dHZ8xVksMaOypRd0V+cD+tEqGndh7TnseZ8goIgR7IneIseE4ZgjKJ\nvIq6REJRGlxy7B0AeiF522+vSreHu/aDT2BF5T8zkLT+bcCQvmczQHRxvnAz\nAwQlgWpKRzGDsGZNNacaAgYROXdjwwNNBeU1HX4DPoYOPLaeWHE2c1oE9UAS\nB8KWWZPl+RZhdEke7I9BfjD3JIOIrwMIKcW9wv0FMu2LZ8JxsMIu3uqmlZ9E\nO+co9K/41YVVQ3H6TJ7Ufyn6idY+GLgzhzyPxgjJIh7XjuGsLH95QnpM/Opl\n0p7M5yiLxFKkK8/JDCUN2TqBZQ0nyvAUeyo2G4pm2HCyOcVaEQ+6h3SOx2We\nUS+yyzBfbxCUmXSc6seSnwRFfUAaW9tjaRc1YHaCYhocb1sbRfxAVRbWZY7c\nrTPz/nVuwazFE8K8Y6Re4fWQ+9C4O2jsccaXfaQZdzU3F5PXB7trWR0yN7B1\ncaHr\r\n=BLeE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDITSK5xLdNi8fLyKeUdiLWfSebGUQs+RgYsCReAaHrLAIgPkgrtm8T3LpmhWG8jOqS9CIikIts+883lJU5gyak9OU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.647.ff0be2eb3de41df345c163311b0003c785432435.0_1630657059726_0.9805957225408024"},"_hasShrinkwrap":false},"1.46.0-canary.687.30632f71de60c33c9e410b587a30da1fd9543f29.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.687.30632f71de60c33c9e410b587a30da1fd9543f29.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.687.30632f71de60c33c9e410b587a30da1fd9543f29.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"30632f71de60c33c9e410b587a30da1fd9543f29","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.687.30632f71de60c33c9e410b587a30da1fd9543f29.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-JIBwQCtEw8/QpOJh8KTW1PlsG8wk3/bf+PTx/F38J0HCnOkHdX/KqxE4NOondr+/MtRbnidDlyIA3QnBWmouQQ==","shasum":"94e28fa610582c12291ab6b5e4dc6d4d75d0c3dd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.687.30632f71de60c33c9e410b587a30da1fd9543f29.0.tgz","fileCount":752,"unpackedSize":1412357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMdwxCRA9TVsSAnZWagAAAAYP/iEdDduF+/HfGvrwOfdY\nUPaDUhe5Tqu7/ypgsfzD4ZHUMavoKpzQxEo63OZHhrc539mZDe2cHI5wrg8K\n3NmsfrlcgbMoQN5ztFcAS6vCHKUmSQzdqIA3I28WLdqR9FaQeiHwumyr6mTe\ne32wml6li5Cp404A8cYJrRE/sHRI0Qy7TibPRxXE0qEf5/81UO/JnMd5okav\n4X8BWrsSe4Zr+PsMCOVUt/5sU+Zcd5vYv+5sHj6lJAV31C5r0I7LT1GfYlN6\nG22ZxWqKmgR1CX71/mcQiV4eJqLXYD8GpC7ymBbNs8i50C3F4CJXq6i7oTHN\nsLTuly/TnWxlEx4kire2sxMR1vNjcbkruOgmvjQ6Lsl09YD+9uj6uUjYUbyN\nV0VtQqH4Qa/JnCqWYzWdTz/Lw4+av6bfjaju10whziB4LhDhg/4rMhKEER5Z\neeswqEzG8DluKXeAb60MG2PucXdDhjafhoC+gsj36a6rSBeawG7hzeQWScwh\n3DX+2Psz0hiXkWJDJcVR0acZBUakMJZUy9/IMl0QCjPwzf/mEs2qBBMK2mt1\nxHDN4QDEQ/Zc2QsbxNzk9/hLuQzwatS6uhQUFnG3BvM/3eNtGpbriEpLWWzb\nuI11jzc+Et4nGB/PpWZZ8A0d/NxKGqFWw55wT9yPzOm+YN6zaO1OpYe8BGLO\n9YMi\r\n=6fZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnvi6d4S+XcVES/0y+AZ4zEuKhxcqYV1vh1ruFHXEauAiBWumUvakaWjA+DezO4Py7DSBmbBNj9BzQtdZjO/FgYWQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.687.30632f71de60c33c9e410b587a30da1fd9543f29.0_1630657585012_0.385820849365355"},"_hasShrinkwrap":false},"1.46.0-canary.687.5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.687.5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.687.5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.687.5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-SoQqKOf+4VGI2CJzms8PkUiGYVSXW/wjL98DF3oFBWcsKaznjhNKbV65UiIO4meUf0Q7RNHrCxkYRQQcUCDWZw==","shasum":"589ca7b186b21d99b68a3ee520be9974f67505f3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.687.5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9.0.tgz","fileCount":752,"unpackedSize":1412357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMdyTCRA9TVsSAnZWagAAvq4P/jSDeX66fDIKJ2Fqk6/S\nJ9SyWGnyDlvs1Sa/14xUNqGjzUWlZS3Z1cG8i+PKV4jgMuFDqZif9Ae+V585\nHqIf6WiA+knuRpIvPNfbLIFG/QaKusZVzXURz4iwBCZ8HTzqbJEuVGBsuN7Z\n9F6KksxASHbeNm3n2hoxSqyGlM62uArWfvKR42luyAJ7hDvmZ9hjWGjrBzb9\nqG6l1F83c1dEDhbbW322gZ1EE4FfNEBKQmjjhXcJbxMTE0oy5uox21+8Rct4\n7n7G18ikvTfbs5+ffhOaB7fI5T3vVYmSrPWf7ki+jSrwqtAcVo5cEiTETSBJ\nK9L2jfV7if0BddW2zILb2y7UdyDEL9cVAOXyVavMXOHlyoOm0Uv/cD0NkPJp\nI1BaYRbV0azyVbNZc6dtKmSfnCLA+bOH5+YZjzqPtYmllghvVDGvJNZczTzf\noDVUiERPMb6q8OHoeOlMi7PRXNrXeMkghANjhrt4iOBAv+NW3P8qJMhy6bcU\nqqs8h00ZkDrKSdWzxU9+VfkF8oIuctGuOhq96+IaYUdvD7WODnk/5igmQsP4\nCk6XuC8i1C8lj50D8pj5UgBMTeQvbxZOUKZ5VYrxvbiCGjmxUt8jabfEX/wX\nDAErxGrx4QDc7yrCwIkkvx9AwjeXoUmhx/vB5dqZyvbz5eSyCmmSzV4Qoxl5\npxxI\r\n=4WDd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNXc7SNaW52jyzBOlFyiFnpUPR1licb8dJCw7BhWzCeAiEAqkz/6BMWCpGxM/fYGxuaxuP6IkQ5HR7NjZmJNmrbANE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.687.5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9.0_1630657683540_0.9756924240968594"},"_hasShrinkwrap":false},"1.45.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0","@sberdevices/plasma-icons":"1.39.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0","@sberdevices/plasma-sb-utils":"0.23.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cfe2f51467e15ebca7789a5daad62fa062d6edf9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-YX02Y5rh4UYADY0fUGAIIvhvBpgMyfihFzJpjg1Rp7MOruY1LOqAuBcF4GSuQ9Zf+wlxxi5SpRiMxw9AzQCW5w==","shasum":"43ad9594411dba259e091f2d437ee0ec360cf5d4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0.tgz","fileCount":752,"unpackedSize":1412543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMfdQCRA9TVsSAnZWagAAd8oP/2Plenf4PTRH+P62wsJu\nj0LpXDRdfowcsLDW8Wsxd4rawusQgjPD4wZy3vqxN24mM9tpNV0Iq1QL9zgu\n4T1okJAB3Q6NTw0jCzB1R4uihR+1MDm2wIOFFFBaRyf8Qk5vhANQMDpbFhIC\n5l3ubdLkazFfrPqzWVVRM6bPJJGyWVPpBHdG9VeIVpuQvGWyoPc3SNev/a3S\n0JTc0s4Gj4lgXxYtUYdS8aNMq7vaGcp0q8BuSw/sIKlO6Ccegn4ioyU8XYHY\nZT7FYTHdFE6Kj5+ogwLQ0eCBZBiTB/3P/RyiNP74K4J9fXcmGzMST8vj6e+y\nVAAhVXuEO4nxRAOtnH/1bRyB5+joDIH0zgPKaonxBNiRSY/W00GR2WuQkUQa\ncxFb4E55EnKO8vikrWQFcCl5m30lj3WAEXz9F0T8aOu8ZFEaxPeknnj4Skwq\nVDH3vpaxKBSVJG5N2uubD1I6mlwNA4wC+Apdft6mkP96MZhFxifmDstNhl6Q\nx6KdqlAD4ZPnGlh4vDgVSdHXLqgwmiLhtVth/Vk6uuq8PPDQqwcBedgk3+D0\nQ/AVeRgT8hKWDUHLNX2VrPw/PdfWCkF/+jruY2N5fo4+fhBYSnzS0kupHndJ\nNnN0re3no3Pa+VwEnzpaWj/wmHrzedVCSP8dJDzoNbd9RTOzuC/q9TWYf+UY\nUK/C\r\n=e3tz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH55IGs6BIye4ARQh1JKZB/WQJ+4dq9uHwhdxF7C3Na8AiAyGs5o+QM9FEbiUb60WxX2D5zwa7ZoJ6igmlsemkz2nA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0_1630664528779_0.21376716182714595"},"_hasShrinkwrap":false},"1.45.1-canary.705.168a0554c6781307fe5c0f38e9966b4887ebc82a.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.705.168a0554c6781307fe5c0f38e9966b4887ebc82a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.705.168a0554c6781307fe5c0f38e9966b4887ebc82a.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"168a0554c6781307fe5c0f38e9966b4887ebc82a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.705.168a0554c6781307fe5c0f38e9966b4887ebc82a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-w6H44rlS5CglZGvlALI49f4PWsVMJAYM0VwMRCZVGE8x7szFN76/+4ZNX8foZrTp7ZkEXZNrkjzSclehFKn/mg==","shasum":"f7e5c4cb8cf11cbe890b40db339d13706a2d3672","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.705.168a0554c6781307fe5c0f38e9966b4887ebc82a.0.tgz","fileCount":752,"unpackedSize":1412357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNe2DCRA9TVsSAnZWagAAnoYP/3iFP5QNOsUfyg1+Hf6B\nBEY5UfXYdKkjhQpj6Jyy7apA2V2Txmjb0dHkywx1lb8f9wM2SyM9mr4gTFp6\nw9PgIbA+LNnwHqngbgfPERV2PHDX1HrwkwiVe0/tzUxHq0moZkXXg/iFbDRx\n1BBgeFDf8X5UEGVrQLI6nmlN2fgC+0SbMpho4qE0amU9xo0g6mdq14Wq7OQs\n6bjKiNnCe4nYJOVvOdQcU3nbwVFhRbtA2ofQZDf2O+mX8lMC5tfMpUF0TPJi\n+KN+T4jOc4OAZ8QZlfjXi/YXoMKBuMnB5TqkUnrxRGbyJLQ9UhRXfg9PqfrH\nOgmVrTrp2TGTGfmmmjitVCDO4fvEmgulvwDiF6q4u7/rvIS76KGlzquLDNfs\nsgjRabrutiSM6lPei3s7zatXHq+KdbY7ukmYMSLzppj4G36Q3lGK4LTSmi4B\nmEfyY13kbUdm+eX0BRFmOuMKu1s7x+cT6RGRfe6027Hpazs7Mzcgil6+bktE\nlWdcOGD6R7PI8p3tJSlRc0C5E+whJvia9m1/ny/N8jw35UoTULqhtuf0zhHp\nHf2I6th0jb11MzlHBC7ALa1YBhk0seqSQZByQk+H+cMEAzlZj0cxFw9Z0aHo\nkrXqZ9OcIilN0KZU3SmSOnvodeEqi2Ha3isoHvd30uwdtAGyyCEQNct0Y7qq\nsaaX\r\n=QYGR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyltvZxw0mOITKiubwRcjmeFuL5e7Qs2a9+jl7ZjIxSAiAa+la3acYrlWwNkHbR8Ymxal3hwHWInatvJffxj8VCTQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.705.168a0554c6781307fe5c0f38e9966b4887ebc82a.0_1630924163054_0.373168118012285"},"_hasShrinkwrap":false},"1.46.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0","@sberdevices/plasma-icons":"1.40.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0","@sberdevices/plasma-sb-utils":"0.24.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"70ca6b4b677f134a747aa3bd343457353331e4e5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-CV0hJlKsWOURF0a/RcJeH0hWkgcCY+OyHn7CjHfHM0gsfRjjQrjyd0P0UCRF67ULKv1zWlwHh4CrrZ9YZoji1Q==","shasum":"c966d8d566e06eb43f99f98f8f6ab61ad491ada8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0.tgz","fileCount":758,"unpackedSize":1418557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNhcVCRA9TVsSAnZWagAA0iYP/jEbsF5TjvHhYGYQT6Yl\nsOlxVTbg0vOtysguZrcAvN2sOfzT6pg71RFkGcV6CKOz1ATiqmEEcQQqTyGe\nG3yvr6daIpD8ADHx9V5O8ALtXoA3G3zEF3WbiNVie1LPCSQ9lgy5ar4d2j3s\nsoaRzBaOLuygeUUZa7B5BRt8bOODsvhEVtuGxzuancrGovwENnz/Dlyvleat\n6Xzc4mizktA8p5QtrpkjGpDbXaMFlDKO1aengjnKBXGju9XGBr3RYkVUsY5I\nWqfRv3LZ/OIIe3TNem9qMn9tmVHg0uKl9fqNsubo8povavPjOSUs2n+AELou\nOQb9FmAiVkoQUQO3EZ6KCPHfP3isItnh26cvmALZhdZEanmcuvsrYYrtYpHX\n03vqPygVR9J0ajdjVt4fENw36mIi8dy4qyOj5/nusNU2wJw7GgZDCDBjH5dr\nhuSbsJb9gKvAz+RXNzyod9xHuOkmIi3ZgGBFch38ATraxpLcGVkre89ihH2X\nC6ZgA061sSR7PicDXoQQIToJfKqgfHzU9n6ANfCW1hOn+hqX1/Ebo8GzizHB\nbhIV7A2DnKYv8VDT7OS1zyvPBsvfM2FKzZBLteHz9u0t1iTsfbCNGUomjj4C\nCBONhcjnz5mgXZ2Fcfge6iuP/WmeRrEPdXmOl5mHmOs4MWWq466/33O5clL5\nSjbb\r\n=r+Kg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3TyfIw6f0ib/DIksmRHVsXCU0SjGkKHWOFKZBRa+yeAiEAq120wMSDwpmOxvYZjqnWbM0w+K0KDFN/IGS49urJNCk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0_1630934805082_0.9297342650570546"},"_hasShrinkwrap":false},"1.45.1-canary.708.dfcd6142b03b25b0ef36d5714c442b69f3c37830.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.708.dfcd6142b03b25b0ef36d5714c442b69f3c37830.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.708.dfcd6142b03b25b0ef36d5714c442b69f3c37830.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dfcd6142b03b25b0ef36d5714c442b69f3c37830","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.708.dfcd6142b03b25b0ef36d5714c442b69f3c37830.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-QKxBb2qnCPCjy9rmVNl37nNdO+L5F26QNnvIJT/n1DXzAzwofLPsVxP4cJA9PaG5LNBSLRJV/jIeafPX4jhnVA==","shasum":"aa1378ad2eec2b308d46efd8a60c29fa6c49bc4f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.708.dfcd6142b03b25b0ef36d5714c442b69f3c37830.0.tgz","fileCount":764,"unpackedSize":1416541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNy++CRA9TVsSAnZWagAAy6wP/RPyEpYtsNmdiCeBXNIE\nWy0Ac06lQT5+TbxPHi9T6yvNKlFMPOfPS7/mAJWZBYlenCI7RcuKI/s7vBwH\nlmsfZf69getPjRzc3NYNZ/q12rh6EJgzU63eC8OTO7mdjP+MrtWOGaML5VQ9\n5uW+yzK5pmP8fO3gOCz2a6JxIhWlvJt0qQxJMzMfg8ggy6ZsqAq6KC4657oj\ntxd/HNllTqZ/VWwAA5JcKsEpMz6VlUSqd3LwGvzjuJ+1Vmd0106bmi1lXh2Z\n6tHao8o1e+/fclBhYZfgmN/zfCZwvXdrSi1amGuTs4iZUIIVM6PaOK3LUP6B\na3JnEphxyjv0jjAPJxIu7/bB2yd0veKsnWmvB+tg+XPKv0Shcn8czZpgXR6Y\n/T/22H+GyB581JofpMMd9NEdcxbeGJeRYt+U9JHoNCj0CsYfA9ZyYSXZXKza\nrjtmrCF+V27B47dSJ0dDIS1CWy8Xv9iW5sNSrlpMr6SUUbkI2FXDzZG1tGtY\n+nrUR9q6cZwd0mJjLg9Mo7mkFf7SYIPsPBOC0rgKvFsZGay6XllmdvBS0+3+\nTseww/HJd5Sbb49Hw4Zi7QnfQ44NzAMaLk0XnMd7FSjsQ5CfGmQPrOAsqBqt\nt0VVi7nwnq+v8srGVqSiav84MMKCv/I2TGDjqz0RlZ2F2pxaVKknnH+ygLOW\npySN\r\n=7DQG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8qsvfcqBUxl55CApEOPuVgJ7Tbr/mfwo8zDyBUJcGIwIhAPv+fx0LsArk8RDNmXrf/uu9zJwpRuRfXZ6H+RlPrtOb"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.708.dfcd6142b03b25b0ef36d5714c442b69f3c37830.0_1631006654009_0.7173625139488791"},"_hasShrinkwrap":false},"1.45.1-canary.709.dc27e90acf918b0abcb484744da8231ada89ede3.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.709.dc27e90acf918b0abcb484744da8231ada89ede3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.709.dc27e90acf918b0abcb484744da8231ada89ede3.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dc27e90acf918b0abcb484744da8231ada89ede3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.709.dc27e90acf918b0abcb484744da8231ada89ede3.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-vy0HhxVi9/V8ql8LDQ1T8TkoqjEvJjqVryy9EJoBM1gVv7yJJ0nW0Q+De5Y63JURdAHMPjkCM+ckahCuRiDg7g==","shasum":"0f2e4c1f9129233a7a4e6f997ce4ed122acc1606","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.709.dc27e90acf918b0abcb484744da8231ada89ede3.0.tgz","fileCount":752,"unpackedSize":1412357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNzQyCRA9TVsSAnZWagAAWCEP/isWf/+FmLYaVc8yarXr\nIwH1yn5Z2tNo1hlnl52k95LJlfWzhS1ViDBlT3HR0LahpOKI/umtpadUd1yH\n4sep6Y9RPhh3UzIwmiSj7awyCnEZ97ZVNWe3mO4oKUupUJYo7qVq7sjEornO\nRiN4Wsd22xTByH6xNMEdRhbiV4unpidd6/oadpdNfZIyQ86xWru1YwC3ca2D\n4rt38ZeP5fMfvhPt+cqdfbApluiJ0phmHa4HmfUtUlEZFd0OX9FhmlBtuTyz\nVcu9AqITg4g7Ef0g8jhoDXBkxuSx/siivWpJq7GJYcbgan7tS5Hk+9BonSDD\nTiipaVliTZSJIq50mZaTV/7V4IRtULqMojMnO2dSCrOfk4RHwHnY9nsoo9mB\nRgT+R59g8kjq95NaxH/x5jtuGFSpHKRZD0G7Ntcvt+fs+FVj9aJZHZwiGVr4\np5M8Xfo9i/Y3BBpXuzG3lO+4RiKNuBqb6CA+wcBDl6WWJvRfem4vdmhRErek\nGRM//th4XKs8a+8lzV1aYmdJ5Y5v9jOzlN3A9lcgtyIOAA89mschlRFFKbBs\nEyMK032cbS14C6Aft5lwn+ZkCmjAwYY4ebPrIEMXfqK28J10NdtGy7x1WoZs\nj2+5THpTj1ONJwB42tUBh/QFKQlqz+kGCP8aAJb7VPhFB1EM2siGd1D4OC+m\n5sAO\r\n=WVFA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBquBRvdfMpaT1jee93hAyRWS2p/mLVH6dSJBoPta2DAiAesIacWvt9D4jojHfEyHWfmoTry3+nDdOdSWJmyndfrA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.709.dc27e90acf918b0abcb484744da8231ada89ede3.0_1631007794116_0.3818681424135315"},"_hasShrinkwrap":false},"1.46.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.24.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"10e2a4a5c80fc932c1a48c988b0102645af2864b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Hv2+18LiAhC+vchUH1L7RfqDnAmHavasQ3EhoqHCxWKuTovqy0kYJX8s0KyrTNgJyk7wL9mQbAw7iln/x/7XNQ==","shasum":"cc90b8dbbf0550644bcefae35f3d6c6b76cdf4a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0.tgz","fileCount":752,"unpackedSize":1414447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN0gpCRA9TVsSAnZWagAA1PgQAKRIoO3kwkPqFHq9W2Nw\nChvqOc0IxtLzTTMb9FFQ8Ki/5HAA6v8uPrNFVBx/icF/FC9ml6JInViH59z1\nsncPhFR6YG6/1Jur8LeeeU4vT/scIm04GetnnanYHdz9kvZFx12STJnwDpg/\n7kZUNi3sT8yAwoSJT2q0OJ84KkXNj4r21RlOwoAuFfOAUr7DWtx/scjygPzf\nGmq0JFl3hzPoeM+R+sLCKrFr4TLy811a5S+qTQ8JjmZoq0I5mDtKHL2JNP3K\n1bVNTX585hG8nvuJKXzpJI1ATJu+/wKNczFT7ztTqEtabt+OWjLwYLIGl5Kg\n+sYmDB441bA4OQhzcug5eOTgy8aKBRgZiwAH/oBrGHqCzTGCQnLvDW3+1U5f\n7UdEBNfxgmDd9q3X8l8Wr3tj87aWZzR7XcK+ugiJynd2JRlMtwUUhbb0fRSS\niSy5yz+KFyPGhUmOieFFxCMqLkgXobes4eLZSqpEvYUB8C1EVbPNyMDP9T8S\nfsNn8ctZUuzSGNDPrGx8fowNW1jDaPKxI27wwvRURh3ldchyQVGA3o0MMvcn\no+4JRjW9y5KzSjjCnjcX5C0L7jHVyiaP3Y5PJiesPOfly91DOzKCGTfAIZFS\ndvSI4HgjAVV3CzmlzCkYUnSTKt7puL5OJfNLM0HKGFRovPrA+L/SHpbreZOk\nyEQY\r\n=6u39\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8lrKwrqRNjaQcqT2rVvX7yGQxym/ttmpl/i63tTH7UgIgXuXEwUsZ0rygWI1ge2AIU2JRmFf1SBk3MSCYcCJi130="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0_1631012905124_0.6582803717579726"},"_hasShrinkwrap":false},"1.46.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.24.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8add91a4743cc87c9789f28a54c465f4b8606708","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-5/+HqOBqPEEnV/1M4XZ22frp294A+XnNjBZMqgzifEFsF9qEEpkKNgQhj9C9z81fQ4kCE7Hfn0WcdPVQeKKkzg==","shasum":"6a6c37beb6e8e2697816343a4ef76f4bf4329b21","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0.tgz","fileCount":752,"unpackedSize":1414643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN0sjCRA9TVsSAnZWagAAvd0P/2tlFTOMRrHR2cw5HiFa\n+ZVlwWH9HVIM3+Kv33ljm5QRWWHw2XCPnM6cJG+f97Eni3lNuRiU3sp2NGe7\nGV3GL5VE76HTsbhABGvGVLCSlqFjZztcj57mDwsbd8KG6/YO5mHNOovNd3Py\nikdG/NtAzwOK/4YLuOcBpKLIvBKvQ8yJdETQvXf/myblsg336RmNdCmBQAhy\n+qvnQmdCIemCHkRkx/yNrQgu0AdDusb5grj3Tt8mjYBBj235avOnxtj4UGQ0\n7VFToEoVhliIyM+UX37qDvKSrfXlATC88dSmMcj98SQWKfwKesFRxFcQypuI\n5zXlfeVycOJ6B5Sf+zZ+jABD4OD5pLebn8k8uQGUopRKwG/ia/+L7QIBXF4q\nwxNV5S9J5iwbs4D2kAPESUR/50BKqjJQN2AH/rJvGSgDkxWJRWPUPh1HUd+J\n7atg/05JkRB+NEIpu4lXLiUNheLrJKq8IrrB14iJytRkVgnCwaTqmEWAgUHR\nH0Adn7oS24G85OSZRUyGrDPdN3HM1LKnZ0YaMXq/hkbX49RREYyI4pDKHS7q\norZhGWJyUzvDkSsnbtAaWbH987qJGj97rJATtI7CCtYbTpwNIR4P4XWEihlB\nLOdUauemrJvSY+99dl+82f7vExBH/+NJM40Vtko3q0zvnzBzUReRnoJAr/Yw\ncRSq\r\n=5kAC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjFy3dnmdGdEaAeELNWp1lsvon2Pu9TX63GJDVzJOlHAiA5shZWxVuf4VgX5w/eZNNSBsVEFXxj0D/kpzVDbrYS8A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0_1631013667796_0.6749009054105877"},"_hasShrinkwrap":false},"1.46.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.24.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-HatoGPDluj2oDyeGfKw5I7heb1JWDitU3+VUysu9sq6ahOKmG/8n3dPPzVvG7zdGg+GOPwIFbFDUIjDUGZ3Mmw==","shasum":"7d06cc161afaf69b67372f8926ebce637250b651","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0.tgz","fileCount":752,"unpackedSize":1415642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN0/xCRA9TVsSAnZWagAAmFUP/2VSfyigAS84sag2exJX\nFC905kehN3nGQurpvTmkXhcQu1M0jZAW654DOSDEsRLeFQSbeH7V3f7kxOiF\nyPva8rXDUCdH41Hot+xnAFJC9Si9r2uCv1voN1ls7AfGAF3nbbpynyHwAKR2\n4tI9Ch94CS2JmrgphDP0lDsc7HCnAyukEzWKcrqtog/h1Eaj4sYBUTWYh4UY\n/W5ZHL0/As5QKpXMAZlgK/t5TRLRTc0oRkOj5kJVFRNWhlVdLCY2ckTJZcGI\nmshYLfLVeyNZ6Bvf7wwpfA2OW56Pn/f6Q8oQWcSHOzsBtXcovMxpK+B+gYDn\ni29ihYQLDCaAb89oJ9qFgvaSLrBKlyEESEt6jYZnoQe5mPa4DzyYhxj30asz\n6e0X+4n5YNzNGGVjbiUrFEJSJ+KJhzD6YV5+Wh1cwRYsxgiw1jEuoxepzsvg\nRXVi0dr3LhbcnpUqG62ZUB8gJsp+IT7+N/u6aEaEubk21ojVR92nmmfpW0Rp\nquetPey2LX7vyE/RrEm9BZDp/sPwlGYrMZo6iSux/VNka8vB1pUUpakh3XSq\nDjQcP95Of53t7q15JndpEGwps4XH71GOogM/eXnO/5YxEkROYoCKcSU0Bbvd\nSTSDccQPfvQMHy2yzjg8b37+7wEqY6oDSqpfOi/ey1rzAMNhkp/UixlZgAmJ\nyry6\r\n=FqBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICeH9NxDbTo5qEI2EgSeJsnBwfddrMipMI0Yw+aGbcuAAiEAp/jeYM36IbXUYM7Pr+a8E6TkAcNs0aLOWzd3sWOF124="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0_1631014897122_0.9771764402461889"},"_hasShrinkwrap":false},"1.45.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e741cd10884544c45bfcab2b3e1584884ad7fd77","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-h4owN+9N2u0GgpULNpSqZg5Dgd+TicHg/kr+54Uz0ewHsusuleOnnk1vUz0oBBff3HoIVdb3y/zBAF6QjunmuQ==","shasum":"1af451586340b9d2aa5608f232899b9274d4fb46","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0.tgz","fileCount":752,"unpackedSize":1413297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN1xyCRA9TVsSAnZWagAAgY0P/1zpmtJ7MIYM6XgKsk+c\nYk8hj4HVJy+O2oD/JPqwR0CPBRk9JBeRl0ok+SQ8WC9TApmhkujnxHnd+Hoz\nZcS2GLu4tYbxIoc/sAzCXaRjDJcZKs+XOdpPGsa/+SUmwR62MdB8UxmZrxTw\nj15OgGXWJZWA5WdFocg4AUdB3YQMUMlfNcK+iHP50QIBLcpMcUiAA88T9xzF\n82sHp8yygUAj/ntIKBANxMsDNHuS6Aksgb7c7ROYRYzfKak/1WsYj7Xx94Ow\n1EsxxKnPA2Ph527RULN/lHsXC828oOuJMAc98oMyzr9S9OZz3sY4zTpJkExm\nRuVCPcMJWMm/ooXWBA4wCY99hv3D/Pv4Z0uu9CiMgK21tq0CmMcGel6it5OM\n095eNE/vCSGjf8jvCFhVxBSghyc05tl7j4VUZTEK9tioBk/4j1NPuBGyyi+8\nCbu+HM3cHTEGX4hNFt5WKUJJzpXNLVVJPAv8fMXtJbDM5GGSoyakg8E10/Al\nbTyEpkclzogifPbfk1yDanIcu8VdpkPFRyiKF3SEf/WS3Qb7pq2es8ve/EnN\nCrqyE3qwQkHRc/ovSAdVYxdvKd0tQUvY71LL6oS8LvN5mWyNT9ZpiUg431tE\nNjSs1sx71HW8WsWhwvRD0b0JrrBF5vetGTXiEKMC2/0M7DrT3Y/pQz93nGme\nXdJy\r\n=h9lf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAqWrTF7S79Ln51+Vcus/v+KsPoT7nU7c99iElZtH/MwIhANYbubbY6afpnAPswI4g2HzzfCAg3M473WhzCfNCIh97"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0_1631018097865_0.9488102654368749"},"_hasShrinkwrap":false},"1.45.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6d58c288fb67587458c9ee98f0be82ef9ccc9673","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Nax4DT0XLqNNaH1W0j6Cmhtz4IqAgWCAuy1KPYAsJfjldKzeQLBEHjEOCbkb7GC9SBpKYKELhmwAeiP/85NPOg==","shasum":"527a78cc52d3c8addb5cdcaaeaecacb01d22ffc4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0.tgz","fileCount":752,"unpackedSize":1413830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN3/0CRA9TVsSAnZWagAAB3cP/jhJXHLbAhbq9MZmHac3\nWx9FgqIEVAWEWOfpIO5psTF9tg5R2BZ3578x6T4DlMW9zhLKmyohZV8eaVDY\nVJk6Ca+kjZAA4iUZsHk9Iwflxbw/kq2nWEaLjnJAqWidMw43Qzjhoy7VLDnz\n4JZRjNzuo5Uga5VMrgJe3GMjpKMVgdAnt65VAMZJicLWbKSxsXu7rBjAhaTo\nBo1NE7bNXpBVtSrE7swmBR19rjGxt2nEIJCbNtwvlTqB9sRD685A3+bVaVsV\nl31KHPGv8gtFnmCR9Cyv5tTE0DTi4i7qPHKeKieU+6TJFXEOMeK2/QBnOOMS\nYVTomRqbVgVmAmhnPmpG3TUqMWO5C8bxLr4ZoE8sfaqMAjUiLHU9dvjdnvE5\n26/OBa2r1m7jOgNtJHNtSYyq3sc05XooFRx+SQ0PbJ7bsnDj3iGOU6Q8rtuJ\ndikPyzC/GBpbX9gTPNArTNUJOz2IJICs7HxmZAl+uCO9dwd+b5SlFxYQWAEh\n8MCbUTsSKPp7COji9hjBetyd0SndARUr1cSsvj0e0D6vJuPBS1iWK43FdtnC\nYjfnZhao3D+NBrsgVwb0vLtHOPHJXD/rUIfHKm6OwULntMwRQMmeegJeDIDN\nQKzqdV9ltJhk8Jc2zArb3L9uGEcxXKWm2aeGNWVy1c+e/SGW1x/brOWoA0We\npvsa\r\n=hyle\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEinkD1WF94GxOWpQ+vkbgeMdihbk0UjNMeyasSmyJGmAiAmhLvGvbpa23OuzOlbLTzBpVSj6E+rr043qUD52B61+g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0_1631027188336_0.19019673386958158"},"_hasShrinkwrap":false},"1.45.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0","@sberdevices/plasma-icons":"1.39.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0","@sberdevices/plasma-sb-utils":"0.23.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2482a64937b72da54ca6f748ce431153d4d5ab8f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-oDArZdNmiKCf6yFYcPD2MyFdortNFLW86YX/NhmEhduqmHpCKhe8Sil91u/5ZkrYS2gweHdE/I+1XQIEut/yMg==","shasum":"134cc7581e19999be16d8721d1cb5ca90788c3b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0.tgz","fileCount":752,"unpackedSize":1412841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN5R3CRA9TVsSAnZWagAAqlsP/ibaY+s5VofQ1RRqag3h\nEbiaNFpmaZviksIDfcnwb3f174NRP1bfKoiyFW1UQZJhq+A5L0/OAYR+rEbB\ni/ZN1pAKR4MVAFaR9uMqulnvW8WU5wwf17iVmSfKlnWJhj8mhEHaDNIsCoYp\nAk6AE/pXQfvfSFVMPi+aXk5G42gB4Hzc30ufJWuUp2Wr4L/uLU95uUQGrQtE\n24MbcS41z/BUFPmggvh6PPKAgXSVinfDStxjvOyxY2FPaPMoLmahIoljeIHV\n7ZuDoeAd1OGlBJ7729Mnu8SM0PQQiUAq47YoOSkhzfC5lf1rstrsaGLKnIPb\nO39ATJ+GPf1aYCkl9Z62uLNWe36qrMguxfEUQZhSlXRU0vmh3epOgutlEcxy\ntdDOVfG8sbna+rUenDYzN2liGZIwLBzHP1GEj0OIKrYndfFF5X6R7X7sDHQY\nInQnJS5hqeFXd8/u6nS/nQMaNBmogjTL5sFeBFFMQarm23BJf3kK67nuMHke\naXhvMa42yuNjDa2wB/EWxKYQzyGjZRUc6OibGv9S9s69V1Kg1VYI0Ai9SlL8\nR9nAl2HGKs/3d9i6mCM+sGXt+3WCINwZtG+RS4K2gR3FsNWn7XG3oHdOULe4\nSe2X82zH60vQ0Qf03dfcBWOPtQsUW7shC1469p3B1Nek5gJYvwHGvQzUARSF\nWbMF\r\n=pwB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1t8u+tFzB/12QpibDq661VLgShXuk7PFQG/39nBiozAiAUFftAuMeAAdoao/VzQixUmxwOX05U4s5l8B/dclyJ/Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0_1631032439051_0.8619828348569947"},"_hasShrinkwrap":false},"1.45.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0","@sberdevices/plasma-icons":"1.39.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0","@sberdevices/plasma-sb-utils":"0.23.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3885db3b2758d4849ca94b52403262d8a0573579","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Zgr3aF+kFV8STikRHlOptWKy2CRFp0PSwll5RVmYntQpH3/QkLIhYrNzw/MOC9CmOl4UxRYIQ8szr6JECcohdA==","shasum":"45a956f6e7525f6e13104912e73e59d01bacb61d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0.tgz","fileCount":752,"unpackedSize":1412543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN5wMCRA9TVsSAnZWagAArToP/3XTa5pYs59eg6/0Q7q4\n7sSz+WTpD4T+C9LYsgHsgf1tTyqqa3uRO+CBbks7nB63U33bz8Rsro/zF1hr\nOyJerdmboDne4l0p2wN22Cdr1JXw/olGVuj68sTAtXSOj5FEx5ZQosFUuQWl\ngnJCta8dUl0xeOOK6ygkSvY2soRRdVT6hra6uIbjJjpUPTQuEHhcowbM6AMK\nxIdFoX2QYGlEtmEMOCEDdWGceqHd2Z6XEmw8ki7niemmdZLQh+fNE1Vnobmz\nDUts+d68tNkwkr/8wkYEATvXUEk3A75ydFvyQSvWPU/HMV+2z3oTfWmRLn7q\nq33zIGZJfnxZnHkCVHswO1R1TqdxIXF/+KVtMr+E/d7fVOn0D7En2DEFJM9+\n9ygfp+VfNqdUud0BeKi9I1XVIxl+eW2yCd+6K2AL/JYETNIeEscuFtBeMUDc\nH2dzHWfE5qqJAy3QOpZKajodmSuNLPhwXktG/Fpt5sh+k1mWALboxJiRNYtX\nL5PwW93YOv5Ab+cBXRTrxPhJtw3IBSQ9lwLjs4+i9U4fCjhCo0EXto1nOsnV\nSQ/IrqH2CRNAUGz2OQBkw4ZQ/hGL/lqomejajgOVtfSyNElvQEoaYADU0bjI\n0omZEMLTIfQHpdxPz5+05C43AG6lejCC825e0+/QNnw/AcipWyTsZGnVIwjG\nP8oQ\r\n=3C2d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJl5nSQXJhZcdGeBWQo7S2gPZPrg2TzJCCmQ5tbbYWrQIgQjZKrrzcVWjjuMadwV4Ci/EOQZY7tXlu0w1N3axwU0o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0_1631034379943_0.12234542478017918"},"_hasShrinkwrap":false},"1.46.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0","@sberdevices/plasma-icons":"1.40.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0","@sberdevices/plasma-sb-utils":"0.24.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"49b126aff23d3db01f2e79109951c7d9e03b86ba","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-FiWxrYO/qg31gmH72w35EX7w+BDAqKf7wGB9zAPsiJEK9ibkcIrlwBw72wswH/Qrn8D6k/7VkAvQWzQABl1oRg==","shasum":"0e4257f96b60101f1667ca325014b4649bb15883","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0.tgz","fileCount":758,"unpackedSize":1418557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN8VqCRA9TVsSAnZWagAAuMkQAI2OwEWHlsGPq6t46uv+\niNBl8xi7dQJp4zoAkbASPpmF/e8Byrn4NJD0sVeOcpy9Xm6eO0CShshpr6ua\n840BkVRPfpuY6/leueuz3kxKfL8g7shr0Sl8XXYloOEUPgpT/9Tt4tOrqiw5\nisgdlIZqRb0/LkVrHOKiEZB3cT8D7vgJIeBbHrU6rLMUuY6gCg91+55Z5UcK\nVllnLtJ2QkGf7LCrJYJwO6W84OJVOmxQusgYYHYKI8ajPpHv/lFrhMvR/LpE\n+cGUTKYweNGt1hI44aguWTJASOnVPUrbAXHAn/KioIYrVPeuzLdRYz8FZEzY\n3TIBB1xaeSZIF6UQpRzbed+s6L2S44aeJnL8+Kegq2j4NJZygsD/gh1PRLim\nsPKZHBs/DhayI7IXGvyinMuSamoNNnXQItdm6xr625ybEHrbQ04aznxOU0/2\nfNRkbuLQTKqCVLtI3O47iRQfTfSF95QFXlLOWS3MFLdjdjcaoOW7zbQ07vZj\nkoyTNtwx2I3KZHt/NTpObaA938fP7VbZuzHGEPu/x3dq0YWS6qWI0ySnWP/E\nc6y7WdcSdQvbCPFfjemt2pbPchp+Mu3eBux8vFHH88p3RZ1uFu1ANJVljnRg\nUFL579yoU7fkcpd39PM/kWAuNp7I+1EFUYqSBI6SlZlmKxvhwtjz4c6+lB3Y\nEVSm\r\n=J6np\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRzGX9rJ53prDe/+tNAr21dd+fynqsl0QWq7PmB/P4kwIhAJQ/bPXetZGUSrtE8BCmdcuFlexTcSjc+zXOy0M7CvMW"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0_1631044970374_0.6497341349796246"},"_hasShrinkwrap":false},"1.46.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0","@sberdevices/plasma-icons":"1.40.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0","@sberdevices/plasma-sb-utils":"0.24.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"76e229711ae8d640012d7c5b738738a43dc2d804","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-0cX1iSTreNi+mGeNXDD7rd0hz1VfgviUY5uz3fj1OTpA96Oe7wprwK2thSpbZLwx4bZSigttc3olDmnLT0QIZQ==","shasum":"f91e31412d88bec2791637c2108d02962de86b1d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0.tgz","fileCount":758,"unpackedSize":1418557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN8fPCRA9TVsSAnZWagAAtqwP/iTjj/sFRPxt9+qAxWlu\ncauv3HqV6GBkseonzK/FnqEuRfdYVvmscPc1CIUR6IAOm1DwvQ7ixfx8XSJ4\nzt/P7o2NIhxHIO1Wu73BD6rSeub3sY9f6nnqKWsAY5GoyPlQsrDjeNFkU/uu\nb1PnIRuGKxFaCvkMNYCNn4g4CktdHdHow0vQw5747esoIaClezJz8b0NYE4f\nN8/PKg+2nyZk5z9Roct6peVJzAjpvv5uc+GvYv6qE5SR2omX5MU25WtlLcW/\nxXDHJIBHirh+FLXJ3a9Tx5LXtnmPA+7i/p0QELoKYVIwkFqHpFbZkn15c7R1\nkkuHUAOf0uQi0Jl/yrWT4Avhy8nv69Y5+tXNDrpnWDkIo8fRX81QDCnBqNRB\nCJvMeK2aa2EvsZEAsMuYIYiEp9nnc1lVXQTQpY3ehbzZELLyrhQDVEq9kp/q\nOljKKhhBHnjBxP3PZjNROaP/LuKHEtkQobNrPRBzsycCgILQWTQPEg8RkdoQ\n6umyzlM1Pa4hv91085vzcWHeVsNjfVtVs0Tsn1ZrsigVLfj2r5dI2HnOs0BI\nQadRGVUSNd1K3M3oEQhRnYqOuSL7V4/BTaf7NIpKCTEAxzxhMg1yioZvyeoL\nlleB8HzolmSXag8DXQx/oDyT8V1MmjAc8zMMJezTjiBT8nfXhySGQxsdBCTH\nYoWz\r\n=j40R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPy1tOZSRUhw3bKx32/Aac/tah138yivIBptKnpqxv+wIgBt5Whh+hv8aNXACK7qYBgwUCyR5im5hqa72A+KO1YLo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0_1631045583497_0.8592843729187523"},"_hasShrinkwrap":false},"1.45.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0":{"name":"@sberdevices/plasma-ui","version":"1.45.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.0.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.23.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ec77f22a9dba257cdcf26dfb6c499c242fc7ac43","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.45.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-FBWlbGGYcQyGmtWLWnlc0ne1RixhYVM5ecepWtfjGl1lb2yc3+2lAhkhKdU62fd2C6pcDpPwX3FRNOv5RItz3g==","shasum":"7808418ff57b276c867b347113bc5346576c63dd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.45.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0.tgz","fileCount":752,"unpackedSize":1413297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOFuQCRA9TVsSAnZWagAAxIsP/2xhsyPjnBp5zHe7cBAa\npdVyej+bekwIElXkpCvRFit4oPMVvWI/pKtL8NEBsf229HcXTlPLwyL2nI0X\n8oK7s7nUzS3f8XgSSGP/wc2xKBe+oWBNMB210sAMNt6amz98dWXVW9fYNm33\nqBbec70mnBZ331Uuq0FGOPKa6izRC2fNkpQhB9MACC8tbUdwwz/HhOnqbKds\npqzZ/H0I9K6+MPKbeLXMhssEcW7WHgyiQxYnbVvps8RZJGtDrk2UNFThzalf\n44OnCEbLVVPM+XKFHSsiu8ffyGiBn6/yFwf7MFq2btQ1du6J7QsTPoREqx5K\n/wM3cSoSCFc8nuasDVKhoLn2MIhH2OBdNXA1OkOE07lsl+yPHXEDWlxR/aRT\n9ulu90yRzYopadx4N1U1X7/zLATvxW1vDf1W7KpHifrV/6GUAs3i5+ovw6hx\nJV/qKiBPgiQJMmv+JeCdL8SMdqL+Tbgu+TMS8b9diHVgbGLNpHopgQu5ZLQp\nJAbNmEsKhB5BWEO6IhoCjoqg+zyWsbpT7nKhKEt/iTikTive7Wqws2PhuDde\n42UmSUczR86XfSqGLKq2Y38eAItEQcpNX+9s+zBK4cBQ5T/27ujXs6IQxDjz\nrfWDJ1kCxAw2QQnCL0DGwV+0TY7iBBpsiVtc/q0JjrpwfHC++x4zQU/qFLpw\nXxY0\r\n=4WX3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVSfHcHq6WNXtw525uhBvgC86eqUYac2UfoYCgcZcy3gIhAI3nnIMtVjlLgLz+BnAmJ/Q1bSTSIPeHAeoCQs2InbiW"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.45.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0_1631083408494_0.8395988679402919"},"_hasShrinkwrap":false},"1.46.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.24.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-RsW/1oZpXGcDxf1u/ZQicGl2lm+AZcCLCUmwMaXlo03NWl617rfBV9JcwBCpetCiTSnCsB7IKlCoofs5l3ufhQ==","shasum":"157fce3aa061f88318a6c36f4cd57dcdbe742c6d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0.tgz","fileCount":752,"unpackedSize":1414447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOHkWCRA9TVsSAnZWagAAHokP+wbGrWCGUOYW99AQHSK8\nH91z9EegDOeVC13USipfxQtpuw5ZLZ/e1PVSok9UNSFu+lnxXgJbSdkideTG\nznmcPvleiMilK8/PB5qXlezM/oGMKgrAIguslNYapwERQ0DWoNRa/vQCnQj+\n0w9276U2vzl8YhME10khBp2AtECg6IMgAyH/gEA3+kJNxgwQiR+SMOY7onwp\n86qfgXJQOUki8pYb+am437wsUo64iHdt2635s+jr1puxRiE+Yv47ZzIqCAGQ\nf2ZC4KyJHMiVo9RImvYQZdVBGr04ZYrfVkFIaBDWvgxX55z2s9RMalbV2sdU\nDLO6rBrQMudDISfyrEKoRcWQqTgyxy7CG7mvuAMI+YUW5TA6ACFqIqX0vGn0\n9rXlJ7rcS/XSaBdHiSR02BbPJnkaplrikK8JIYLkL9Ukn2ELpuaT90ljA/JP\nLc0pPxlXqg2YUIGOs94OmDfFaromUVEEbdwvqCjwKpDKMv91UgHPX5G1FR6D\ntF41HQxC5yItCtsP3Xa5BRXYTrN/eUs1r0Tzj9SSTrB90WALJQAtRwBDrurO\nTtOEdk9xVVYXmUJUWZcgEvVLAI9KlA7j0rAO5rw3bEiVN9hFfXLzdivHTmrU\nxaK0NmJIVQsG1oVnVQmlTPCIrLUgpPWoOAQnuMIyl5eVZQ8eKuWIL+4vqMgm\nD6Ny\r\n=vxJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYJSLYOfHQN8IQSWlj7xIFcvhOPxxpUIDbTOG3BqX5hgIgJvAE72K90cFtMIujNmDJ7pml20C5Omivpg7vPdvxKFc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0_1631090965943_0.16044397412974343"},"_hasShrinkwrap":false},"1.46.0":{"name":"@sberdevices/plasma-ui","version":"1.46.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.24.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d847d624f3ace36e021aaa713e64ddc605546510","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-omQh0q/O62UD90utISRQo1yyV8bdDimlvA3XE3TQvQGqsE2SnC491WKzzSQ4nsKNG9nEOEjjOajhuFZps8WvtA==","shasum":"a704d7688d2f7f19e631ed3c63d5c6ad4afb12e2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.0.tgz","fileCount":752,"unpackedSize":1415073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOH50CRA9TVsSAnZWagAAfLIQAIq0PYxG2RPU+d3Ik0ih\neN9jSQ7n09IgZgipPr182txM7HlFtA5hBGD6Bb6o3H8H5AMCTVvZ1MWI/c7S\nixZBpAaHE9hIOi3g8D6mlgraOl4CDgEl9K8g2kmrkWIbtpjFo6nXyZUzKg86\nrNhjUjESGNAD7q+5mkZxPTBB6Mz8tGS8RYqzWhpEjyVT3L9umcBSQ+YGWfT2\nV07vyl7sSV66dnoPFgO2r0JLbgxV0uzE2ulzzEAfn8F4oOhkVYnaqH3Fyx0J\nkF0TvcYvoE7YCjzC2CWO9xfFnZ1jyPxoXUfIYncSjv9DRWbgxGPmhlGwwGfU\nGDqqk2cUkzWWPSP4zxSVVeQoRiZT4Ovzd/xuoQb5sfbwD2WHMybG2UmCWvxy\n7LVFcCE5Iv/kMxx5LpQWQKCd4u2rjI4uGiLRhoEdZbqe49Z47j1Mg2JCM8TC\nlC40Y+QCwHmqNbBgDx7uJF31JcBrWkb1ooWyWOSNMdRaKrIwUt9JJ2c5LyB0\nM0SZE/Gss4kkBLeiKfwaxF8Rnx5rkaBACyxZzoq4mGK7p0Gd4BXiiM1Yas58\nxQKgKWnJaOWZSCc72TwumFFNdl41zKq81aF6MYhbzNT2RLHRWmoKPNOYi988\nfuejD/0XX996GktZbLArBRLCVsFVpddiQE6jz/OOmURtonMwL45eFvA9Kd+j\ncrV+\r\n=uEjz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIDr4Cha32NtoPxi+5HUHzBlQwAlYJg7JKQvBW9ivbeQIhANizUocms9OGigsfZwBypqPAQuaFNHq8kTY4A/6nrekq"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.0_1631092340594_0.024660558414703493"},"_hasShrinkwrap":false},"1.46.1-canary.716.3b9e6aa5fdb236e69a56afa3641dbe12a7688fd3.0":{"name":"@sberdevices/plasma-ui","version":"1.46.1-canary.716.3b9e6aa5fdb236e69a56afa3641dbe12a7688fd3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.0","@sberdevices/plasma-sb-utils":"0.24.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3b9e6aa5fdb236e69a56afa3641dbe12a7688fd3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1-canary.716.3b9e6aa5fdb236e69a56afa3641dbe12a7688fd3.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ZyeTCdniSpN0K1oj29qPJzH96SOtBesBl6wEPXrcVJlKud3GI9JjfWkBHPVnj7QqMq+z02syc6a01uute1nnDw==","shasum":"360353b2af3505f14afbdafe6f0182d68a56d833","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1-canary.716.3b9e6aa5fdb236e69a56afa3641dbe12a7688fd3.0.tgz","fileCount":752,"unpackedSize":1415083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOIXkCRA9TVsSAnZWagAAoNcQAIJ068FwU+b1YDXU8XAG\nlmObTWEU2qVUDaZNFUJGZK92ME2aEpCXG07Q6Z1VBVdL1hDES8udyt5kA6Yl\nMUS/HJA+hGzulSry3QyUyYMQi/J4hxlx+bwh+a8A8i40X0MNbfbdf+U9Vli7\nv6ek1H6rDmjT/qW7/Ng88TX80N6PY7qcw6yYtPweXW7ovOJyL9XPik4up87T\n0h/9jxVYEf5ODDBagvwAJYit8mAgG/MJtoyTvGO4eu7qjOBXYidYXkZnhFyH\nH39qCM1gWFO0EZf/DXF1R89BS1zePkKkXw3T/JFAyCGDaVa//RbosP3pa60y\n4awK1ZX/gnOAnb2kz5vMpTmDYCPyWbWMSxVI/2l5XjyjpJoBbbWnbsu10V9b\nMCussI3U0kRgacPi/OzuKCZvbzBYRVoUvfx4QxYaILvNspn7JF3O7jAqeZzn\nPIcy86Nohd3T+7hz3a0792N29Y2SGoii5x+JlfdiYHwIl3BSfSDMwMr4d1tU\n6srwdQm/6JB3jQyUy6FG7RAYMw1iRS49bc8iBNiRFbzDxLA2UoA9jwOI+Z8F\niLiOf53yaCZsCLCU/3aoFR7sKebSVJJ+n4CwUPxjMEQ0/5S23ageLTYnzIsV\ngiHPiR6lD6UmksXwnpXWXNByu9Ji3YdIQj6Qr5n0JT3ZzzXqQ5JzfXJ2NQ0d\nlqVm\r\n=BSep\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyoDX+6emJi6lOmNZr2IAawr76UTdB2KbJL32E5ySDjwIgTszWXXGgfjr+UPJ4yGlNKMgLQyRS0s8pTZVZhTTvxQ0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1-canary.716.3b9e6aa5fdb236e69a56afa3641dbe12a7688fd3.0_1631094244248_0.7550432395299171"},"_hasShrinkwrap":false},"1.46.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0":{"name":"@sberdevices/plasma-ui","version":"1.46.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@mdx-js/mdx":"1.6.16","@mdx-js/react":"1.6.22","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0","@sberdevices/plasma-sb-utils":"0.24.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0","@sberdevices/plasma-tokens":"1.12.0","@storybook/addon-essentials":"6.3.4","@storybook/addon-knobs":"6.3.0","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.4","@testing-library/react":"12.0.0","@types/jest":"26.0.23","@types/lodash.throttle":"4.1.6","@types/node":"^12.12.30","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.1.0","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.4","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.1","sb":"6.3.3","styled-components":"^5.1.1","typescript":"3.9.5"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"02cfb0ce2d5ab4c228abc1241980fa376455d0fc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-N69AoIdxnjGacohSqd9u6k2fB2GboUh7BNMPFpPr2Lx5IRvRvCIf7CIoKWjfjR8KCO0e2gtMFW8WAp2YirlbkA==","shasum":"12b337d9592693b44c1fcfa897416f592974deb3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0.tgz","fileCount":752,"unpackedSize":1416920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOIyQCRA9TVsSAnZWagAA3isP/Ahtwt9PX5wOqi6UQ17q\nO1X8C8ha9pRgKUI2auWYcKwjN9IuuETzGRPYRX4JFWkiL5rRvHui0zRDeXAR\nfKGuPqZF5qQnrqZ7PLi09FuymxzueGBBRoJWq3VeO9pk2btxbJk23YlOF6d1\nGt4NFJep0QqJ/8nSBmqoxJSMSir13rJ/D/h7XSzfMgnq/CJJI7KZ0P8OCxgb\n/0gpeBN2ecct3SAeFpZ9CtoHMUdf843MGfRevG5mZUcLhjjaDIL8jYa4mnMc\n9rJBBsO5Tz9Iaaa49KgrbUidjvqx9s4Qc+WeTkg0TwPkc8m9o9kVNgAKIIND\n2iUXEky0S0m9VdrH2ke1cOBaCZOfs11vfipsVa8iu9l6ZKXFz4ottZcatpmG\nSooz90WFTWhcJQSyTo+Z2ZxhpRtlisjkEGvnm61YWqyAns80DxwOEMcNLJwB\nyvrJBTl03W2nFiQuUa189PmoDXvgC/K9ClJeHx7Te4Q7HT7CEAaO5coKlRD2\nb4QGnWADdj8kKktEmTDbxQj3WazJcE0arJocNJ5mFESXvBzbhEUoHxo/E3d0\n47TSP/sKx/s3Sz8riVUZIaJWYGbT6yUuama/N6JjUx7SfsskBk0xqUqLzOGY\naiwajqkrnnn1jQl4Qyqt1ItU4wnv9veM67QNPjJl1pCCCFaxf12Rn4yD6Dqv\nrboD\r\n=nuhk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlpjBlJQkTH1HEwrqEcDcrhx21oDMItb1lwYWVFhwidAiEAx/yTiFLvvDhOpsIPOELWCBWIDdLwonBIxt2UZwkMJJI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0_1631095952778_0.2445759905266116"},"_hasShrinkwrap":false},"1.46.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0":{"name":"@sberdevices/plasma-ui","version":"1.46.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","@sberdevices/plasma-sb-utils":"0.24.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","@sberdevices/plasma-tokens":"1.12.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5a0f534f32b9edcec50d44a1c84e9b543e903968","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-CQ4kcfVaKZWZjL8UVK+4SWVzBNXlhOpByUimVgmign9nCxNhAKwNTBRzN2p2rVnZrjRl592VirGphTmigkclEQ==","shasum":"6154c45033229891b71b774ba72ace51f14e7f15","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0.tgz","fileCount":752,"unpackedSize":1424548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOKI4CRA9TVsSAnZWagAAVZYP/RRNKPp7n1YQqjVKPau6\nNqKaEOCBt06X3avHPKkKskSVUsA3vDh4bnDpSAnZsnWYXfvi8qhFUKNyQamC\nxdCKl77Gnw2OZPWCZZ5uV1Xrd2QpgAGGWpkujmc+LT0OLBluew2ov6w4fUpz\ny55nanVroXa8ISSQzcHau1K+QqHhiUKmKROut5jqjq9W2sTIgqI9ColNDYA1\nwl7MbQ/HLhEUXxUDp30XrGn0kitVJupWRZRgUhTp4vUSRlDd+WXtKJwV1x7r\np7XIFJJCrQaHObIG2F/gFLywOd3VqJzWmmO9LbbPn2IlwbSPdJM2AO3fDTHO\nKjcL97AKc7pi4BWrN21WaxUc1eNvJdZTA4LgFKZcfc7VB01ewQ1z3sAjgqu3\nm3AjKljU+608Aj2a+ZgdTTtLeT4I2LSnCsEr9kylKZ6SoDllydHo2elOI6ar\nQPvxMSwi5+jUA+XY2jEgKH5rbxvgCSY+vIMLRk2Y6CWQFn7kWzwNAOkM6RPP\nxoIvwfyCUumKTL2+56xLGTGyR1Y8GvVxjtnDQwBGeSdtwIBLcrUhptENhe2K\nyFyJBMPa6wX1FM3y9dcHydlNJUjyv/1d9NNPErflyLrZSYns+NYkl8x5JKTQ\nRWUiQLGScR7bACK/xAquY8KqV/Qmyxzfrk9tJ0skiCCF5EBjIUlkR1Tt+i1g\nJ3Ii\r\n=xexM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDVLgaYYJ+LtZp32JQM48MYCPz5Nwm+Y6uAiSFlokppwIhAJw576Mz0qUhPsTze6KfKmw8W7j7zPGOkl4RNMpLJIM2"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0_1631101495930_0.1531914014301048"},"_hasShrinkwrap":false},"1.47.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.40.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","@sberdevices/plasma-sb-utils":"0.25.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","@sberdevices/plasma-tokens":"1.13.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Yq1rLVCuC6dC/h8ideHexC5xF2ZJY+OQMdpd2smZirGUBKZNoDdsLjBRmROrlMjTYNkCq9KXWds+l/oGUzM2ig==","shasum":"abf35905771f6dd9be38efc047f86c38a2363e36","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0.tgz","fileCount":758,"unpackedSize":1429805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOK6oCRA9TVsSAnZWagAAnAsP/2jChs/7PrYjPA1w4LJE\nFLnpfvA3RgCnYGQdbX+t/HHf1zm0E1Js5Or9Wjlh3lvoip+quWBkfXZmkvtw\nP9K0DHxcYPu34OJUjiIXwG3MdtqyQo0QIgcd+NEB4iebTO5qBEdWwmALghMp\ntamOFCe9nnPnLhi3y56sgLXEktyT2cb/wWVLeznqJdfPDTh3BBXOJ/andgU+\nW389EGjWme9XIxkvgZ1vND11x2/6JCZx9XEv4oWrO6Zo+XjbPiIN4hon9/Iq\n7W5ygMajSroo6oUk0l3cmvn9Ay7+0vV/tb+ZB3Rvd+pTy+Bt1MZyEwdSKEkI\nI2T7jqOCzh46+0uqrPFaQyExpVeNdmg/h2X5Og1QVUQEkCbApb7BvrIPPLm5\nXTgykUd782I2GtDihtOq8J2ng3se8EDFvSIe4FNIPSmQpchQh9/bTEb3BrFb\n3ZKDc+6zL4ljaS+eFvQ3vuGuIkiU+VgUIk0Wdc/xjSejkg0JOQJ2dQCPBZ02\nuv68gaZ+UXmB5W6DZWAJj7yXkIEvyNLTcyOxVDX+S6L2P30Xts3sIasMLN2t\nPFWsr+VuuyNMfmLDw5f3gGAzgcq12vuBuiV/NToJNsBzr2GpcVAbaCIymKgc\n4vzzVJAXfTlIOJj9GcxgeuOagTDskzxH2Hb0WJGTFb7qymdA0iqpVE7pFJqL\nhaET\r\n=bV25\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDONzE3HuhCebUzY8t75KYUiIsIbppdtkzgIJinSEOrjQIhAMsNTl7IzpBpiUD3QfHddFxAt5mbEk3QRCtlZPWjBkI3"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0_1631104680523_0.8159742055953052"},"_hasShrinkwrap":false},"1.46.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0":{"name":"@sberdevices/plasma-ui","version":"1.46.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","@sberdevices/plasma-sb-utils":"0.24.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","@sberdevices/plasma-tokens":"1.12.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"17c898a0469a150e1ceacfe320b24a4e3d21d860","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-FzAfkO3NG1J63XLeaA5+Rngi/HJQdpTJKIQz3iA+WGdXB1Cc/iqwahW9hZRKDTyK+dw7b5SDTivIq4diSUElmA==","shasum":"3a2d040fc09cab1f535f405ef2b565f079ad603d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0.tgz","fileCount":752,"unpackedSize":1424548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOLQiCRA9TVsSAnZWagAA6BMQAJgTQBaqfyM/PqGk7oiM\nuyxZvXMQLTvbsV7ez0Uahcp0E10fxr9b0DXd2MO0SgFr1XaOIZGCA2ZSBHlq\nN7Z1SrKLp0SDc19DsL2B4hqtJOdtdQYQ8qTAWlgSUFczcAz93YpSv0VbikcL\nHr/QCMnIySmXeBGR42+9U+vDB6rWVsYIEHUE2SPAoX7M1c1RErP3AdSMUY9v\n+TdpwEgqjPxZpMmoCXeSFwnqPu6aNPG6mAoN1L+X4fUYO6AbmxtlScXSEmRN\n53iODvdr2MLPunAobL4XmLaaWUNRW4B7AfSMioftudhDwpj1//WJB7YW336B\nGYgVp/LcBTJil07YfjfHTALf1iQTXUxfz52S9zNJFmJoJ34vCyPGpn8qlsO7\nfmkZAToAOrP1PCmWoi5iHFflAIKBH3V96txWWwS3wHsX7NKYmHXLirQZ6oA0\nKm9AmMVhuBn0Mzci6MqsxNGiOFrUlxrugBAjqtDOS2dHjEkS5mRhQExk5EtV\ntxQ6FLcrZtQBD5VWY/qjgCP/wINRE/GvT2xOkTKXAtrNFqhfpLf71S9SonEy\n6xVRvMQW9/O+NbVAycidRISrDeR5I4jRXqjxEo/RhxCpb2M2GMR5qQMiqHvL\n8g8l325u4FDd2IP5c7kGQhuDy19jeEAY32mOT1XhOhtbB5y58CWFGYNGqZgc\n0IBG\r\n=koxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN7OCPuTdXgGHLNWh/zhqipBqkTIHG8NqO00OFgIeRNwIge0iApwVH3cSFQKfd1EIejqVR+4Q1Gx4WcNZKspxiOh8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0_1631106082242_0.28607573023147603"},"_hasShrinkwrap":false},"1.46.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0":{"name":"@sberdevices/plasma-ui","version":"1.46.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","@sberdevices/plasma-sb-utils":"0.24.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","@sberdevices/plasma-tokens":"1.12.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"800ed930e0f10c104a3b34100f173875d756b9db","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-9C+h7OhCSK96t+VBHfCk9H3F4ZkwGEYCfiPruTJpbk97Il0KgIDQxy2bhsStDaPwrLE8rRuECTg4+NQHOA/knw==","shasum":"bd92dc4e93b56dcea2b118006e5316a841c87628","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0.tgz","fileCount":752,"unpackedSize":1424548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOLgCCRA9TVsSAnZWagAA7lYQAJSXWPjR806wZdIvRcYj\ndAznIS3US/UoQ+tSQ4aoVALQitNYwqLfEQMsbVDWKHHXdMEdQIV4q2s34Y5Y\ncwzOCiTa8qCxsZ3Inzpqvm/k0SZtZWiYGZT/yW8ec7JBEUad0LlA4ruaqDN9\nXSJ3STqCvRSVP0B0YBZCqvufLNogB7n0izLSrpjcTBMatnLdhG7t6c3ectzp\nrb94j4yfsKOVKAojs0u2iLWNifStjza5y8TZY0GsY2fG2u0mrSXvJq8L1kmq\npa5BStV/euL+vcM0VRvGBlngUjW85i4vXuDBFEvCYywH2/2v89Ahu/XmptkN\nhNz28EFFcG6YZV9DmdXqP7Yd5JVPqOdE+EBw+HrkIHX5OicYs6ffe0xodbds\nPdnyqwavMUEeaOjDLPyqnvpUbmXyxmER65h+npxhiVojKm+ZMI5GqEyXsxXw\niWJ54dtmr97QzYkwwGqD84OE6971ENmAZ2cjj4s6AcH6dvoKAbvGs99k3pPl\nKW9RU4mGWvvl6tiWupMYVUozmD4INjKxTMPQHs77DJvoTfRKk3JPoX4AFZCi\nsgBX09tTTt5jWREJcHRzPNFxEVx/IvZ+o2CT08SIyXN+b2OfKxF+hEle7WDF\nvVotWyCobRedJ20o6NcbUpEikN6AF0553AdSGbmN+PXsbDMU5RL8RD0Tnai4\n12dW\r\n=xBKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEY5EtB9ynTqOB3ARed35FQ5hdksSQSgEPlJoduKPUEAiEA2VqtFWKgb8dhhQjQfONqYkrPH+OPiJRk/Cnh44O0S6g="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0_1631107074464_0.10922506609549498"},"_hasShrinkwrap":false},"1.46.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0":{"name":"@sberdevices/plasma-ui","version":"1.46.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","@sberdevices/plasma-sb-utils":"0.24.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","@sberdevices/plasma-tokens":"1.12.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bd14f09af0dce2d1129d455a0ba66efd9a7f3fae","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-sECVNNEOQyJBhScbY4Mu7n6dUTfI1mQ2FgV28/KaxPBV9SUrqxE3R89BPUrZj+FbPrKmrhho2PQ2VU3/xao0UQ==","shasum":"4b4851cf5b2323e556f88aabdd5b761cc32cface","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0.tgz","fileCount":752,"unpackedSize":1424548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOMDrCRA9TVsSAnZWagAAgfUQAJAqFsqKsGxrb2PHo8Yg\nQtmZURPJPXncP7dAZOSWkvYyybZKTAGZt3CjkTyfejYmns7mcxoKJOinuAjS\ntcJTC3Ef+YxeD9TUPjnMSX1PNF7svbycQWJr8FRZrAIacAhpMZCAbgeVSfWP\nZagO399Bb80qKNaNgdfUjjFrfLbtjBRDV1/3pDB8vcKbNlPCrf1ZlabmLOuG\n7SxdHTlLLwKtN3cIBsPA1JnM/EaZqdUspc2e7iiyftIMg2LdvF1byvyQDA5I\nv4mwUGnHMDIPqafB2KH+kKlekl7IaKdobEMl3U61pIo5o1GS4KtdKCX+FLJa\nkniPFx79ckinuWSjy+WoHvWwiG7f3hYJ0XA4nxCpvBr+sHls4QCZv8Ed9T0W\n06HPiNnDrBEk9ygAZbvhPbbkMy4OcmwKi7nPTO0XW8Hv/2YZ8J+hLOdX9wOz\nR6Xw9wTx1nRloDLsCR0Y8mroRD4TymBUvETNhnjszhsdOaSdxzRyoTVZE4fM\n+e3bz8cMdgYnQnK+CHAYBa1HrDKVP9YEkHvZrzJyWEXMUUnJsap6PylmWBSU\n4d5iAR6xwyYQc3ImyvbLp18krY5DoI6dCIZfRIf6D+4ZLQq7uLEdVAvC87+l\nrFXPoKmtZfjOw15tmmfBJ5OeEku/Y1LUiN2KyLFr3ceCpQarY6hEDoEnKDWI\nCGFD\r\n=rAmD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMPQf0n9578+rxqqA+SqpTu8Z8VhLLKDlXY6D9S6WVbAiAnijDAdZJlJCs4pyrgTM/G5Mlbi4YJKzyQV/n3RrUDbQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0_1631109355474_0.09921874350326809"},"_hasShrinkwrap":false},"1.46.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0":{"name":"@sberdevices/plasma-ui","version":"1.46.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","@sberdevices/plasma-sb-utils":"0.24.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","@sberdevices/plasma-tokens":"1.12.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f84a888e4c657f75afa8e78e7cd9d1cd58515067","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Xhxh1tZH1bZxfCmM1o9VnUnIb8Q393GSnmQ2sEjl1CL0CA66Ioc0l4Vi7+eERpbh+wM8Xst//9ADm+HTz+J2Eg==","shasum":"4993230dda2d487d1642bd4e1c20e029443f7929","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0.tgz","fileCount":752,"unpackedSize":1424548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOM0PCRA9TVsSAnZWagAAZwMP/iqXVstBcBKi3thKoS8l\ncN7Kq7SPNesTXsXKy4/gx9kRooKw8m2/9/sljWXPbQY0JkAa9rZ3D/13Ptvb\nLC+NMx8t/21lud+VHZhLS3ai2DPKmVKIc/tkUwLtolgmaFo4zbGXpW3mf2rJ\np/bbrHLrqqCFp+UIRRpbs6zi8n/Ca555HiCewwcGHuPLyt2UzF6/XIb+9/E9\noTdwINX9FuNlrHXFXAPwbXV26u0mPRCzVhOt5pbItCjMEfuicawVwkkn9KRV\nGATD8ThTZLbpb5eEap6/WmjFG9LHmDzWkSaLNuBujILROy/U7S5hT2VEmFFg\neYSq3VsQd1cuiAzT60jcvvSPgqOYxYwegsWwoDBY7wDuyVATLYti8a1f0ZLo\nUBAT4z8dvt/GCuPEE/zWnU33+Rp0tPcGF7ujx4pSGbNUdDblrR96xa3urwiB\nyrFHsdttMzIShj6WvNeTHCSxg+vcoGq8VgV6REOVqJObW3VxRE3AY3aFCydX\n09bC9eX5r5DzM3WRtsbDmIcZz7veTd0YA7BmjrIetra5kWzUIlxqOlsRhL7g\ncNYiga7CN7AIwhpuyX3b0O+6bzBxuKaQpbKPFqm1TpPcFQZF4B3ETogYxokQ\nxgt6SBSRfYrFHwTogGcyJVYHinEehbnjEWasHG0HkrEHsKg8jivYEwe7p1Am\nLfQV\r\n=Wq7M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCBMoyx24/kOCKKEnwRNXQ/eB8UPFibskMLaVWUwtnBAIgerm2ilRoYteOOKcvi88vBXpMuS1Red5yym1ujv/qNlI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0_1631112463740_0.01918720834213561"},"_hasShrinkwrap":false},"1.46.1":{"name":"@sberdevices/plasma-ui","version":"1.46.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.1","@sberdevices/plasma-sb-utils":"0.24.1","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a0389a16507f6b50a07469f85785f537bfc42e7d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.1","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-YuKkyeYo/+KBzwY18n1OAzlIJ7qb3xGc02aKS9QT9caIogJ5u3EVNwVPRrUxgduUTRscTaU8dK6gB47KeIQ6dg==","shasum":"747ce70fe649b89335469e11763b5eb3d596e799","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.1.tgz","fileCount":752,"unpackedSize":1425334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhONAACRA9TVsSAnZWagAAvuQQAIrgSz+7JGIyInQVOPVj\n681dSvs8Ug7cESmCqQZUuHuj4Aql++qGuKEJ1ndImq427bZexU0Y5QM+9fSr\nFQfvMCw4t2bnY7OUGkPheCfbyeWGRgk64M+cbrpWDVHp8zacZ/jggV6dllV5\nFpffWHaExywSVDRuEjDxiW9tAv53ov9Qeo3AiCJL1KTvmfC8kQu73FjH6rsU\n2mEPFvDJ/dcr5V5YjrHWu2q4p73mi943OP4Rdr4A40ZXxjWCtztgPkXWaSjw\n0T9YbD6tRNVrA+qlF0d9Fdm8B7nG3pZ+er+LqVrVviKmFebxHhHe02v7A704\nEZYxm8mxMhWs2d9DnWK70t94wHQEMXqCzVubp4JmuqXYuUH6bUsI8EGjXNTj\nPuYELntPEMPdt8VMBYT4EZx196HvftaF24rW3acq2SstQuQNSggZ5VIe5MzD\nAKlUWPf0YSwY4exXqwxV5LnlXZYvJv5lIxWpnQeq0go2DtZCVAX9j1J9DMdh\nJI31j0PDEvczcOXOw5jXSCgZnrKWwBd5mFT/1HqtiyWCvipbb/IJz7W9mlj3\n+x2rIq7uTQoFB5lkiFuWTDVjPy0uoaaio5ps+Cl/A2gy1ptjo2FY7UC3vDBf\nIwZHC/3VDBfiyiiwPaSyz4p1qXxYH4vT/qaBMTX3zNIFwXlbyFxfjzWIewko\nxXij\r\n=Od72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlf19QLPDKWbdSDypMYnuDXBoppRTdY6SqHokjemgZfwIhANMNvT2lBJOPizOptv0BWtw1DIwOzL9B298//jKDYnfd"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.1_1631113216423_0.7112230537482447"},"_hasShrinkwrap":false},"1.46.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0":{"name":"@sberdevices/plasma-ui","version":"1.46.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0","@sberdevices/plasma-sb-utils":"0.24.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a7ed7a441fd26aae7f1b4074ff39b61532ffef52","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-X7u+4mZvhrOGJiQ9xNJ6K7ciyZ1ZZSu4iJHBsRx2FuZ/Yoh9pKFwD4sR/glNAjVyHDr7wdQNcx7KE+ZYAqujBw==","shasum":"e8b713cb1e6a9dbc81120ead1c5b667994c130f3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0.tgz","fileCount":752,"unpackedSize":1425550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhONPACRA9TVsSAnZWagAABOEP/0fxhEqslfSAwV7qOL0h\nor5tcQvbfuR651u3JQ62Z/SpRFVdaitqDW2P8wvkiD5PVPxR0W1iLIajx60k\nbgsvrmYUdZphmgm3glQccXaMioNv4LMMqAa6KyYp/iNppYcnq1RQgIShiFUk\nmFJjEg/7PgDXvAp9Ha6ZcWYMcZ/5pY1dtzvwGhKCul0FAg2w78wQ9xFLiQmC\njxARv6al4LEhbxu5ZTJsc7ZoCg+B5Muf/FjoYYsv5rRq8IXVQTXeqFrRz3MU\n0ROHdOHRrKJdh/0fVv+X4ZMDfHzflT6ha0e2Zqa864LIlPMYqocpvFw+4okh\nxV5SzsLnSqFoSnqYit7NbGObqA2Gg8QuYL4h5a1h0+QsUe58yT1MM9H6tpCe\nMcEt1y42PROciks33dQHBP5H+T0aNLuvd9R1PWom54zW2vNka0qshHVQdlSG\nmNnEi3dA+BjskKwo5OhvEQNGNLtsUuEctcV91qhYLklgP+s7K8WeaAJSTaOX\nBIr6zEZDbO53MqIBXf2T6MdNrM0o7B5He75KARyIMfsbKBjfLmsspEBOU98E\ngFQo20qatcWmyvO9BhhEKWNG/XsyCfrf5+q6ddzySO3omqE5UoW3urORfx15\nr+SVZkY2KOFq7LTzCYYDDldIuWtCDDAzPV8iCeVAj6OTtYvkRqxAKx0Kubs1\nYT/B\r\n=eh6J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEaKl06XxQHmTeIge7oLXLeYlTYa3etNElYsJJsBx/zAiBupd4tPrfuoZms7kbOZVsNeBGf6LMHAwaU6YAuK8D3Zw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0_1631114176629_0.2858635387762434"},"_hasShrinkwrap":false},"1.46.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0":{"name":"@sberdevices/plasma-ui","version":"1.46.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0","@sberdevices/plasma-sb-utils":"0.24.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d35a9152317e020a461636e08f440f1d0dca9416","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-3nYUaASRNEMls4YNOr5MzQbaskXu4Xur7tPvU3aYoCS8+7Ojir0SpPvada10FqJ3YvYXJGR5RAQfqT1F4LajLA==","shasum":"bb0fe028820c715e12b0f5afdbd1d91408e35011","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0.tgz","fileCount":752,"unpackedSize":1425550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOcJACRA9TVsSAnZWagAAnA8QAJB+CXPFx83aHl7Br+up\nFp2FmNjpZqUi/pMrjMVSHnHkn+N69Veg6YO2oiouFv4x0UO5AEwUdVsxfSTk\naqQ8KH7qn4oiV+FqXDh3eZE80f9+H2kNBg/B2wo06y9xWiDF7HcLmq9CnK19\nW1ZaOCHruMeEPT0b4VYkxSjUhlX0SOEilkengOtOIhDytcPuUBIk5uFeSrpQ\nJpj4cT8lbs8fhuh7KC1K0x0hMh62xC4lJqGr3mm02qF7hyzhPOPfmecU0eaB\nyGt9a7H0ajxihyqYQIlP9sPo4/xllpZxzgjVogY1xeG8Ewkb1YBHTbK5oVra\n248cVIi+uKzX9/8VynDtHVNO34tURdz+lCKaDRoeLPB8fkDSaGkFFc7EtM/B\nUM3wNY2n/IRMyYzT+QtNyaP32Ch5zcmz1icDH1jDQ6t8WE0fq/5d1lHM4PSM\nZroLQCR36EHzltYnZusmdsZ1ktUKe65UO5aYFBl9DRg1wK4RU1V0C46Fcepl\n1n/DP/3JXurGThCbbxwAKQiAWcxxy0ssYMkvkrcXpe5ieaHV2qoqBkljScmD\nBOUktbz9JDsAY0zi/4lbKtJoJU7Jv4XNwNOn6c2Pv1LXCZOFiXVo5O0egfsD\nWFmDBUftfaaFTzdrbcomnIFZiimVOfof9Z4J0Ik6wlgKh5oUIFrm17dtq47D\n/7m6\r\n=Lrqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJpIFzbmXzubtZOguGwTKCubXwzVkJZpI4SfV14hrzbAiAXuSrL0hNpULwuY8y1/DaLWW+4wGTo6K7EeR8YtXCuaQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0_1631175232382_0.8619434858078052"},"_hasShrinkwrap":false},"1.47.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.40.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0","@sberdevices/plasma-sb-utils":"0.25.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"599d7cc6af5f87df532b67773ab24975e1803628","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ZJUGUpLbnQNFkR7dbnN/WKqohklutqXv/fhfxc0swJNiwAmte6kR5f5/tlyOQKuBDF41Lur9IJIuu0KxktNrig==","shasum":"2c735a30e3e35083bf0273f633cccadf9a847d6a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0.tgz","fileCount":758,"unpackedSize":1431648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOd8CCRA9TVsSAnZWagAACA8P/jHBtisN8wGs5ZJeY+Ei\nxB6VS9qDMPzHhtMHA8BhXZyWATaTPj/AnfUkprWWaQREgUP76vKcChgmEk0P\nqG1MbbmT2y5mqaBgHrMhku/JzvZ73z6IW8YL7uZ13vVKlfB4p5iZ03QeJwjR\nxzGQVZbfGWFxB4MSF010C05AKll4FhwgKcH9rB8mosDMEHCHHhUlmeCCtV+y\nXMMbR/uLb0cJzBl70GI0qRpayNiiikOfL307W/T134TzcraLZsFuiLIc+MeZ\n7bylf+VkjubOcjZoxXPO0ERx4zZtAOmKMj+VcxPi8MK0CkMrTlsukFVqMfAT\nLh+jXGn5j5K5TdcqqVGGlCxZcFQNVgpwBaZbuIQ1sZNgYhVMkgcybhTVeSfa\nnrre31UduYhLzfGc3JZyN797UsZxIuF0y/N0bwMDYKP/iF8nL9lvOHBs/Vqp\noGUXr5hI5Xsm0D+ibObifxoVrVrXSyYhjXBY3Oq7w9An7tENxo/WEWtSWqGN\nNljd3LLU4gCVwlYu7dgw8E9OvVyyuBx0jMpgt4aNTu4lWXdQZd+9WtXaKy4r\nbwv46PqlkXQM1+emdBv+32GsZUFIkU61ucwyMzQa5d+xE/Bfwwx3Hjn7QpQb\nKO5YpIQn5Qui15jp57NF7yQP62P/Xs0zV++mbQF8hEedoTTVG2RdIpbNa/E7\nxxAm\r\n=2qgs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7g5+SEj/MiB46Sw9niX0802PnTmtLfglpSfgmp3xXwAiAWCepJmpldZXKG9py0oTzKXWG7YQvNGUv7JJ/H/P2rNA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0_1631182594668_0.2738029144191323"},"_hasShrinkwrap":false},"1.46.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0":{"name":"@sberdevices/plasma-ui","version":"1.46.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0","@sberdevices/plasma-sb-utils":"0.24.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7c6d3ef0b3864e1782596c0623579177ba371c1a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-VDMoQLLMMMX/tP4+bsrdDOYm0nxQ/tKWaUxWGTvTrpCC6A1a32quUaBnpM5ODe7c1kO5U7/R6lk2OLLDryKXSA==","shasum":"98a356023bc4074767d78ca28747dc9411010b3f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0.tgz","fileCount":752,"unpackedSize":1426382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOepjCRA9TVsSAnZWagAAP+sP/jAbYvO0G5bHO5ewEYUe\njKJhTsk2VDrEZ3xgY4dEQnJsQu+P4iK+guqeUmgzAgWL5uljhKUjNbCKpbwZ\nfbOYTqs9ETrEJWAq5ICzEBCZ+OgSIcAzybkvCtf9YGpt/m0wR9/jGvqwH+tJ\nsh8J+ddVPF98rCZ/3EJeOuUzezA4rhf70BxFIjjpRIJFvKuhYvfcPIA15GC9\naZlR82idAuDo291vp2Il5L5xaGrj4E+SlNGfulR3JYsGZ3OZM0IXbeeAIuRO\nR0d0tXqq3tRwgaSVFhzUxoZwYBCF/5rBV0twNsUaXlNVgAFvG9Ahm0+GpadU\nILRdu513/NqH5uu5loIOiCth+8Im4rt4TVTa6Rgw6NeljZiff0DgNKclHUex\nM581HhNRzRR1lBkngqrLwboumqQzwjrXtOEQ81WV89XiIQkgQ9wm91q6AKV4\nGDSdJ63z9tdyxJ9GOWsi3e7OuK6znJF+KY/6IziDi4HIvmHzDJd9yoYa7Zr9\nCnQKijTEcE4SmK5bKBds4LRfvh+m6PAb7wT/gV6cM8xpEHCaXAmHUJDjM1GV\n3JJIjZiXvaOzv/FI1E6faoKmdhQlgLYeHkPADF4SqmQPcBQp2zYdzHtnIu/n\nSI53FrXjJkiRcADNX6dByj4k3KlJR4PdcCa3pesR4SWKJ7CaBV6scizO4tmT\naQvG\r\n=TQaF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATMhPXAxPIc80nMMHwc4MABZGFvADk8sKKsBuzcgdlkAiEA3r6vRNPTcVX0+htX8MGqWdi9SM34rhf4zGcJ5jD4vjs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0_1631185506726_0.7179573369221315"},"_hasShrinkwrap":false},"1.46.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0":{"name":"@sberdevices/plasma-ui","version":"1.46.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0","@sberdevices/plasma-sb-utils":"0.24.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"45271f8d435b5ebe0050625e097556315fbcdc8f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-bzNy0yA2Wa44uoXKfzBHMWZBTBHhbZJ6xIrwVYkbj+1fzQsxAjN1Jozc74smHSyTAaOkm+aahuJpPDmLGmOAkA==","shasum":"3fb6834341f39875c03d16a8d156d652421e2af4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0.tgz","fileCount":752,"unpackedSize":1427098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOfARCRA9TVsSAnZWagAAjo4P/RV0RWQ06ar7FWQ1L555\nGk4fowq1gxpd+3PBe2m+aJxHuNDnuTW7ufrViR0pkJTqkbU2LmuStglMtXhz\n+dA1qssuZCSiQPERXjFw/z7g84RGOuiuhJZpaFsOhdL4dWPuNAhMYMVSpMQ7\nH3+eMOW4virO1RrZ0ktx7gSt7nkrchToeK4V8EtBhmaMInYhgLEOd6hGS04E\nauQ2ea5PpdGbmYGvQ8hxmSjkZqaPA2rsTWEwMkq1HTGfGykkcVfM6dl3ATit\n7F7DgmQSQ6UmfWy6wdo4+wHjdshO17hqDWxRBIggPa8N6e2oKuv9etb1pDMy\nhhSfhPST1w2soYqtrm4je12qnP/4PRQsX6AihbqhXi6eUxn1SXgwxKJfqJnF\ntBoo89qmYnRQso0cHK5TZeL6vB5501Akl02lCW4lAUTnqatAKx1Fb0lqk6ih\n62O912BUm9Yq13LlLVZMg8qc3O1miTnofFUM9XgoSrsX6L62elVAJIhdoXNs\nvLhe4wv3/QudKem04TxaNMBUrkdx3fnh4cpScc9d33NLQjVGKUzNQ5yys1LC\nIV43dCIdLCjvm5gvPTi5RNjEqZDtDCwdokdglz9yNGgmDfcmeZYEKtBStHU3\nwo/IAJkHPgeFs5lke2U3NYMlCSyKdBVrnBpnqhFM/2APkKyk2udm4U+fl/Pu\nZ857\r\n=UpVt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLKUXgigreYYW6BZEYQ0Sl3FY1B4FDEe5PGNH4fJWRSAiAd5ZKMKLenKYC6SAHb+DEzo7n/LO3fiCC4gnYaiDCc3w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0_1631186961597_0.6783454935576347"},"_hasShrinkwrap":false},"1.46.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0":{"name":"@sberdevices/plasma-ui","version":"1.46.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0","@sberdevices/plasma-sb-utils":"0.24.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cbfd11b2f0f940d01d90591d5abfb0ec8598a62a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-7jXqsy+23F7Erd23dDFZ5fayy9cVAeIKAtU1YtnpfEVu+t1BRSfR1vncQRJ9sRW8SU8ZXCOgJjxUcCK1P2rJEQ==","shasum":"1a639b1fff6d827bd7630474b802dc21417faf24","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0.tgz","fileCount":752,"unpackedSize":1426758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOfuSCRA9TVsSAnZWagAA/mEP/RoeAu/U8hflmdJbOGw/\nbkDbU+EC9a6aGxp9NZ4BSsPvzzEo/Ca6WOKB+80CvCjqp3nPMOT1g7+406yD\nVJ3saAlAd4qwNmfNAWaoGKS4T+FHBCFkPPO1cddl+3xWwvUfRE0CqfmMDxu6\nGiHG/UD0ZRiMUf6DuIeB/o6xBmFm+0gh8tX3LW2cB/GFJNkO9VfOcqHg8RQY\n2fWhRw05+hn2ktljK+3QBLIZ6fTWSa88CVBARf5VLXy32GIbTI04/QrbtO9d\n90ndoLIup1uM7pqvX/tFt4kzC8BA2viN/y3UNg9CCbtgYh9p72EKdRTLbfXB\n0zJSXhzupSV55Sw2+00Kc1ilDN5gUDymo83qMyHwLMU7lhThPpwNzyFHFE7X\nsJZI2LLGb0DFWq285+yJjxAixf0fBlbGeRPk2Nx0wGjO64BG56VMIKiNUun6\nhRJ0Qmw/9HQFVa/IzwYiIe4w5vmRNNF6Xp7QyAaY1Nwl9NR3kYeUVeShEFqm\nTUTK2riFJ1vPj1obRRAOOTT0xKX8hSdepH+qjhw2P/SWHv6nLGRnjlvf+l0V\n7qSnzgG6j9pBCGSzZKwwSoGDwFKvlp//ZdEpslSwpNkC56xglLNCicmB3Z1S\negNg7Vjj97N53nMv8LJ8TdIGKwRgLAjRZeLR68Rk57Xzncvpq4/5JqEto54Y\nUOi0\r\n=A9Kb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLN75lWetGCVqmWnRsqpzwJ6yPZyz5vIxXQqKbGaDuSAiEA7qLv6TY6up1x/DzexL6UaTPyTcMyY/roS+OvRMPfvYE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0_1631189906233_0.6423973215009089"},"_hasShrinkwrap":false},"1.46.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0":{"name":"@sberdevices/plasma-ui","version":"1.46.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0","@sberdevices/plasma-sb-utils":"0.24.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7c5fbf6791406c26628d2707bd524931fb8a9839","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-sNQsb1BPDFKAf2gWUF9Frb4hC+L/N0745al1qPijdF3Lqu+m21mXxJ9v4LQiTOCLOUcXH5TeOSTs3IEA4wgCCw==","shasum":"892d31ce4211e5f2b8f30051b32ffa97f7afac9b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0.tgz","fileCount":752,"unpackedSize":1427046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOf+iCRA9TVsSAnZWagAAOk0P/3OGKej8UtsYafTqW1Ax\nyFwnPCw1cNEVtEWaod58KzChHYx99192CGBa/wvU9TKcFzsaPZ0oBqEvqrYm\nGWW8bffMZLCSaCO+Y3DiIoHPlfm8/CJS45Qa44oOCqlpq/i25nWM341ZhRyP\nxDrL2RGAE9e9Oe0pM82q65U3OVpjiavTwM71D8FVO+d0IJQPa5PP8S5lN07o\nimsI7b3573H9pTGO9pg5144ZhvUVlv5WOP6ELt1Ko7EYn8CEqOmpD1hzfeCt\nJ9oTpmrbrYD4mGsy7RGZLBXg4Ngzwh4BLgdmkJlRuLYPGXuDSuNZr0BDgZcR\nZaIfEwEQVcCzFXrKTo6fh22EXkPVc+hrwc2p/A+jlW4kDKf3Km7a1O3jcHiz\nsVWj3ctOQft6iQ3rxNaew/z83iuy62kVUXygiHRGz17VsOykTdpqAfKbE0gY\neNytRCxkwwQVZzzZ83yB1fdM82AuaW58Uc9TYBugUnVmVw8hGVo5j3iPo/t/\nPj6ZUlQkPDfrX2+pe6Bhpqp2kvelsbfpYy1vH7svaYWLgrFykcxajyv32/Mm\nVhjXw3I8zj/9XA0P5RrOHDYkZa0mpFd2Ad6bTwsFMbEdUuyNo+dw7/zwRsaa\nhTT/mlzMx8JX1wiMMo1Gbz8ho2PaIXpZ9iKFaVxdasiC+2aoc3V7veeAtRpk\nD3x5\r\n=+tG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMl6As78hKp2OMho/06+2lrxhfm3TDEgSWLuTIkhX8GAIgTM81qSqGIhXDqDlXoE/FYv0ofoMEZrL5/rZ2JFuc0kM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0_1631190946539_0.8437140906593814"},"_hasShrinkwrap":false},"1.46.2":{"name":"@sberdevices/plasma-ui","version":"1.46.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.2","@sberdevices/plasma-sb-utils":"0.24.2","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2c027bd0f6a72e6d831b68ed3ab83479cea41187","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.2","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-PkJIYk+hknpn0MJXqWiiAv1IB1q/Iz/4X7c1bsBIQ7lw2Mbe/PKJz6h9ucUs6KMpEOs4CFrK3GUUASdbLQLPXA==","shasum":"6b6aa782f4f8fbec2a1cd2e48d249317181d0206","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.2.tgz","fileCount":752,"unpackedSize":1427513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOgQcCRA9TVsSAnZWagAAFLoP/3MGlgi+xi7ulzNyCvrJ\nzM00/WbXQfX4WMK8KJyUuo4BD8kNAspqD7uugFmusly4lw3wUsD1y1ksagGb\nmjeH6NVj0Y3aNDZcSAZnXzkL/9fDaKxl8KVYzxjhgUOKppLds2NiWCxxl7UC\nD4qFu0pUXTI9MOLg7d5oIp/fEAwJj8xURDW0hzKem5CEElur/IIbPGTPcD7b\nfbiNY8Tu7qUEhkip3uLOBD+HTHiel/7IGX5eo8WKyiShwL0TtHFxhhMngWTg\njV4YsQZyWhFAUaAtfiswcylGTBxRi7j6SLx6HHQGbswmp42lnKR5NfT7v5HM\nkQc1+NTvPxLbdAf2Dfqo67ddcdjiVRafLwapeyKe3CGS0ouclyAfmqzc6q0n\nIYC+lGLolrxyYWeEphAuU6STCvEatYX8Lo443NnEdjpZNvY69EflGaAi59gB\nUtDmcFfYk/oIDW8SQIsezrjf547Q4WSmTIwZkXKy3ZV1FDnTu4SG5qT7vcgy\nBy7B0U3ykd5k5YSsVHVu61shrWag0//mi6e64AVuXfU0fM7Pia8OZiGaCoeQ\n7HikRuBp6Nx9+epX3+Y8s79PFOqq9ls5n064+Emd+07FyG5s1p+Ry6O28Pg7\nCzy5Crk1N/1uyUkeBJvdGfrSTI2sAWPpjdS1Qyo3DnF4+bfYUiAsE/uQa4aI\n5/mM\r\n=qcr2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLnvZG05w6XNDUl/ixNOgk847NGNmli1n4BaqqHcO6wAiAFLMzGiDmAZz9LCGStrv4AVxS/yEEJa4AvUbjat9Uiug=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.2_1631192092813_0.6575066551139841"},"_hasShrinkwrap":false},"1.46.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0":{"name":"@sberdevices/plasma-ui","version":"1.46.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0","@sberdevices/plasma-sb-utils":"0.24.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5cbd912667f09ae3819c685b21e62746d3f9a96d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Tg6H5jYG8Rdkrq2UyczsEBAphkQLD19+/NF1xj/ZPWhanaMo/Qi7Zxq9BMS9rfTE8fqq9e8d8uQP3PJwoy9GvQ==","shasum":"96e9a2a60176d2588e30b92acb8caf533119947e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0.tgz","fileCount":752,"unpackedSize":1427963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhmlCRA9TVsSAnZWagAAsSQP/jORZl81yd75pPXoUua3\nJ8vrBRi6BXmftT2On6A+zMPajgliOUSDs/UCfM91KL58hZvVDWY+2qbyBKZb\n393HxnU1GPW19rLtpAFqtZUoxG90IDDAR8QfVzgTO04JcrQ0cDIt1NPt5Lsp\nQ82lU1fhZzt0sWhmelRkojQj/VGRBndTcowBxTmmMJAj0ScOC0xVmzbX7pBf\nTOkWuy5/Rf1VtxQSa1Xxaxy3SLVGL+rKpYpIQtfak3cEj3oT8/HuwFjoaiUH\n0+o7crniU3geSUGEBZplt9CXnXRE6O/R0J3fPBCEmzkxVgsqcQ908d+8wvMg\ndl0nZ7DOENyd5Vi9974RuCYvC4jYiyxObG7u7jsy2DosxERJaP8zZ0RbOKSL\n0zu7jx+ljL2V68PqCETnDd9ZvPY0Qo9DcGweqI4/FYBBRAn7ISwBc8i3Xpdv\n3vgRw96cybdvDbIFskTTYsocKRSyTwaxe/Tz3GT70zIdjcOfLLhXm8qjl0WQ\nhEEz9vSEgatimlLfQkeOJQBJo/48hg1h9xjmzIcIAeidqodPNgD6F8B6tD42\npR8nXUKAjMx8CarLd7F6sc2JRRAat+9RbCNXtzaAEgTN5HyjljDKah9XBbe2\nkKTWiTdwP2IGrLpNJi8S4MR41cQjyGUHNUMHQCNIqZIYsmpYqDSQGjmkK6Fr\nub4l\r\n=+phm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQJ4J+afmMq05XKO3wGemaZ6b2ONqKQBuVcg+uuZuHbAiBirN9dwzv7QF9WZz3brzYe8gqFHxXmarhbxLQUlTIVyw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0_1631197605563_0.3595727816380816"},"_hasShrinkwrap":false},"1.46.3":{"name":"@sberdevices/plasma-ui","version":"1.46.3","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.3","@sberdevices/plasma-sb-utils":"0.24.3","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"19eec832b0ba77b787ab9806f5ff084efb041623","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.3","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-iHueN/N+GC2veCT7Th1e2yVfSGJHOUzWxQbhHeo1/CxbjgYZn5YGXH5GmQiCEEEERk9iAMR8tqNbVZHoSEp68w==","shasum":"4c9f33640c46007e9f14708e47030b4980bfe348","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.3.tgz","fileCount":752,"unpackedSize":1428247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOh1JCRA9TVsSAnZWagAA6qUP/2yz8+/k++bBKm2Wp5qU\nKRmQHQKC4aziWN2hodq7UQbrAJWoVqLmrv53p7XNFg95v+Ka2F9LcSTuoPpU\niRf1gtf6UoXqHHNHod57+4EEDExddoXi/Y0mNRhncC4LWY5yc9XnUkE0udSD\nfxV/uWGseeNCjC0VvElz5+SOmuc9cU0lqmV/u2k4wTLPUiuum5KiFR0nJirG\n7Z1Ai4sDuCSpqThtO/tAQLtyJynPdcRaktwv9NtX4hGTZ3uJM+MKqUE+/QCm\n50mmB6c2cBZkY6M4nSRZmjDabRRS1HMCZoL/l3UZ4/x9wkPUOnV5uyP1TA7v\nQxZM8ZXcRA7qVgRWbzewm9Q+pEplVKUBEQmeITWiSzu0HbL2rPJgowohxpAs\nCVPX3Nr7HYTAqX3EKxGBi2rV1qPznLyzwWdc6j4TjUijzauNXFqsmz1aJ5Ax\ncvJgqMRqELjop8Y6/Kvqcr6VZeJTNkJHHBS+P6I3ppoZ5l9PIqXQaMyKT3c/\nb9unouw/7TvBjwUIoFUmfs4cAa0E29RxfjSbynZD4C0GiJFV6sl6zpDNhdBv\na3jPHhosSA9fLlkQ6p8CIpccjUEDvf1exYLtPYgTuxIbY7hPdp7eVE9TUvqY\nyFvbBcoSPwBn8c/nhX89AhHzKs+E0mU3iSlThImn8pE8azmXsbJYSZ8nQvo6\ni4pf\r\n=K9nx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbl/ZQSze/u7h6bZR9CjndRoqX1CGMxWob36EQQIUelAiBMHlNYH2oJXylSxr+K3r4RcL/Kw4ueLzMmlKU3L8Xa8A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.3_1631198537702_0.38983920857179943"},"_hasShrinkwrap":false},"1.47.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.40.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0","@sberdevices/plasma-sb-utils":"0.25.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d75d7df233ceed9f460a8409a7c048d4f72673b7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-xSbOv1iIAmpfddWNa3/0g3h61FhiBXEuctb/ew8z6Dkvbjjw+9s03wi3AkPfDA9fR1Edt3aXialIq+jDyiLGWg==","shasum":"13d3be1f6096f48608cec21bcecadc5277f89905","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0.tgz","fileCount":758,"unpackedSize":1434561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOirkCRA9TVsSAnZWagAAPEcQAKBl35IimAowxHxVMatj\n4fDTjHLnHaba0kCybD1/MRdRuqoHFUKf6OalVZDXb2hjUivgmWFgXfqaLFuD\nIsgmDUS/r90yk/jQoH3C+0wUciViApwn6oEFnK1HoW4pHSKmaS0E3errQrid\ndCavOmwBiw6I9lLJJgq2jM9IhzmPftacv66NqEPSvuDNwYMRcnZkji6YSZro\nZqytNx3QI2Vt2AE/m6wbk3rjZDgOu2AxNw9r4HhX7cm2tDU//nN2kRN9ZwyA\n/rBpFwPc26TBpseJheHtQNV2HrGCE3uIwqsGuI+0y6jAWJJi0dLOrT6NYGmF\nuGLIZAgRGHSYXg8PInJUqYltmH0EZQlulRES7QLAFhq/wBlSxw77YuuxQnRS\nbkxxPQlTF9f32dtOB5GvNM8gZq1mij4y12U5eVeIZJXtqnZwKWSXnVSDiycS\ntAAAVg/JJqUJTwMe6nCKauOKmrZHT2BY1rnuAaxnkra4HxA5VfNpNbUL8YqM\nVBI17OrW96aukvN5nptcNBBemwjpU/3PDxqH+OOOJKUSJofHNYYM06fbUnhM\njkEn33a8IlW0WksU70lJZRGP2sXdq1TNoICUfhu2mIG/j1jlW7+6yMjl8bEI\nWCp4OYKbE5OgAF3SAYr9VWcaV9QSTNgfzY5W8mukrleQzpTyOxsPzb18jFM5\nKvyg\r\n=0YVg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuGTswfEVFZDJDHfWYkoe8z9g9wDWR8DS+jZNTgWpmUAIgIQs1vze9rQOFeifXRu5+DCx4ECinofcd5lFiwiC0gFs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0_1631202020060_0.6860165781341383"},"_hasShrinkwrap":false},"1.47.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.40.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0","@sberdevices/plasma-sb-utils":"0.25.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a8a1eda0b1886fcd7dea955f98dce525c6517189","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-fdJxKe6s33hPOUnAounqf4ORfJKY8F2GFUVVhnWXrzNSz+2q69m3Y9rXVDPQq/d8Rde/dQGutYVxOOSn5uUmxQ==","shasum":"f27457aacde07aa991f897174d430b7d1e21b5f5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0.tgz","fileCount":758,"unpackedSize":1434561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOx6aCRA9TVsSAnZWagAANgIP/0z1UevsO+aSaUYDRmak\nJsJzk2ZG39dpEviiLHMxCimKBugDXpCDP1qvSZ7Pmu9bTtTorjobxOFZbnmD\nCu5Pmm85rr4PTZoE+EpF+dTbTOQk6qvfaMJjcTvwUE2Y1f70jLPUTNuIYqQo\neqoTu8ezkgq1/R0lIMYZgAFB9Ti8QE9eRoWlry8WV6sgO5KK+W4IvcIHo9Vm\n6xaNaOF139JF2ESUNjvD2ImEeo4EA0bnwzTNp+rgolQNTziBFxDh6gQp0wKV\n3gYR6OlnuN1Hr1nBKRjocaE91iK0PM+QF6R9r/tG06vh/GCAbBX/v9tP7bXL\n6nKBety0UXq7tFgJz9nKf5h4cymmM4zQ9DhZZdJr2UNPki48kU4jU1YDEBUe\njuknXZUeo0pUd5gHIqJpngpspoEVxHAYQXHmJ4IdrlSy9wbupTYrt8XDjFrs\nw8KEgNRk9W2B8BYeCnQsYuwPWpceQtsC2G5v/GWD4hp2e7NbVnN36J0wGySC\nfX40TP5GR2M9Ut0a04haImyz8IQzHXekqGN89P8j5zomVZxPNZUoWKPMBI86\nBzKVv0p6DZ9HYZ3Hu8UbaGJUcX1Jir04Sgrmq/YM4lNY8ir02TQm5tZUoFBc\neMvb9hJQjQ16VgCiokWhebnQcDP5ES8Aavfrzl34j1J3s+g84oDeVzrcs4oe\n4I4m\r\n=82s6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID88YbxBmZQDJOub3kiFjAed1VP47mO2L9CuvDbSqnLnAiBz6Xma7m3NxhMJ1wUkUIyzRaMouyN/7THLyAyVB+zm+g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0_1631264410200_0.6608197467090946"},"_hasShrinkwrap":false},"1.46.4-canary.800.d2ec6a8d74d5968993dfedb50c98b88b7f7e7c66.0":{"name":"@sberdevices/plasma-ui","version":"1.46.4-canary.800.d2ec6a8d74d5968993dfedb50c98b88b7f7e7c66.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.0","@sberdevices/plasma-icons":"1.39.3","@sberdevices/plasma-sb-utils":"0.24.3","@sberdevices/plasma-tokens":"1.12.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d2ec6a8d74d5968993dfedb50c98b88b7f7e7c66","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.4-canary.800.d2ec6a8d74d5968993dfedb50c98b88b7f7e7c66.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-l61UBWROJu78YZzulBjV+vT1ABS4z7Yvc52ZCTdF8Hg/dXZmyzszKJrw4UyRK4W1hOCIZ+Qv4wkMOtlpyYbKGA==","shasum":"a7b2a7765f4f5ad8923c60898fd1ce0167aa4f94","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.4-canary.800.d2ec6a8d74d5968993dfedb50c98b88b7f7e7c66.0.tgz","fileCount":752,"unpackedSize":1428301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOz7GCRA9TVsSAnZWagAARvcP/AnvgdK9PEj2ti5cVB/4\n1OCU7Pr2KcPy/8KTsRvrKTpX5roJ0QLAZ5I61VEEAQSp3Yb88DOeHHZh81sx\nXz8p0MQQBUGZ9YU7Posdl3BGCRhKmsHkI/tEquuK6LqZ/B7i4CPTVVoTl4LK\naxPCSttPiriwTVqs4llAp6O7JNkKrun/An1MfSnrdmjN+/xnHBmesfemfI9I\n41VPu92nTGTLWRw0t+9/frdC1ZKylvH9CDTiJ53U6+MNt0rKDacNb1yfb6yo\n+1m1MPc/RewuQpEvTIBFgFBw4sx8+VZuAm9RdEMU4jhRjUl28P/xsBpbNwEQ\nwVP97dkDbBhEPEm/dSJRR+RPeH1Uti/jA7PaJwL+kPAUI8gGMCtv3/Gtp2H5\nd3P6wC8O5sx3HifYb6p5iF9iXzC6q0XfDevu9QD7MyajgbhWKEaOlPUIwxY9\nktcFLF9MF/VHqLhnuI1mcmaECG3xIZrQcKShbEkDRhaTbI2NLbkwUpRKE2Ho\nJwJWB0xW8AyJWbGLm6xRSatBzS0mPGrnKU1W+72G/Dr4wnWdTaLKbf+ux1XY\nBSBBYf7DC+SBFSLvMWUX5vGL59N3tEX3pyyKifMhDu9XKrROBlJrKWBzKqdt\no2ec3Q8urnTCUzDpoje2k2hyHwi+ckA1BHGxylzofvJkqO7rQk/sn5Eore3C\njcKO\r\n=oZXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGksMcwyXnKuwSN6Taa64ufOlZw7Mo/68HAbB+TZSr4jAiEA+cBCokLulYk/idI1iXT0HsZYeodV1pPRD7QG+C6EYcE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.4-canary.800.d2ec6a8d74d5968993dfedb50c98b88b7f7e7c66.0_1631272646637_0.5733569455053455"},"_hasShrinkwrap":false},"1.47.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.2.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","@sberdevices/plasma-icons":"1.40.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","@sberdevices/plasma-sb-utils":"0.25.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","@sberdevices/plasma-tokens":"1.13.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ce1456091c00199b123252da70d7bda6f669350a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-t+TV6ocg/ESv1uYj3fZUl+2erSQJQCu9sIivMAU3VVEOFhC/KeXSCtpbCjYrYdVTLdphRoWPvX4LxQE0Fm8aWg==","shasum":"744e3db68c72b0d4b7c815e9a7acc9d8895a3a0b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0.tgz","fileCount":758,"unpackedSize":1434669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO2Q+CRA9TVsSAnZWagAAOyIP/2ljQWnVow6EtALgeLtU\noYYlTJaTTT+/8KFs2u/CJ7Sb6nIsXCvYacIxFm43pzhp63m7PfQQOU+Ur0+e\nZoa3tU/PPpjOHZexzZVSPR15P5V0SxO7byBM7BqMRLSMcubcwCAR7T0q5FNU\nn6uS6QA98sDKNgfZUNiT77xzENCjbb5lXSynyB1baLXkqYVAjA9Z4yEDyfrM\nkTvUkd8+V08nGHFamiZJDK9aA9lI9gp2BiLf5CNi6RHL/f0RsIIImHgF+jdJ\nVCUoqZgoSSgS2zx1qKVbX7qwh13eBQGsbk4dModY7ktekRkClfNMwoCFh8ir\nvzQ8XXUNkFEo/zfGCvMNzsyyl0s6bej+gh7YMGg2lfVNmlEo+jO3slgxpffy\nLa/D/Mv3bl+0AaC7pFwJv8VjnVtM6poAbU7QGQchJPaaP4JjNyZxCLdRUlzp\nFImKKQ3mvoTQgiUNjNoPWATTJIA2SWIb9nk16tfSxz8rDFCE+pMvVk1D9Up/\n7kcjdHuzSZS4sDLfQJIehPRqiKqmRGizfLeO8zmKh/18EF3ddAqA41lQW2AZ\nriLELVtmgEpPBkNmicY4olFRAPbRe4MMSOMEl7o0ugaNjAOcbxbr0eNesZJh\nj80ZEjcw05yJ3wl/9exaev1K+Hed+k5lb/yS/9LEScmOn2LZRykka6iYa772\nTBqp\r\n=NmsU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmwHFkuaiqspNOWsdO3+MSuuUQgKelfX0M8BqFLqWFeAiEAs0gOFfDhTVNJgh/vsqC5TQQj0YGZJsI03dS7bBEZcbo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0_1631282238482_0.322688127071445"},"_hasShrinkwrap":false},"1.47.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.3","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.2.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","@sberdevices/plasma-icons":"1.39.3","@sberdevices/plasma-sb-utils":"0.25.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","@sberdevices/plasma-tokens":"1.13.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"597904e9119cf14a64cd187ba7f662665e09448a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-OA3LMOmL4aL8tS1tvFSXYEXqIMLZsCQhaxOBA1wZwdKH6oXAUnkHmGgTEuyqEQVxEE9eK/HDrDcFITOPVvoiqg==","shasum":"49e7ff75990660fd64cff38121499ce30fa3cbc1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0.tgz","fileCount":752,"unpackedSize":1428463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQJLDCRA9TVsSAnZWagAACSMQAIwnYLM53Y8G77JptWvy\nY5h6YmamNTFmk8kfgn6EbwSQu+H+pjulj/9rEDpGEr3UShKmMgJZeW79WmYd\n8PlUKssCRUGsv3JiN7jQZ+jse1F326/v9nyvoh4VVLKV9Fc85FrM9LmkC+yf\n1qtmX8bDM3sebUZPxP2HLO9NWjYkP3lC2/XLnAe+AuQKZ0ANt0kHU13nhNG7\nuiiL+9dcPSpEV0//9xImteD69CEqCnbyJSikp9pHFuHp5+yLW1D9q97KjNgt\nnJuf7ZD6FXap6e/icexfxdwl+PrlkO+cfx4aJSc0xh+1/y8L1BnLCjIBlbWb\notgApUYhm9Q3FcrKjpiX+Jznhp5qipPvVcqqTXwb4cTgP+bGx+1I0/HuLi2j\nXIQRBxR95t4LVZMc44Avn2DPqLscwDHzNEAXWQ5+if6TKMXvX+rP3xIh9Ftd\nuRL1RKMXZfKcmdIMAKcfETBGQZjjswoHPN49MwMCdLZXDCk+2AqZat8ZGhyj\nkqoS3RHO4rh7eDFgb2NrMIGvbPekzRFFfxHGon8oscI47DNc6LUxdKrOpEGu\nf8q3nYerTgqSY4NSyhK385A3VZ3dmf5qwBqQVryOM+hB/o+2Mq8KSBUfPi0I\nI6zmEg/2Ct0q8Dwg4lAnYW+bHIsqohs4gPqubGUFHyQAXGr3zD6nuDnl8JKl\nV1LR\r\n=vllK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDU+HbSHSzFGCN0do/Wbg+8hWflf69OLH+5cK2ppmh1YAiAWgrnhrtRKnTRmmELN6IUTV1mqRsXxJbs6YO8Z8rK6Xg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0_1631621827215_0.8571460365741583"},"_hasShrinkwrap":false},"1.46.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0":{"name":"@sberdevices/plasma-ui","version":"1.46.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","@sberdevices/plasma-icons":"1.39.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","@sberdevices/plasma-sb-utils":"0.24.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","@sberdevices/plasma-tokens":"1.12.2-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0a3c2d6e68764f8e41eb82d87cf61236ee83b258","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-lxynnVcAH9hpOUVC7/eCbw2m1QAWlxxWL/3uuQe3XdahG2jpy4FVJzhrp8OknRZyX19e5XRgPaTZ93kmA/Qwlw==","shasum":"c8240cc19539ebc7ae162351609612695ff96e2e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0.tgz","fileCount":752,"unpackedSize":1428595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQJaMCRA9TVsSAnZWagAAFlkQAIFp7fLdLRUF0C+XCJmK\nWHU5CC/P+0zWbOHFxmzGPTsWpItTaUg0kPHxwY/zSSXbZh4h43Puj31dy2TF\nTy78IycFVNQxJ/v5s45Nj/oS5W/jjyYersKLdEBc/4CrgORmnhFXwckkQ8rG\ne1qQClNyOni2yp+j2cHkkBZEjjuKM/4Tj3qYXX1bFRovCx7gpwKu+4A3+ax7\n679rxi3lkNm3eaN0YXv5Jab6InlOeurn5aW28lMJDjAuuMLcx0PVoOT0fA7l\nVZ09wsIjnk3vd4c7lj+KYQUlZfPQlGYmXIeyaKamu/ggGmC60UodTe8H+QnA\nVa6Jgfc34X+jUgSoIPvMY4Z8hiNd+hwOenZ7mXUKzErlfGH/gmoW7e00EpFW\n4UGAE5SiFVA6mS8NlBzv8JOrqk5WMcNEtP+pMoGD95h9viIhSrlvFwR+VhH/\noDTDtrPZwhhn050dBK6ZcOFmVzemTODeAdzyk4xyaRXHHrxUojH1nEFVcdL+\n+i09ZwQuhBKbPGn7lbPN20Nia5xle8WoGPM5eDaHyhEmldv7pSk4YqgGdL2y\n1Z1HsnKqpDnnhVMKOn8Nl1InMX6Zv6dS6VrATOQExkVUc2zRQc4WDxsVCGZc\ndiY1mvs9eTjDX1hOp5xA5akq4OHDLs8imOF1n+RhZuDNOzDN3vdn8xgNLlvI\ni70w\r\n=ljG2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2WV46SP+GqQwijfbZr1trG2zQGBmC4GyL8L/Hyr+YzAIgW7oypeOo06vyGfAz44qpbsVZP5Cxma4obGKtIrudZTM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0_1631622795769_0.24100879705171452"},"_hasShrinkwrap":false},"1.46.4":{"name":"@sberdevices/plasma-ui","version":"1.46.4","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.39.4","@sberdevices/plasma-sb-utils":"0.24.4","@sberdevices/plasma-tokens":"1.12.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"db2c927aa4a72a8bf12bf67baf2ef31a60c11c7f","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.4","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-BScV3up4aXLt8DpMbnIQgt8j++KvPspdYr7YvUnzigHbltsZrpLV6M5VQ2B3M0JrplonIRmBjFH63ej0RLphxA==","shasum":"a81cd5f2566ceddecc027149a4cd407565bf6227","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.4.tgz","fileCount":752,"unpackedSize":1428499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQJsFCRA9TVsSAnZWagAAJ0cP/0Dk3ERiFWCYuQMnh+l5\nsOhR/kgAIdV+yBJXjUvgFmjCFu9/AmYDdA/CDX+4hVLaF2rScMlQwFVECddB\nPsCwA0mRCWa0vlTZC1/5058WDLkeOxn3stVeP5Gk+T9AockKmbZecNUapjiA\nygy0C1zLRZVRAZvjPwZGEF5dIMbB+jBV7CE8atUQaiYRs5JbDur2vzYE4rXz\nCyCyIpJ7lJe7DtEs5I9EeVGdKJnSzOQeVpqJ6d6w3XLGmQjqyKqoGT9aGA+N\nEhjCJjCYLiCpUHTbQQkdM1cXXGuFedI+pOPszy4W+Kss9aSmdKluaU7+crt2\nUolMQJhUcwTmS/KvCPUURVqaq8oSA2JqFq/rftiuPh1Nrr7GX6ZORqjuLIjd\nKXsuue5PuYbXFOeHsVvNnNeKYrniabmRdN0x4HcmRN/udWYQEWXpc2gqCZq6\n2YqMHDOafMzSSMkWGG7MRByzsG5gWgk0UrrhYfA5a26hCKB1asXd0tdvnciQ\nMHYRkF8g871BGfukBUlE8JFDE/r6Pqoqdu10dr1uFdShXN1qhzy2RZ4HsW3x\njX39VtOdZp1dfGXKQvCu0xWM25oJutWesVKwbKkNdc/yVStcAy/B/zVZqBqP\nKXY/I7EVw+gVcN8h0GlhfordJigOrATIzQa0D84PRFh7Y2cKi0x96XnMgLks\nszw7\r\n=lEjO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGK3TRpvXq35zZ2ylBw3FxF4WNmzh9gGehBJgFDnaIrXAiEAkLRkx0VtuWIuketNbs2IvV+GY1rK5/DaWbu1rqeR0jo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.4_1631623941260_0.8800968382515033"},"_hasShrinkwrap":false},"1.47.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0","@sberdevices/plasma-sb-utils":"0.25.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0","@sberdevices/plasma-tokens":"1.13.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"da5178284055e4e9211d1a16c1317193d10b52c0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-USz6wktt4b1GM21qtHhkeMw5g51a8f6yWIKICo8OQb7ddDma8u69aU4iFTzUK7WIm1XoXQzXAPcY9BFQU4khlg==","shasum":"876859a5b96e9509bd0042fc19270ef4636271a3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0.tgz","fileCount":752,"unpackedSize":1428715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQKudCRA9TVsSAnZWagAAfSwP/0KWn79BL8CXaBmLPJZb\nyUNIXsrrPtRq3sIikOLj+dqnpL9rm+tFaZtf5lLVljKhYWsTQgCAmGg1xj8s\nzkLc/xnmx9sxipJ2PxWLaiZDoVZx4MEhi1UUucC5pa1N+wJaWHZHCSOHg0Sp\nuk08ceV0cq1SL9VvI7SMe17l0nl+gDS9XRjnidsxO5UptmH6jLHb7fSs18sN\nsKwDC9a6zre2ZMr5vWnub6TaERwdW4YxUDDyd5tjXGETUK+XVB8TbGnFtL3A\naQODbsR6A6oE+0uKR8biXMJzFasFOHnNekA/YRl9dU2XZ9YsSn67tz8VrQRY\njvjI3CTIHGGC8HYYxXD83bofyey+VD12bB6K3DWWl5AamvU4hjqYDJj1g8Th\njiI2loTr62eDD4MbrUi7H5vfWGNcag8xK2PuxXmVtnBu/uVwMF3++slsLDPE\n7cNX8Hi18tpdcPyl2C7AuDX8YvSk5PoePhxQsg6tis1Yt1GoIi7Asdja75UD\nlsHb9rK+XXxYtjqp1UWUGe+Cx4owV7lgLpEWLDOBQWah1NMR4mFH+P90+8wl\nAf+DwDEdDc63+qGhG++7JmES90AmuYh6qfk2rq1i0kuo0XU8DHSBqCCR4pOw\nkoQCEPV6jv7e4zzHzN3xdguXjupflCnBm4w0uNFeu3Ulv46L3JBEsOBD9HO2\ndInK\r\n=qlsh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBLbOxa+Z0gSXsolkTv65H4GfM7aPIboxOFZa9pmKjtQIgYg3i3xXcCw9fB/0LIIqCkZjBKGRZJikITkFhaN5UwQI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0_1631628189568_0.8216351795419834"},"_hasShrinkwrap":false},"1.46.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0":{"name":"@sberdevices/plasma-ui","version":"1.46.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.39.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0","@sberdevices/plasma-sb-utils":"0.24.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0","@sberdevices/plasma-tokens":"1.12.3-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2dd65444a455f6fdfea3f9072686abe075f52062","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.46.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-9LtngsLG8byZkSEChdWmtxmxz09a+O4mb5ob107o3JPb4PiZScGXHAXsOfCtyIgUnlezkHwKlC17qILW0XjPug==","shasum":"bab99ae5dfd4eeb2a7957445482e1bdf932e6be3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.46.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0.tgz","fileCount":752,"unpackedSize":1428594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQK6dCRA9TVsSAnZWagAA3h0QAIbiUHSqZUf68x+S9/d6\n1e0lqdiV9fc3nTzGV4TPzfmjRec4jk50+4cRAngMMJlBJpCPmhq8q3YaT4T3\nE99Kmq+HaMvmO/ueijqafz3T4JHTZVaGOopWjgFIlEwY8pXmQz+Yz3k1Y7PW\nm/+S8oZjyasR2hzDVuoOr5WsyBO2/D/2LqsMYrNXHFdZYdZSLZsmPhGDChTe\n24AOjPWtX92CVNvC4bsS1x5Vv6Tu0SkXtWKQGXT6nab3hCe9DPjjFekEMEZC\nTkaBxDltx94VjadWTNoLzCVa2rVgtkZxx7tPeaqRBVZyWfPbZorxtT8Mi7AN\ngFfSNZ7BsepXJyLbz26dFJTctswLB8Lmih63eP7jr0Dr663cdlkb7xVu/UMM\nEShDvlzcGqMYMckN6JziFJyO06QXWxXipa+fV00Axv+bJGZm1jfMcGtphlqi\nE0Ep5JR7R3q34YfftUEu5tGalybbGBKu2ojIh/EaD88Su3cKoOw15zcQv0PG\nQ7cwaBNKhebFBkisXh0sKKezfpaLamYSqkFN1Qmq/5T0aKu+VI0X3Jtgxw04\n4IwLytLwwKd+ZaavfVY5sQP0xwkgwzsxZ5QC1FRXUXNgf4JTCaMM9Jdnsxgt\nwIK7E2xVvOmvzXfH53fdZaw0xi536TmTUAcjPToXdK7/V/iDs8urbILPZ2Q4\n82N2\r\n=ZcYb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDicA/OMzYBFGHuDHsu120OgTePkl58u/cao4tYr2gOAAiBNcr9m4Ewi7G+Cx0bkcHNabaPWHbvLUCxJtF+BrfFXGQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.46.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0_1631628957034_0.5107927850314176"},"_hasShrinkwrap":false},"1.47.0":{"name":"@sberdevices/plasma-ui","version":"1.47.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.25.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7639644559125dfa752cba538f1c0f58edc85735","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-+4LLxafwPvsy+4nMeenZh8oJNVmYsLwU0URDF2K9Vce13obDH4EODpMzjNDBbKhLY7E6rvJHEuik4D8XJQVVAQ==","shasum":"ab88d9257d3df2fbe5125c97e2c62c4f5c3fb18f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.0.tgz","fileCount":752,"unpackedSize":1428727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQMWaCRA9TVsSAnZWagAAcpIP/3+6NCdIWjrlLF/gxWNL\nxc6952rRaKv/AUbl8sJoUH2vpXeF2lp7Tjhwsc3E6PjyYeaSc6y4dbFJaAV7\n/Lj09v3QxkHDAdPczFHQlPIRpa6pBqv7TuC0zUc7kZoUSC1HG/eqz8jtrO8U\nyfGPTwyQI3cFAklp/rAnvIGETEtzIacbmxa3ZyzFE15bloptRLFNjE17fHsh\no7NTNerWfUqYr+7HGxBpKLqmAORd7nTySccR2vyWPHt/QbVWx6Z+G7dR2zJh\nE93VrLGGIw6L9dEwjrZe0p5VwuCxjIunUIX0KTmLY4y7ckgz0lESwJEe2KxP\nu1mVOF0QcoETVTmM+cQMUS9KyBFX2QITnOJ80/vhI+ELC9AMl6St3vW88bo5\nN7+VgVlPyoX9fBZtUL9wonpMs7JtPEQ1/YV3KQge4oEieKFZrX1SJ+hkMLPw\nq4xuGEje/a0ClU49uEZ4NqCaZrzymvC7jaSzQ1rdswe3/bpMUpTp0I7Ve2Ku\nBjhv5gxVD4qbMj3cn7gRdJ/m/w8UZE9KMzG6/M4AVeZZLfWrbajfnQ9hUG3g\nKScbaMDR+a1y2+2rpnZnG6U6drRhq/MgOmCSD6WsCIjLqTDa/wmOZ5VyjJt0\nrdXG+Zd5PKe0ZdWaqruJnu/H42oY4bhxnoB2pklL+iyj+dVHe7kVBW6KmZAV\nYUAx\r\n=QO8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtuSADdVZzpeiFC1yBve98z/5qEIv0Q+qQp5XbO/w9pgIgemJjoMZf0uCix79V/4hOfbEnvhtB+9kBQrrg5YXNQeY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.0_1631634841537_0.3911932165483465"},"_hasShrinkwrap":false},"1.48.0-canary.804.d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac.0":{"name":"@sberdevices/plasma-ui","version":"1.48.0-canary.804.d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.26.0-canary.804.d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.48.0-canary.804.d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-XztUqxmVpwTV3V7Dps4dz6lCmlbq4qEZLq5WDBbccU0ke1eL2hPOH0FBNhAPcUQKKgMvm/xjfQvh9kXKEFi5cA==","shasum":"626e8b5b2bb9bb491305b9871f8d878a961e6fc5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.48.0-canary.804.d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac.0.tgz","fileCount":752,"unpackedSize":1428835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQe8SCRA9TVsSAnZWagAAsfQP/inkzp3qpFFsFBjIFzSl\nC+SdRksc9DRLA4ttdXSu5ih5RSS53nbeWzlArNVvBpudg6vjAxHWyPfHh6jo\nN11XwPEm8M0Qrle//1ofQ2ymq2rIQLZhlgCrUzwjCuF5iwkceTYplqteAnZS\n/HwzUDsN92FKMz0CQOfIdx9Vv9dRTQKMbNUFVa+l3CC7qCtUHU/efM02xI7t\nD8i6W+keXat7Ohtvm/F8r5q7Uyfq75CAresA7XtY1lJbE4Tx3EERgO/HiBNH\ntK6l5r2bmEKyxLfSik82z2kFrdSlEo42TZofAyA/NOR8GUPTetkWgBTLy4U2\nhb9XE19OjVlHnocJiWINu9RaqhOC80er27ADedwM0LkVtdOexp1aTtFXoRNG\nW9tiUDRh2fznd5+gXTnfkQmEExjeuX8PE0gpeFyktKrwyEJxxlBjj9BPQgVI\nPc03J8atNaIZru4EAj4H/x12OLZ90t7hFh7emzlZ/xL7+VQbq89rDEpqzVWj\nY/d3uhMSgoaY1JL3IChcH+7pSeSatmZyRtofYCDMlB5HpmlskpTqZkVGHDEK\n5n2QmaCCIuZqz9/zv6ZZOnTJ76871Hgpwka5UZrqBwfILhNhz6oBdjUqP6VU\nYaHNC5uCNo7uOtZeLfR65rXLdDj/MkpakXEMAdN8S9Q4LSSHXOPwoUjgWSYd\naY92\r\n=/Kah\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHY6R6J1XVzcBUpjtrR1AeEd4GjicZXjneBolFWZwk5lAiAIDDJSf9WT5yYpWqujbKyh8tCh7Y6bfQqdGSRof5QTCg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.48.0-canary.804.d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac.0_1631710993977_0.5580943948453501"},"_hasShrinkwrap":false},"1.47.1-canary.800.bea6af432e2880196b0d56ae0b0f963ef58000d9.0":{"name":"@sberdevices/plasma-ui","version":"1.47.1-canary.800.bea6af432e2880196b0d56ae0b0f963ef58000d9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.25.1-canary.800.bea6af432e2880196b0d56ae0b0f963ef58000d9.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bea6af432e2880196b0d56ae0b0f963ef58000d9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.1-canary.800.bea6af432e2880196b0d56ae0b0f963ef58000d9.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-sv8raCuPlgCBb9sX6O3iCrjYyXtOa8TE9sE34iNg1fGWUNYyW6KQ3GPBJATEHGVeGnb1mHHORK+I78rwcwiUew==","shasum":"70b298d48652ab1aae63e0408e7ff296f53a2c37","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.1-canary.800.bea6af432e2880196b0d56ae0b0f963ef58000d9.0.tgz","fileCount":752,"unpackedSize":1428835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQfEPCRA9TVsSAnZWagAAPZ4P/AnVL2U+dLDtTq65bleX\nuZJRr0KSKqjg0fLkjl72SIr+ffA09ASIahFeaBgQNYq2dHZB3kmuavPReFqw\nzH6YwptPl58DAKY8xnKuozLsWbT1osMeEi5fC6FtJ60CnmUwCb5Zb0ov+Xrh\nXSoclboYt3dXpgLObD9+ejRZq11WIRqTPT2KOJa1NQM5eLqL4HlYk24pgyYu\np1Ao7FX4Y1BYRkz59E55+lLoAwW61VqmHm1bXt/H3SgYTYy0+oqfUy7uPeLg\nK4WNZFRIr2zS5THSyxBMBCNj0oYIf3BOKBkJts9MgFRzymPq+addYKUPggnz\nuEB5ZqYHw84yIZTgUN5v8bLDqTckRkvpG6An+OZCksRDcOzRo5y20d4I1D4L\n7Yk9oaNqw/HheW9+xgOINwzemgm8CivuLATMauD1jkK+r7s32BgpBVgKVqth\nq4JAEelgIKokQ/H5DqLkiqCglJOa3KGgOFY3I1+5dSza+FOKZ/4n38hFlIhD\nMAyWY5FmzK0lzqElLdSjsiC3xUBJJPYVOk5emBzjR1LEyPzxuBR4e1wU6gDi\ni+xR8c82QcDO39mrHuEOjAc9T+IKDgZN6OtT8PPBICw1DJt0aMhB1BG3VP4O\nNKN7CZBpQI/3z18sjcZDoeeTPbUGGd2vuPb+631IGYuJ4RAaAaBUYORZ48dg\nfBEv\r\n=sQkP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuKjQzdO7UU7cfgVU5QgpObmzLBuv9CyDswOMK3oOaSAIhALaVVcSmtS38VxC3z2voGa63lz5JUAnZyoDn1GGED1bm"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.1-canary.800.bea6af432e2880196b0d56ae0b0f963ef58000d9.0_1631711502994_0.00816927712915283"},"_hasShrinkwrap":false},"1.47.1-canary.716.4da691138b44ff7d90818a524b1ccf785412f855.0":{"name":"@sberdevices/plasma-ui","version":"1.47.1-canary.716.4da691138b44ff7d90818a524b1ccf785412f855.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.25.1-canary.716.4da691138b44ff7d90818a524b1ccf785412f855.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4da691138b44ff7d90818a524b1ccf785412f855","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.1-canary.716.4da691138b44ff7d90818a524b1ccf785412f855.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-eJ3hqqbnmwAoJZ398KV6svUEVvdcxOppAYqItKWvNrQPchjHhvnDQohrhtBTLQ5O5VtdCEF3Zd4E3pRy0ZyIHg==","shasum":"97b0fcaffed7ee6657355c186a4c7482668fd202","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.1-canary.716.4da691138b44ff7d90818a524b1ccf785412f855.0.tgz","fileCount":752,"unpackedSize":1430437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQfi2CRA9TVsSAnZWagAA7I0P/1XowWVjFebK8/+/Svy7\n9sz+k9JJZvL4s0GhkLcQo3NDxb4FsGAmh8IItbjbEIvXQX1mOoxp7gdKLZEB\nB9lyx+za0yYvf1y+0gE6cINjuvAx8OU5ZV70n1LwQUN70IpImwbO1jl+V72z\nQ4+tpwcVT4pZZuqQjjAdrnw6HndtQvxZoPJB9gdHKdyhoitkMxZTmNeTEdgk\nZ5JGVNcijPabsWrNxGEcU1lFscD5AkoqBrGHP68VIVZ9Bfd2zthgCM4UP6J2\n656d+WWZIEDBWMAN9ZfVFvsf3dgKX82uZiZOkimd5DhplQYKlkuAuvoVAdjL\ncJA9tG5z2toK3QGyCoYoipjrzEV8VJkML2lMZKooHclmxeiPWNTPvdoa3jxP\nZoxFvF9QePVWfHiot11QR8fmcrLETKJCBZ0MrQf9Xeg+SfyayP5LYwSbWvB8\nJjg6ddKfuLMSBYf/CBSW+1NJ4ch7S2lr2TglCZ9rZCHrEz7LoLuAn+R227ba\nc21l621Q/td8SinoKbFxA2qmZOG/mY2YnCrU59ryJniAFzbRs3JjGMuL+qnK\n0UHIMEkG7I2uw0k6RudEcz76qzGZuXpDaQYv9rdAz2701wLCGr6F8O16uQzF\nNyMS9EhLSlLlwWw0SQkIdZPpNW9QeDImXK5O0lpFjaf/vKbR+kh7xr5eSTrY\nwBVY\r\n=S5Eu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqBXAnAcxRpVdSiulw5iiVZxa69W/+JijNzNhsm/19JAiEAk9GeGhhPU48HJBCiDNRhVPKhfVBT4VCUqbmTZDFKiGs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.1-canary.716.4da691138b44ff7d90818a524b1ccf785412f855.0_1631713462643_0.20624744597323108"},"_hasShrinkwrap":false},"1.47.1":{"name":"@sberdevices/plasma-ui","version":"1.47.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.25.1","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"beea25b2ac2b23336e6e5bf97fb32e4169cc04cb","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.1","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-oDrcDDqWJli4WqeddUB6QTFPvBXv5Um9uRq5xEeMo5gASsLxVOmkZ2Jo1Vb94s/UTvRZV+HnLOBxgcWgOYBajQ==","shasum":"1333ee2f445861a9e000db5df3044e61c0208c32","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.1.tgz","fileCount":752,"unpackedSize":1430774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQf2HCRA9TVsSAnZWagAAxaEP/R1XOpeRu+lr2yh3ZIOu\nZ15O+QEwhvyzxsrZRD/tsHTGFS2FhHlYXl7RTtTwRNhqOWW5657IcGuMhcbW\n8nZTlVDg1d0Jxc9r52OWDxf6rBuuX1TdZnKZ9OOJfA7ipG3ICR291kKfwlNj\nI1GFdsT+2xtNE70yfJizabEny5MExbxGdy3lGVflECNDDHWnWxG+ewBy8O6S\n60aWUHbBX0qKExCKkxK7YM122j80b/NqEEc3EkDirEGreKlRCLrrJ6jh3tcx\nSb7jndXh4Hp79dmX9njRzGN3+9QSxQ1V+d1kwx3q6zpGKcpLTYPuGL/vHw1Q\n1TdRf33eOsFh+h/LIP8uOGrwGbiZ4hZJmi3YJBlusGB0iEN8r6NT1byCFFiq\nBJf14e4nh6nQq6oA4Rp/QQJP1xl4isk5Fk+W0uGF15tcvcIN0u/EH3qxTMJP\ne5G2JCe7aXtnfE8YaMmrmJWknAFOi0qz7CT3kPBX1bfJ5/eFuB1Nj8ngeQqY\nvCrLerg0zyzO3o3LoizjlrNX5MESV9xm3Q8MLF17hxBaJXvwEs2kzaAm6L8l\nQt3Vs6Y7iIKh1PMsHvBHhaYp7VZ/Bgyhg92CB/uuhqPWNDRPXFKHCyNP26IC\nWUVersIztKOiHFRCLIYERGNfg6VgLAXo6DKFC04j0csZwKO0mxjBx7K1Vgq4\nZrbd\r\n=bpfD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADO6myIXR+mbEznZe/aGa51y5zqs24JJNlyNPlcAwVfAiEA4dZv3bXLcdwrycDgMxpGLtZYgOoZA0/F0XOiojwELZI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.1_1631714695670_0.2504836362432188"},"_hasShrinkwrap":false},"1.48.0-canary.804.c46a8968225d5aa45ddc7a430478a76a380ac200.0":{"name":"@sberdevices/plasma-ui","version":"1.48.0-canary.804.c46a8968225d5aa45ddc7a430478a76a380ac200.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.26.0-canary.804.c46a8968225d5aa45ddc7a430478a76a380ac200.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c46a8968225d5aa45ddc7a430478a76a380ac200","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.48.0-canary.804.c46a8968225d5aa45ddc7a430478a76a380ac200.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-3afQQlmsevGxw9nd90QpqChacsqH/x/Khp3kOvEckAEJcB7EqUKVG7hAgyHfE8bJcCURgpec7Hi062T1RS/L9w==","shasum":"842129c9e94780e76c7917ce71060a5eb2187dcd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.48.0-canary.804.c46a8968225d5aa45ddc7a430478a76a380ac200.0.tgz","fileCount":752,"unpackedSize":1430437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQf7bCRA9TVsSAnZWagAAs5IP/RxjLu64KVpGxbxElQhb\n/KC0PhjbR2BFpJQIB++EQ10ZE7JtNmj6LNqpicBoZh/6s07spv3z/gZbNfWi\nwDA8pMszEw3a2lWiqVDVH4Yi3fdlNd+LZqgFi+iO0yJCdhAoe0Upr3AnKM81\n8vJUqN3jeEVu1XAW4xQR+PBwCuMGox7nR5VM6GK8geHNhAcD1mP73JUINRMS\nV2QyUOiBKH+pBqIO5utVFuRayhUzBut3F6160IGgePJdE1vcpCjoN0EimQnk\nVOsuPj/7BN4nC2ScYJkNMnZnozNw2zQFYW5HluTSb8BSNcXhVcQeZnaS2/XE\nFimbP3bxbcrFbkfS0xF07D7CZdAGpYUSRER2h0siYGL/w6dNjX8zTWu5ZwZ6\nOSEJ1DurWIi7PdToYzjxxqD/fRS/77uPLE2KQUp/4bq1AKGTOisAY2httnAJ\nDTfbePPRvyheDx1/IMu2eAZjSXdwVBFPRgNiIm81BPUMI/Q3roWASbuTvMhf\nyqYMgR0DWpJ0E4LLWkSSWyRdzWCwBELP/CMJ6iG6MaICsLJtPQtexlRgvRhO\neGX5bWjKqyjOYIuygNrfmL2PZNC2caBul+gSPRhv2R6GtgenH2nbPoW8ISq3\npManqyjCqu+t2N+oJl5CLEeIW6Hbxti9KUCIv3hJ3MzRwKT8GCGDO9llKr/H\nywty\r\n=nVd8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYlXvAe9piaSBGqL7GBS3+F3YAyZ7GaCF73nvRAMFjegIhAIh9YOs7e3XQYcQkass7bO22RWyUR+qanQjfJjFd4xEu"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.48.0-canary.804.c46a8968225d5aa45ddc7a430478a76a380ac200.0_1631715034906_0.7671988056922354"},"_hasShrinkwrap":false},"1.47.2-canary.708.78b2280ab95e9e8b6609ed6ec62375125621f635.0":{"name":"@sberdevices/plasma-ui","version":"1.47.2-canary.708.78b2280ab95e9e8b6609ed6ec62375125621f635.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.25.1","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"78b2280ab95e9e8b6609ed6ec62375125621f635","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.2-canary.708.78b2280ab95e9e8b6609ed6ec62375125621f635.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-eGdhuoKSMYtOFKLlDt7EjrkoS5A0f+RqU1hfVOb2RqVl3IAYR8AuH75+uV885pm+g7mSvID7eGuEN0WOKmUrGg==","shasum":"a18b9462e2b666cd5e926e4bbfb321735042b60e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.2-canary.708.78b2280ab95e9e8b6609ed6ec62375125621f635.0.tgz","fileCount":764,"unpackedSize":1435072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQxrwCRA9TVsSAnZWagAA+pMP/jdiEMjxUpff7rw2bsQO\nsPiIYvMJsUIfI67yALqbymlhB6zT4r0GO0H9bOKq344jnWV3hQCuBXk9lEVr\nX3Gd9qA428TBIIjoqewGt3yrzCysNMTOaGlSPBzKeo+zvE+rHoJVJZOpoK5N\nZ1UCg0PvMwbO0UrOpL1+ves17T90iSnl6E4y0sy9ImtZMP7DZMOIuOidZlmn\nSz7jTQv4Ju+MW7FHUPDEei42RPegQOe+li2axwEzhw5sX2SiTQaI68aR0bCs\nJbRGl1uS6aVXBhuyyjzk1TYP5q4VUcmQnvHvDPeacxOkObcT7n8rOA0lMsn6\nfrTF2nqy4eXThrkF7V55NFRkQvTFmHHAKoeStQYlGlc53quYYjXzbqZwefd+\nj57zpLPAflVfsetKAe3vtCmhegDlYuNtKeZ++rj/DyjqcdcWDm1mUK05YfZD\nQ3finknJcWftjxcuF1mbLfJv0VyJQjMn5g58pdzQn6Iqtjhzeg1f3axsN8rz\n8qdIGJpE6s6nJ8eWnaeqls+cWII6Wzk1Tc8D/QdJ/BuIhkI+imaVQAEySvMC\ntRaxSH0ROmZe0VY0OXzHc7b/UNtpW++Uyyp6n1qIr5JOGdoB7BNvT3fuI1kB\ni2Mi3Ax3F0DBorUcEfeuPKqn25iSpPVRFvDrozl3EQhFMu+YWHUna01vNjwj\nmBQ/\r\n=vt2j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuefYvxOedp5FH7sAUl6xONci6ItkmLdAqXGhPFIkAbAiEA5IV1R0hRFXCH3tVkg6rFePzzHMfyMPcBC4Op8Wz0Ie4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.2-canary.708.78b2280ab95e9e8b6609ed6ec62375125621f635.0_1631787760325_0.7020277752384829"},"_hasShrinkwrap":false},"1.47.2-canary.708.3b335569ddf1a8137ae1b6790cb42862b275e3ae.0":{"name":"@sberdevices/plasma-ui","version":"1.47.2-canary.708.3b335569ddf1a8137ae1b6790cb42862b275e3ae.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.27.4","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.40.0","@sberdevices/plasma-sb-utils":"0.25.1","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3b335569ddf1a8137ae1b6790cb42862b275e3ae","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.47.2-canary.708.3b335569ddf1a8137ae1b6790cb42862b275e3ae.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-EYmL2X0Nf0SxrmRSYEOxuN/xO+i4pMT/8uxlV2mv2wWHqeEuaz69BAvWpABjp/9vnI1fFeUR6pjOjd2aAoW8dw==","shasum":"0cc8a7cfe54bc7e44c08ab381dae65b797b0da69","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.47.2-canary.708.3b335569ddf1a8137ae1b6790cb42862b275e3ae.0.tgz","fileCount":764,"unpackedSize":1437536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQzGYCRA9TVsSAnZWagAAUXQQAJr/3aTOmL8+rpA0tt3q\n+yP2zG10HrvZ/9KvypC1FtmXvZcK6q1lkiXKrh1Rfr7Tt3LJxzwcInLpQGvs\nAhK1IUwj+nq6qaWfqUl3v5FUKirK/oZwk2XnAViGH0UKd10XvEBOG25Rds0d\nAE/EvkNCrfT6LgEjg6H129bn4IzFNDNPP5SJLlxBw7Y2Onq/J4su0wPC8JiB\nTaSuCVt/TKz3tUEXhAuHMYj2DHugNltpPZwoTxig4d7zzJV6e5uovfbrsvX5\nd+ZjlSWPgtmbWhtIDioTrukhDQ6Sdf2cfGrnMnGzrRBJ+EjIkuKmWv0CugcC\nLgkpNF+qQ6xY2CFlHzSQh+r8EgNRzykCgA+ZYkE3wGd5h7+uMo0YpIiXT8q/\n6IgNmtinjBUOfA1ZxnLGC/+We8iyqbJTjFAJQfnlfJzzDyt3VVcsQpuQonP2\n2s5/scQE5a2r6JTMmSW348sX8x/YghrpRK52A5Kk5Wko7LI95PGxneYe2+A2\nPKt8Zq8bSnwRN025ZFBNzeb2iq3OFLF0Tc5DHRuvLb6gPfCQT+Vsh5JyysU8\nzVkfj36bvsqBcHmjR1WjoLn83ureEA/gohlQMWtizk5Aox74n5ombUC+9w+F\nZqdol/eNma3aFai2/JmEzPYcfLywdtQ5/LhlmBqN4ij1LkLO0SMkGTaBrJMN\nv0/9\r\n=pAhZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCITRdn42KDASIJwF4hKYUxLkLF8i/QpA33ScoazWgKkAIgVPnli81951p1S60y2do4Mw1HtXUDnMAuPpw4GJZFGH4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.47.2-canary.708.3b335569ddf1a8137ae1b6790cb42862b275e3ae.0_1631793559987_0.9984560541854011"},"_hasShrinkwrap":false},"1.48.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0":{"name":"@sberdevices/plasma-ui","version":"1.48.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.41.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0","@sberdevices/plasma-sb-utils":"0.26.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fda03523dd74bc719c992d09da1302a677b8dc2c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.48.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-aEbO0VJDQWWW5m3kIS0HmPgzl2M2/zgtyMii8YBJ/RMJrTvJ1z3u02xqFZhlVzuWCnPjQOTFwljmDOQPJ7JGdw==","shasum":"d8a288b4ac841a21c00e5d3941bc8f448348d0f4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.48.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0.tgz","fileCount":752,"unpackedSize":1430990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRGkZCRA9TVsSAnZWagAAAQAP+werVm4fKIp+M4Is5V+M\nrdAUyicy3y/fYOKjVThyrXbeGipSGrujQNrD3YYx+B82L6UL4dmKdZlQK8YA\nn50Qjff9IZHcSiaXTj3BI5aDNYXGKvltOQdAi/pA0nTpYHCFUJoCnYRM3Rvx\nLiNndeoqUpHrTtmc35X6gVQ1T9HA/Lzh6vxCMoOBG5GntIZ45ftTG6M5ICuh\n3OpEg1jyjPGgpbGmK1ELULlWt08s8Djna50TyNmxQSYQG61TkhqISc7BxXsQ\nB9ASaVYCFKzTtOH/jUbh60dc7WZlhlVG0LJfGdo989irHWyudxX5L9odojpw\nlnk4F3LmK69g4QzpmClpri++1GWVEYZHghnptZZYLuY5KP7A6h/eSlA2mVX0\nEI/X59cZVBfBEz3bnPvhx2rPnruh4VXTARa2sUw+yRDpZnTDCOU4EL2Sjyeu\nWOFLqK3+Ig8mndFTnPku/q1P7rT3h65wGmtDQt3yI4sZ3hoJzY+a6jx+kITT\n687BPtTfr+af7FWuOcjaS3TxEl4ToWWC1BtIeC5atdleiI7FTP5B/SSbpcXL\nB94t7VQzOG27gb4TQbTJb+3XRJ+bXJPlQ/hkmVpuUStekrfMFEYCexr8Mos4\n1OZf2+57PTzdsTZoUPjOFQ96QMjSqGG560v9XzZOTm+HV9DlLFUQm19Ag5MM\nWA7P\r\n=HMRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDj87Xo1OLHnrSLXaHOSg3vbl8oi5vyc6hfWi8LnyysAIgYk4+WP+OPcBAyP1kk9+Wl3Z4RkQ4nDX95hjioKcgDgc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.48.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0_1631873304954_0.6056173391096744"},"_hasShrinkwrap":false},"1.48.0":{"name":"@sberdevices/plasma-ui","version":"1.48.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.41.0","@sberdevices/plasma-sb-utils":"0.26.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ddbf1c59f4178dc1432d196e791b21c67ee5487e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.48.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-CARiZeCqwLslqT0ncsuqcZ/N8Sua+BTiGkKhnhBw8XGwKC8O8fuKegP65FOg9sqGKQmUIhRWQlruO4Pef4SVTA==","shasum":"468f2a4dd2dd9e305b4db56c473746293c2d03d4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.48.0.tgz","fileCount":752,"unpackedSize":1431002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHU43zRhmvpps8bCnQxy95GcotTL9oR0ENpQ9Z1z16XWAiEAsXNh4xU+PlWle7jvAqBwBX939Tezfo8Z4bqAfS0wzYs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.48.0_1632126191085_0.5437667892458129"},"_hasShrinkwrap":false},"1.49.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0":{"name":"@sberdevices/plasma-ui","version":"1.49.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/extract-sb-docgen-info":"0.1.1","@sberdevices/plasma-icons":"1.42.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0","@sberdevices/plasma-sb-utils":"0.27.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","extract-docgen-info":"extract-sb-docgen-info extract","test":"BABEL_ENV=cjs jest"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f04b5495501f74b50cb41982983341c67789a5f6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-+fNPfLe+o/4yL1+qHXy36LV8gHhpEx94pbwDm21hS9PXbI4x66n7ZtYTdzYXTiQTxDco791YbKgfu7Cbou1kLg==","shasum":"43d2ef9bd00ba61b42e03c5939510bd6dbac5117","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0.tgz","fileCount":752,"unpackedSize":1431164,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEkZucWYH2u7cniR4VLBNxPc9xzl647brcEiuRgGd3Q2AiEAkYAZlKhQms6E+S+NJBpI/rKN5CrneQA8hsjiSktoUyE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0_1632154274993_0.8416718560375804"},"_hasShrinkwrap":false},"1.48.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0":{"name":"@sberdevices/plasma-ui","version":"1.48.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.41.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0","@sberdevices/plasma-sb-utils":"0.26.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"220059787d1daeb64f5b7a5191fea748a8eafef5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.48.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-E56JcuaXdm+x3GwyehskGpfT53vJtDFG3wlCJrsYxp6Ea1618XSXWdirhjzIBgilLLTJwC1Htfggnm1addwGTA==","shasum":"ec4ea10394586f7eed0a47bf519b9b412b1408be","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.48.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0.tgz","fileCount":764,"unpackedSize":1437805,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhxL4P696ymZUJpJuH7xKqCwHuCpT0u6pziVB0f/M8DAiBjl2cnlLqE3hL3rBSwUZwa2UFBffP6RbcCJv00vg8Kzw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.48.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0_1632242219696_0.11961977030912396"},"_hasShrinkwrap":false},"1.48.1":{"name":"@sberdevices/plasma-ui","version":"1.48.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.28.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.41.1","@sberdevices/plasma-sb-utils":"0.26.1","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"87234434c51da821dbff6867d609e719429412ea","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.48.1","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-TkhVxSVZrgK+cnedjJoDVfS1pn9hvGx8eEg9SzynVGhxyf4dgl0woOd4T7us7nQzJxe7qNeflMTGEqWYU+ZE+A==","shasum":"70810abc0a73de159b7127ffce4ca96d7a06c2a5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.48.1.tgz","fileCount":764,"unpackedSize":1438626,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRkOojNFsQg18EzowiZgGxyPhl37Jp+uQAmYFK0WJtiAiBXqDPKx4ropna5PgrkSQH1RmU01rokkYZ1tgLUbfDDuA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.48.1_1632250707789_0.8495246750929191"},"_hasShrinkwrap":false},"1.49.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0":{"name":"@sberdevices/plasma-ui","version":"1.49.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.42.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0","@sberdevices/plasma-sb-utils":"0.27.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"26.6.3","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3411e0820c93f63988dc9c7a4c28118c9fe544d9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-CR0xYJs9LOMJk8enkNvobdjhNGhbILFa58zUnYyL5xrXu3zAKJjc6fen3qB/egT2+Fj2qu8gHrE/xk0KuxNadA==","shasum":"81ba431077fb3939ef8e2ea1c5614ae1dc5fbf05","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0.tgz","fileCount":716,"unpackedSize":1382451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUJoUrAOz9ikR0c4+mEiMHrPPrqpIRYg8p6UF/MVcelgIhAOtBM7UaRvdqZKUT4VLLcbrpCiPE/AXvcS6mORA2+oLR"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0_1632308159088_0.11978951714376773"},"_hasShrinkwrap":false},"1.49.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0":{"name":"@sberdevices/plasma-ui","version":"1.49.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.42.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0","@sberdevices/plasma-sb-utils":"0.27.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7aace4c7d76620857c542a69df327bbbcb17a17d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-/HZakup7U5eL+38YnXF/cQsfSCkK1VC2T55FLB5W6PKGeNQ5G8sj3kQkWLp3t+RJvCwV38qhiMjrWm61cqM4yg==","shasum":"dc0d3b636c4aae16a6f972ea6eb14d77435ab9a0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0.tgz","fileCount":774,"unpackedSize":1448154,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH+7loHBNCWJMMlLcDWlmNf5T35zzpTqNvi8BWXDHs7AIgX9cnzZlwgkRfjMOtiOPLddEF1+AUqmQOwO1kNhWcL4s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0_1632472838332_0.8600757148822269"},"_hasShrinkwrap":false},"1.49.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0":{"name":"@sberdevices/plasma-ui","version":"1.49.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.42.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0","@sberdevices/plasma-sb-utils":"0.27.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9bd4d3debc97b7e34f63f098a90eeff6ae311eb1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-GzhXzIbA4FDaUHgNVWMMSb8tTP+qB31xrqd4sDPcrpYYasar66pO/d/HsbUW2pZqcCgT5SNPXcEQAIAwCyd2cA==","shasum":"e8e687d63d933b6709b8c3d2a5b7e438d390c6a2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0.tgz","fileCount":774,"unpackedSize":1448154,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMS1jJVSUoqwxdL5idLKJG2/f+BCsc5kXDWV67VDPezAiEA020G19cf7UHbTtrw8vpXrrCmzHcC3yGe2fFY29KFMIw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0_1632474029523_0.8302153157680796"},"_hasShrinkwrap":false},"1.49.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0":{"name":"@sberdevices/plasma-ui","version":"1.49.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.42.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0","@sberdevices/plasma-sb-utils":"0.27.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8b850b6f2a8ff65b000c685d7dec0790371cd677","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-5saHpfMTdXbzleDtFm97xC1xahyFQccjt0CW371UQNzpVqx95+ovIf9/Wrxui+aZNsp8I+aTTLhsBwECe2C4EQ==","shasum":"e973d8bf4d0dd8b5c1645356edf0217a4a83a9c8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0.tgz","fileCount":774,"unpackedSize":1448154,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgnkeCo1AjhMGKY73QFfQQcPsw8qdAov3Iu25D0IaO7AiEAwqu0JHkb/g408zimbSRF79I6b41oIQYVFWVsWjhKKf0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0_1632474881135_0.9291261242763367"},"_hasShrinkwrap":false},"1.49.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0":{"name":"@sberdevices/plasma-ui","version":"1.49.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.42.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0","@sberdevices/plasma-sb-utils":"0.27.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b2bb8673af0e4b763f84d214cced753950cff808","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-+S/UneTjBEAEatavpCJnRold8GTouaHyRNJgb6fw0El69L+dZk0M8JfBXYPt+wzZ6q8bvsqqWhLamNigsXWs5A==","shasum":"3e97d78d012e1b21fb7ea92422cc8bf0c04ed81b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0.tgz","fileCount":774,"unpackedSize":1448154,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHyQrsRRU93AxtwHqq7rden4D0zPCsE117CmxAlaeemICIQD04QiMJ81n+4bb0fWeHuyiaqVK2BVSRZXI5h0iY3R/1Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0_1632475115547_0.8349532907800399"},"_hasShrinkwrap":false},"1.49.0":{"name":"@sberdevices/plasma-ui","version":"1.49.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.42.0","@sberdevices/plasma-sb-utils":"0.27.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1426bd0741bd123d086e620e1cfd19c593d6ef11","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-hI+wE5c+VK9HISYUHxOc+lrtsb8O02Ih4GMV1+xfAgfhv7xsKld8WMPqEipshJkvJxVdPDxk8aFhmx2g7xG/og==","shasum":"16030126610f489ac65b742de335a75947851ee1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.0.tgz","fileCount":774,"unpackedSize":1448369,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaLWj3usDbHIbEI6R1kx9p6FcT8FJjFJTafy6ALK293AiB8NbxrNGwDQJv1inImjsVx9VQOsRFmn2bQ/RMN6kOetg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.0_1632478038673_0.17243771439716027"},"_hasShrinkwrap":false},"1.49.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0":{"name":"@sberdevices/plasma-ui","version":"1.49.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.42.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0","@sberdevices/plasma-sb-utils":"0.27.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"83ab0f334107a50309b6023b8ab316f1686517e9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.49.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ZxcoAV+G1H/9PoaX24ah7bJItqMd05159a/GComCGZ02Sgz277crHCmZgKramXvtdpI6S519KlvsDXYLVsjSGg==","shasum":"abdcc9812bae357a165d6d949c0ee232a223f047","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.49.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0.tgz","fileCount":774,"unpackedSize":1448531,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbOSGEiQacSl2SwHR8d1mw6nIVizHyNdxXx0GwTTrAjAiBm16f/+GcomhwdBN6PGMITpOjxH2sA28/fqC/FN4Aigg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.49.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0_1632748776110_0.35473104439902525"},"_hasShrinkwrap":false},"1.50.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0":{"name":"@sberdevices/plasma-ui","version":"1.50.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.43.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0","@sberdevices/plasma-sb-utils":"0.28.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9ea4090bc4c0bfa0b281121e80231d0129ac5f0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-8wUkx8STc7j/Cv8M/CkFaJcIs5k8QyJytXRrYLf7ab8f6zBYTd31O8nwrLr7hO9bzRSSvMSD1DIAdvk7XS/Xrg==","shasum":"e47285f0ae100861bf928356d4645cff8f02fdb8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0.tgz","fileCount":774,"unpackedSize":1448531,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9gGQqGzwP4Z8gU5cpbqqawooXdoVcfXIv5Og7Ly/+WAiEAsExP93WRwkRWrAeFL81A60Eflzmw1VTiKU/qedhl27c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0_1632809365554_0.6511536576805332"},"_hasShrinkwrap":false},"1.50.0":{"name":"@sberdevices/plasma-ui","version":"1.50.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.43.0","@sberdevices/plasma-sb-utils":"0.28.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b92e0a77c0a288c9cb13e8de64387162361b5ed3","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-fDALyeqrYLuySoqOIaAVZEj+Kj7ZmjV/ckd4ipgOFdxiw9pOgCoRr5RM2I9sT56SVe1INudrmHxWRw96kJ3eaQ==","shasum":"5de2675142577222d8a569e7a3b623cf52a8ac5c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.0.tgz","fileCount":774,"unpackedSize":1448597,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHis6sYhUrXU50cMgeLouu3RaP/JJBw6dgXs91i1BqKQIhALxpd/3uZzqG1+dN42QSdavvP9K7lvon6WS2gCAN27vP"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.0_1632812324392_0.8626833550929363"},"_hasShrinkwrap":false},"1.50.1-canary.815.3f0375e084e0846060f998f9f2f12dafaccb49ca.0":{"name":"@sberdevices/plasma-ui","version":"1.50.1-canary.815.3f0375e084e0846060f998f9f2f12dafaccb49ca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.43.0","@sberdevices/plasma-sb-utils":"0.28.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3f0375e084e0846060f998f9f2f12dafaccb49ca","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.1-canary.815.3f0375e084e0846060f998f9f2f12dafaccb49ca.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-A9A59jlS6t2ILL71gqXK2QNB1+AhAvoiVPyK5yFvx8aXZIfCPOdoFjV0WM6u1Hdnw+uCEr4q4E8xazlv79ROhQ==","shasum":"a6b22b4be4cf3a861b9f768cef769948fd2018c2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.1-canary.815.3f0375e084e0846060f998f9f2f12dafaccb49ca.0.tgz","fileCount":774,"unpackedSize":1448651,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwYC4K+opTssOgUk8nTT1h/Qas9N+/rZcnrS8MgcyD5AiAW+5ksfMWxmX6HSk0j9/L1XRtOm3g2Tn+YRL147RT+NA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.1-canary.815.3f0375e084e0846060f998f9f2f12dafaccb49ca.0_1632821454548_0.5308812334022528"},"_hasShrinkwrap":false},"1.50.1-canary.813.e6bf373d3c81a7e13c0c3c99b7b13f059e209b10.0":{"name":"@sberdevices/plasma-ui","version":"1.50.1-canary.813.e6bf373d3c81a7e13c0c3c99b7b13f059e209b10.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.43.0","@sberdevices/plasma-sb-utils":"0.28.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e6bf373d3c81a7e13c0c3c99b7b13f059e209b10","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.1-canary.813.e6bf373d3c81a7e13c0c3c99b7b13f059e209b10.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-FS+XZ6A+LQpyvpa/FKyxVCOcrDG2HQAkKfNxUIcFbcCK9bJJvYAYptplOVmKNQ/uh45bijCuZsiHT3uQKx0aWg==","shasum":"04de60b3659bc1b8bb89f638b958260a0c7de79d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.1-canary.813.e6bf373d3c81a7e13c0c3c99b7b13f059e209b10.0.tgz","fileCount":774,"unpackedSize":1448651,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNNI7q2v6lN4xkjmguCuiccQPDrKSYI/KuW05T1uaYpAIhALEV6TEJLOPkRof/0CVCycRs+Ye+7UKOQpbVVirK3s8Q"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.1-canary.813.e6bf373d3c81a7e13c0c3c99b7b13f059e209b10.0_1632822289029_0.31959924813265705"},"_hasShrinkwrap":false},"1.50.1-canary.820.55e5a45c862207cd1380ba8352bd152f0884bdb4.0":{"name":"@sberdevices/plasma-ui","version":"1.50.1-canary.820.55e5a45c862207cd1380ba8352bd152f0884bdb4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.43.0","@sberdevices/plasma-sb-utils":"0.28.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"55e5a45c862207cd1380ba8352bd152f0884bdb4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.1-canary.820.55e5a45c862207cd1380ba8352bd152f0884bdb4.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-CzZ7Dd1J+XnEJmDQ4liLB3HVH09pjcDbLpw/Aiwqye57lDXjPmR4yi3Q9ZBGglepOihXIgtrc8hrMDW7O1uENQ==","shasum":"d27d5dbc7fd0c613991ce798290eeb85a7f66633","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.1-canary.820.55e5a45c862207cd1380ba8352bd152f0884bdb4.0.tgz","fileCount":774,"unpackedSize":1448651,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHT9wNClx3DnRpZ4GGyLrnv4bFe+vlsGN1Sua4IrcaCQAiBr+/sWPwz1B5Mv0P4dpvesySWWu2lld8VQqmWPScrtjw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.1-canary.820.55e5a45c862207cd1380ba8352bd152f0884bdb4.0_1632824622983_0.033201758041729645"},"_hasShrinkwrap":false},"1.50.1-canary.816.0450b8905e0a1cc63e2bec46fed9674db214739e.0":{"name":"@sberdevices/plasma-ui","version":"1.50.1-canary.816.0450b8905e0a1cc63e2bec46fed9674db214739e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.43.0","@sberdevices/plasma-sb-utils":"0.28.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0450b8905e0a1cc63e2bec46fed9674db214739e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.1-canary.816.0450b8905e0a1cc63e2bec46fed9674db214739e.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-/hdhrQj+t/3ZYK6azzSunu47/5XXJGcxeO2RRmO6G5TGa36rkxwv3SPe3eZg2rJO35HiXHkna1KKCtk/cstlwA==","shasum":"93bf456cd13e81ff16857d3e46361d11755c9b5e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.1-canary.816.0450b8905e0a1cc63e2bec46fed9674db214739e.0.tgz","fileCount":774,"unpackedSize":1448651,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnJmheYbJB/+phMEpuDvLBI3zxzpWtlZDU0fD915qZpAIhANkW89aSHiP6TpQHTNj5JFfb//SZ9QlGSXlxLzR3NWCB"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.1-canary.816.0450b8905e0a1cc63e2bec46fed9674db214739e.0_1632830099897_0.9533886475382507"},"_hasShrinkwrap":false},"1.50.1":{"name":"@sberdevices/plasma-ui","version":"1.50.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-icons":"1.43.0","@sberdevices/plasma-sb-utils":"0.28.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e792400d6089c471b439a1f4601ad252f780d467","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.1","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-k2jXEAllvPLVKrc8awuOho5ofa41sDewfxuVtSazk/9pYVsT1vrJ6oM72PSPV2PxZ1LyUQmJWHafzJT+w7219w==","shasum":"afdd7276b9cde36cc1e282fe9baaf0cab7a049de","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.1.tgz","fileCount":774,"unpackedSize":1448825,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUVG7xXsult9ASHBBovk9P1wly2sZLpGmC1dS0WC0DiQIhAJWeru8W1PnVdj6L2AG2IHd1iUPwVB60k1LBZn8Xg2xg"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.1_1632862567897_0.8787610959453245"},"_hasShrinkwrap":false},"1.51.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0","@sberdevices/plasma-icons":"1.44.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c6d4cec836169e9788b8effedbed3c8db64fceb0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-WOi26yhUecCnBBU4rm29kZTDzJGqqUD3t0ozPmmk4sfoViV2k8e4DvAFrOBMhs59hschdICAeUMoIBw0QN+gmg==","shasum":"369b96a2db655df5d76555b05684c7d23b61b041","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwrsyXMp+q+m/lII2JrWiclV0sxIz36a/BF3wl0aqHtAiB22uN/m5BHUwssJBg+dj2fTTLJ7vxVS0JKtWjhgWr4IA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0_1633073529109_0.2786742792301591"},"_hasShrinkwrap":false},"1.50.2-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0":{"name":"@sberdevices/plasma-ui","version":"1.50.2-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.1-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.0.1-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0","@sberdevices/plasma-icons":"1.43.1-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0","@sberdevices/plasma-sb-utils":"0.28.1-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.2-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-1+gDdiIB7vBm4XzYv1plYhRzbHv9xaVCj+b0azihnFzbmDbVfURfTZ2L2tz2YMPO0NVtYrc2+DvLNoxP3hLjuQ==","shasum":"512d1884b08ad2b06aac659927dd752fb87a524b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.2-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFh0qkaNsPSvGI4SAsRHN51ZZI1DZqhcsiZJFcnzLB8GAiB/zxARneJOSTuAxx4qQsWqhQ7xVSAnoVCdZaPlO4QKlg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.2-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0_1633078991198_0.09128589697229827"},"_hasShrinkwrap":false},"1.50.2-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0":{"name":"@sberdevices/plasma-ui","version":"1.50.2-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.1-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.0.1-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0","@sberdevices/plasma-icons":"1.43.1-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0","@sberdevices/plasma-sb-utils":"0.28.1-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.2-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-jN/xTrUy9VOYIytTjmAUdREcKJT9vOZquLwY1sJ6dIIb/xL1C4lLg3PPXKNTfnxa0nGBtXE5y7oYu9Z6tZNfRw==","shasum":"095b547661458cff6c283050948626bd6550d7d9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.2-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNg78G/D4DygtgWK6tWam4V4Pahtrpngwde8SGEFYooQIgaqcrwePm6Y1ZuwKvHhLwAQMsqhdCMbKuFQDIQfbwCDs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.2-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0_1633081029960_0.21890873427541013"},"_hasShrinkwrap":false},"1.51.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0","@sberdevices/plasma-icons":"1.44.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1dfe63028b49aa876ff404090a011c1e2a90a060","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-VqkOs8xERTf9+tRkrmuKCZpUycWuQnE6Rx0aJGJiA015xw/fybM84zTENB1j2+Aj2lXKXE2Zm7lfWERaL4hl6A==","shasum":"d6582ee2593416073a078d258ded3410c9808700","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaKf0yG8N1VMCk4VZYu2wnfClYXdCZ2+PC5Hdx5/l5+AIgclBKGeHTClFPDCNl7+v/gmGQ05WQ5WvWjzWrybXdGQg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0_1633082842161_0.2702763196018003"},"_hasShrinkwrap":false},"1.51.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0","@sberdevices/plasma-icons":"1.44.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"96afe2185ba682242c98b98b8c7db0b48349fbcf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-vGYnoLIE09+KPUmsf2fnDWTtS63RT74Ra7wazGBOKR4+mg9Rqx9fyEacRk0Y/EiWJR2oNsT5HyAjBonALXnLdg==","shasum":"ca8a453f720c664c9a8c487b246909e80b76b4ae","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+ABJBTrGnh3zK4MYdYJu0/2oCeaoPrI2RQqtQPAuHGAiEAiLWeKoM7nIgqj5lHzRWZgR0heFVpds/fgAAaKl2awF4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0_1633087438274_0.5924398252809513"},"_hasShrinkwrap":false},"1.51.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0","@sberdevices/plasma-icons":"1.44.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6256921f7e593ee7d6ca4f1c691b2c8dbc050205","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-jMNOUfaEeOupBVXq7zavMSKfPArG/ooFfW02iRnynFgykBliRdvxi60GzSc7YOk/hA1aIApk/v/rnDNd0FKR/A==","shasum":"9f79edd89788664a8d289c5a55eb197d3479baa2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHb1PQmxVissJWu5Y/QHGm45trLs62xdz+nD3iiM+Ht1AiB6x3HocMe+d/BdRclMzKTj4iFRBn4X1zVhs1ct3YEZQQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0_1633090549664_0.23660380427293637"},"_hasShrinkwrap":false},"1.51.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0","@sberdevices/plasma-icons":"1.44.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf12c03bb6fae85375cf6824e13a7fed1e08d059","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-wEg4J7ezgaFtHSY3PacOhogDp8V/dzy8o0ao5mu6A6SfGckTlnQOBpfBXL5zhhabHx8mdIMF08NxjzIyvdRMcw==","shasum":"01d1c4c92629b6152aad2d7908084444d79c7a6b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARUvExoHGFOpgXDp1v8AGq3IxnBAMUx5+QiYxXOa7iEAiEAkdEBzxJ13t2SA5rQQ1IzsPz2XgjbecS3oWtfZBv/hgs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0_1633095920904_0.5687530180856395"},"_hasShrinkwrap":false},"1.50.2-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0":{"name":"@sberdevices/plasma-ui","version":"1.50.2-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.1-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.0.1-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0","@sberdevices/plasma-icons":"1.43.1-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0","@sberdevices/plasma-sb-utils":"0.28.1-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"994f19977594be6a36129aec57a0da158ef336cd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.2-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-MRdfxL2FxIRVu7OiYorZAzWs9O1xxn6phd84QXlPORBPY6dpwGwP5Zh3bNDsgfTltx5tkaBJguQ7cJK2WCmikA==","shasum":"7fde3a8444b6f9c1d36fa4505448ddece36182ba","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.2-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBjOj363URbc85J+DmXQCOy5rmsqhxDQUmx6kgd/ZvUAiAdcT5jEbGLdWvafX07A8aDSweEn/8d/NwYpzO5PVlFVA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.2-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0_1633263428621_0.2708176505741158"},"_hasShrinkwrap":false},"1.50.2":{"name":"@sberdevices/plasma-ui","version":"1.50.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.29.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.0.1","@sberdevices/plasma-icons":"1.43.1","@sberdevices/plasma-sb-utils":"0.28.1","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7e417b8ddd9324cd344d5e8add7b9bb2d8192f49","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.50.2","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-XYAsPLpU30OCA0xH1k4PfhUuyEtFv57OPXHko1OPZPolFOkF8NDf3rC8dj0FNdQLW41HgMDJ7TTBfmfbGDaKjA==","shasum":"7e8dcda20959bf2227db965d8020ce14ec96c9e4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.50.2.tgz","fileCount":774,"unpackedSize":1467822,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxlscx3qCoFeReRsGzpLq3F6BkjuKxEYUL4EPwJlLyrQIgcDENbEx00VK/gX137U02RNz8wdnafP7xvShCSdBUNx4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.50.2_1633264315073_0.2235873755327611"},"_hasShrinkwrap":false},"1.51.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0","@sberdevices/plasma-icons":"1.44.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"780c4238691d8e423c352a1311b5a8bac37187a0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-LE3xGbVobykZ0qmu95JlmM+My6rTnTj6OtA59U8V5SUhlkyniH2ePK3wP7Kl4pNtas0QHz52nYBNQAWVOuRwyw==","shasum":"d0393a5b6fd7781f9e8fd050dd398a13c2a0e263","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0.tgz","fileCount":774,"unpackedSize":1467523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFfX42YxwFUPRg3nSU2WbYv6LSaf+6n3AxyeG0cCtV/wIgPLCEuaWYXErvb3sB3h9OZX+zoQT3ePmKDqfUDpaGA88="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0_1633264549135_0.7085342561745991"},"_hasShrinkwrap":false},"1.51.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0","@sberdevices/plasma-icons":"1.44.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3c679f42abe8d66ebc0cc94e81b4537290349436","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-DJ+YX+NoWy1U1D+K6YogBfRmlXMQm5WxLdsuk5MQIrXzEDbGkmqxU/zgCmhUW0i5xj/OuXlm6m0ct4xQsOvzzg==","shasum":"15409a629aff3aea3ad23b387d0737fe54ec5a87","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0.tgz","fileCount":774,"unpackedSize":1468092,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcZZfO25fH57ip9uA9Fu00/IfMIhoSxmYMFUENoL/4JwIgeEDGSZ3w5zdJ9+f0/j3rqrApaWCAVOzlFJC/et2pGRk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0_1633265387364_0.3700239613723064"},"_hasShrinkwrap":false},"1.51.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0","@sberdevices/plasma-icons":"1.44.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0","@sberdevices/plasma-sb-utils":"0.29.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"06249387fd557ce3d91f2a8df7e780acea7cc020","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-owaRNXircABy/Evk/GDjDh7fhCy/GgHJIOki4ArFZwnjQadwgxKJckQDyUNKDHzaqu4w0REcNVOejREzsO0yHw==","shasum":"cf89ea2405510c26e1c9fa9ae5a24e5d74f0f052","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0.tgz","fileCount":774,"unpackedSize":1468092,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVVgK6TCnqOyk/QLffjxAij8+kDRy+FsGB3Whr9yV5iwIgL0hZRYcLJitzTqr1WYW/y5c+ALmqtsZsz0NqOk6aV+I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0_1633267557204_0.12588868782178464"},"_hasShrinkwrap":false},"1.51.0":{"name":"@sberdevices/plasma-ui","version":"1.51.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0","@sberdevices/plasma-icons":"1.44.0","@sberdevices/plasma-sb-utils":"0.29.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"11c2320cf4007384f76543d4686c35801d0dd853","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-FJ8rTAm+na+VXKeqFyBodwovKf9aWz4h4GZM5UZ84Hdi6MWCCgAf+UwcPxDsuvl/RK1jpjLO2K39y2N1MFzxlg==","shasum":"20e7500b2e35789ea2eaf4b93891edcb505990f1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.0.tgz","fileCount":774,"unpackedSize":1468252,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxbunQN7GkTHAmFOF4qSt/UJHeTBAJRf7ZFMm4wopYcAiA2gL5h3Y+h35jJUd6/PqK3XEXJvBzOAGB4/oEUA0lN1w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.0_1633269064508_0.20429766773867075"},"_hasShrinkwrap":false},"1.52.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","@sberdevices/plasma-icons":"1.45.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","@sberdevices/plasma-tokens":"1.14.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4ec9968e433568fb14e944af3971417b3467b815","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-fbzOT4Ok9wpetgwlmrbK+gLRtaAA8ifNaa4iLuwMOviqTg7Mnt7WfRHzCRwlzzk5urPb+nXqQtvAD5epbuVARA==","shasum":"8a66df7047e86bd6042163ad6e2a06335e1001d5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0.tgz","fileCount":770,"unpackedSize":1543384,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhtrADpqRvv8zDtRV6huJvpC/AUVcrqOXIRXV6Q7apywIhAPDvPa1maMgIiEq15Vm5hOEIgITD7qPn4AlR19yenSxy"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0_1633335468237_0.2038818105488176"},"_hasShrinkwrap":false},"1.52.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0","@sberdevices/plasma-icons":"1.45.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c5d277c1326c9d6854c02d06cc198d4ecc30bd2c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-aMMZI0ImA60Re8tRvgIjMJprUa2o8wQic1qbiveYDm/lHXEqi7/5AEsQyrsO9+E14xMz4CBzQBCKZdS7+PK87A==","shasum":"e83fc8478956ec4ef5fb3195dc327bf872463872","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0.tgz","fileCount":824,"unpackedSize":1605765,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+y01XF3hrEVye+7HQDKLR+AghBtdiifPK/sbcp2+4tAIgNMuhf1Pt2Z9OpQHhd7GQBBfstH4uS1/77m7+z+WIGiY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0_1633337319083_0.6890154937474104"},"_hasShrinkwrap":false},"1.52.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.0","@sberdevices/plasma-icons":"1.45.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d8bb107759505e636d7a4c1abcf4c864122b2ca3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-fF/0eMoP7aMH59PanbMBcF3M+cO++uosUjCoyXQV6OHM3aZi2j4FT9WglM/Xu/iD1y8vnHBu480R4tui7PSZ8g==","shasum":"cd600c2aef7cb9db1eed4bff458e4cffdcd06ef6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0.tgz","fileCount":824,"unpackedSize":1605765,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSMtIjjMg9hc/R+e2x4ZQEINgT89Mm2LX5zs8WeZsHagIhAOB1FGTB/fLO7D+sHhfG4IghWxxMrN9JMcBLCYZnlV06"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0_1633343412615_0.9458575469190402"},"_hasShrinkwrap":false},"1.52.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0","@sberdevices/plasma-icons":"1.45.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ce3e5be41344d7188f8dadd8db965165b50c7607","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ncqrDL/sdZP+tHwnJdENAoSSJgldePQMzasKIi6wm10sCsKTbEOhhd2OBOMB600ecoftlOnyazDWrnbb7QZXgA==","shasum":"66cd0165a6cf8bfaa8a15fb477b6618f2f4121a4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0.tgz","fileCount":818,"unpackedSize":1600397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJOHprHlOlVgwAkNwSudOjif4JuQkylzHN882n3LqDJwIgNKiwTx38DyliFfivzdn2gl1t5Ydbqt27Ef4CSFdK+WY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0_1633427018572_0.9365424007053793"},"_hasShrinkwrap":false},"1.52.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0","@sberdevices/plasma-icons":"1.45.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"819e25ef4f75f5334d73e2c7b5b89126fe590c77","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-jBu35taiGiRKez1Sxr/5HsL+nArp8C/SmDp/N6eRsmtVNODHw/1gx452D8wK9ALsVBZoEgEPDwE9lNkn0MUffg==","shasum":"8e58997eab96c7b47a70880442f7f23e665a6c78","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0.tgz","fileCount":818,"unpackedSize":1600397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDumAby6gz24nlHgxfHtliIHLloeZGFL9szWOK9f2jTlgIgPmcHDCWiLdlykN7xUIKJaiMyqEiIeADm2TLXiaIljHc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0_1633428669829_0.6973939547249262"},"_hasShrinkwrap":false},"1.52.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0","@sberdevices/plasma-icons":"1.45.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-pirbIaLahnvqnyDW+NbwwQuHQQG7Wi8QRyc5dIRzRmaPu4oazQYNGchzKsIfLrTeSdTQA1pbKBinpzYu6Atn8w==","shasum":"1c56f8758e7e308c2da23072af062d466919696f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0.tgz","fileCount":818,"unpackedSize":1600397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC95iV4miHTYW0sjxDLmQWwubeTy0sNXVWAZrsLegOGpwIgRDk7XRMQ+t7SJTE1KIsCEGOrC8XJ+0AmfBmLjdW/eTA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0_1633436542814_0.2531620710211977"},"_hasShrinkwrap":false},"1.52.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0","@sberdevices/plasma-icons":"1.45.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bcdc094dec332b14d6b2d06d8db673c94a3025b5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-mx1oid87/UJxSUunbxX4gUVw+gW4o9tYyO6iWa9L+pdad0mKBZxcqbHlqagX56UcVULTwJn0Do432RHhJu6Z1A==","shasum":"e5a69d9ee6f0908a52863bd84090230b8b04ebd7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0.tgz","fileCount":818,"unpackedSize":1600397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDp42J11KSRUhqvbQXvJJDi5ohKlF9a9JdVdEJpDrt7eAiBULH+OFKZ/PLrUIRUoeLyy2rutk3MgoxiALR0JDdHM2A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0_1633436548830_0.30346877711466824"},"_hasShrinkwrap":false},"1.52.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","@sberdevices/plasma-icons":"1.45.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","@sberdevices/plasma-tokens":"1.14.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d1025a0a2184be446a493c40a9b1038f41cc314c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-4Kj1hRrBRIL8a3wmU+Zx+nWOMWDTk3+a+OjRakwRFv9n4P9NdyXRuX78Uh7IpAZ54G192YWf/xzBL3ETZBDZzg==","shasum":"3a2ebb7b6cd218717d8a7574e82f573b9064cae3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0.tgz","fileCount":770,"unpackedSize":1544060,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkA2H4m1SMXbyakj88Rd+BLq5tQ3rea0VPiwoMO982OAiEA/KIGXT6ioqSRvv7FOBYCAWDE01YSsuWuu9vp80/IMNY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0_1633444572487_0.3067087407079174"},"_hasShrinkwrap":false},"1.52.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0","@sberdevices/plasma-icons":"1.45.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a67d6cfe0eb4ceba855b6f853f671b6603052b55","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-tii34idXuNv+dSU9CmOBMH6TUFU8P+YHjVFt4gXq3nqQDTgMUndgjwa1LjT30sz20wH3ocXst/Q4SP69wVF8Gw==","shasum":"686a0c060756cc7a5a5c7803f60bdccd71effc41","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0.tgz","fileCount":818,"unpackedSize":1600397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWgEh3m51ngqDtJ0O7zXP4ImSwyUmzBv8wFYYEpTofiAiEA9heARMJvan2y+PLDFL+Z0Flj8SuLGLhNf4peV4wVTqU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0_1633501590015_0.5277153103852854"},"_hasShrinkwrap":false},"1.52.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0","@sberdevices/plasma-icons":"1.45.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e88609e92c9b243c0767eeb8142650791de76275","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-F1WsYw8Gg5WFnPRWsaVatHPc0nk4xJEIk8Uq/jwqUy/SmQFpVGr5+PgjTPiA/6ZHl1Us0VLXH9euTK3jnnO04Q==","shasum":"73668396bff618ae39781724662dc4ca73f95a3c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0.tgz","fileCount":824,"unpackedSize":1606495,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGC+vHVqqQAjg2DN69o2JIeeqNyLmgT3NwEKaolkW6roAiAUXSnCgzU7vWm5uSq+oM8osftjYCKd5FjkCEaDLH95xQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0_1633510859459_0.8422006746744621"},"_hasShrinkwrap":false},"1.52.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","@sberdevices/plasma-icons":"1.45.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","@sberdevices/plasma-tokens":"1.14.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dc42ca9378d040228a532d1e00e78a3242cf0345","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-louV3g9McEhU5blTKVcOlQlMydj8fnYiPoTDntQ9ZDgH6XaIzoT81+r+j+2KzbnyuV65iVips2TPsI5pR121TA==","shasum":"32e6bcaede3e4b68702666b93935fa51507fa1cc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0.tgz","fileCount":770,"unpackedSize":1544060,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZrs5rir+X2oe2v/6bjGw++y6+6vp+jJ4VchrNvjVxBAiBhGJ2Rh0u8IxODjtS7/I0j0xWXTzV3ysqRqmVMGc6h7A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0_1633511140744_0.7580569807771753"},"_hasShrinkwrap":false},"1.51.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0":{"name":"@sberdevices/plasma-ui","version":"1.51.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0","@sberdevices/plasma-icons":"1.44.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0","@sberdevices/plasma-sb-utils":"0.29.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f4128260aaf3833764bfbcd657675b02024cb40d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-qOZKM5i1RVegnYCXzoQ5I3352oTQZJYa881rHJe5B7oBIbwpfhQ78IEDRZbiZpyhDKo6pVvqMFJ+HPLqnNy4Vg==","shasum":"e3a9521a4020cfa1b4a27e5c888574e089e34698","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0.tgz","fileCount":818,"unpackedSize":1600397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqj9xxptdCc5pN4Bwi/kmgCpwwvBiaFCHjo0XcfKxGggIhALlK6cR2QPZVPKrWuge2Sy1/gHZP2H9zZbdeSaycVi9C"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0_1633514155613_0.7066613571624234"},"_hasShrinkwrap":false},"1.52.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","@sberdevices/plasma-icons":"1.45.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","@sberdevices/plasma-tokens":"1.14.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b76de5b752a3ffaa8e663c47ce3e057300fb2c53","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-EDQRSsu0Gil6oQz3roxU7lPMeRswR35jPrJqBBUbkRVb7ylGNRqoyoiep7jTXdLaoZLzBfPHTaG9ZkCjjE6/bg==","shasum":"7e4853bc616c3b124e564c7b9a6338ae9ef89289","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0.tgz","fileCount":774,"unpackedSize":1538566,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR1eQAa0mDNAccqyA2MjZ1SosBz+1tWNb7ZE/5f9Uo/AIgPYSr5CfO7qQFwZMh329G0Cndqjs22tlrZtnnZKXKSqo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0_1633518772067_0.39745567184022956"},"_hasShrinkwrap":false},"1.51.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0":{"name":"@sberdevices/plasma-ui","version":"1.51.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0","@sberdevices/plasma-icons":"1.44.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0","@sberdevices/plasma-sb-utils":"0.29.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5e408309dc3d0048b0afa89e3414875b1e9a7278","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-A5JgnhGg+dmnofYqzyflOpodGK1+8dTwAc71+VeW5EdlGBso9vEBA//6yCuTtgKNootrFTNp9y0Ndwr/zqfa7w==","shasum":"b97e4f918aea6a1beb895f1545e41976c5eae11c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0.tgz","fileCount":818,"unpackedSize":1588184,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmb928gOVi4wzaqXIUPU9NHABUiCSM9TeQPXKb9XhaiAiBXEREe51RFZTqY1TiEWsQvbaIkGlv1GrWCVmqwLfbxFw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0_1633520597618_0.336299254411617"},"_hasShrinkwrap":false},"1.51.1":{"name":"@sberdevices/plasma-ui","version":"1.51.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.30.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.1","@sberdevices/plasma-icons":"1.44.1","@sberdevices/plasma-sb-utils":"0.29.1","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5772dafe04a08d9efffb0e1f56fe84046112869a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.51.1","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-0yIBm3zDQ3OLeSxoOKTGTYK4WG2yKpAuchARAJ3ZY2QWcMAIvIbUa7vOdHwGBY8kSUCdMD2Y9UkkwC9AE/KdPQ==","shasum":"29c751ad59777f7ac912a5daf62d257ce00b933b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.51.1.tgz","fileCount":818,"unpackedSize":1588297,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVMeQjIYGEFz5OnFNBiSWgzTnednKhY154c7dwrghh4AiAsVQcxQCRn5OGhgkGHpK17v3qlZxTX/UBspbuM9ORzJw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.51.1_1633521667019_0.7011613626024191"},"_hasShrinkwrap":false},"1.52.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0","@sberdevices/plasma-icons":"1.45.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-TzZkDHKuWHxv9pWjw3PaLJYfUzmDEgQMytKGCcdFlf/tOo8HaS4Sn150a7YK0/0vy2NMJ2b+KamjvZRoFB+WTQ==","shasum":"b128813ea283517438437b65f9f3c12fe16071fa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0.tgz","fileCount":818,"unpackedSize":1588184,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFrSo1AFbFnpk+xOIcx6KRUh2Wo6Ztw72fM1mf0Hs91aAiAJpeNAXU86m9qp7Nevh2Z6F03M1dxuvTLOE7n91m1h6A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0_1633522333479_0.2892953310619695"},"_hasShrinkwrap":false},"1.52.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.1","@sberdevices/plasma-icons":"1.45.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ea7dd4ee2e034a272617df8a147602dff63e9f19","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-KDPqQUHN3KOFgEYiHAOL3QAeTQem9k7ojpDKo7UbmnJ3Bm8X4Kf4bn4rydu7Hpoasr0maPeE0K6Y02PQJhKjdQ==","shasum":"5797d8ac2b3851aef1cb094a1ec27601d090424a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0.tgz","fileCount":818,"unpackedSize":1588513,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6ZekXK4A/ctAU07kwEcdUjhYfaaI2BNPx+q690BkivQIgIzc2hGz7nlDosyWpUSASe2RRwuNhfLJKLHzCLEzdIz0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0_1633535965445_0.4135627310393426"},"_hasShrinkwrap":false},"1.52.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","@sberdevices/plasma-icons":"1.45.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","@sberdevices/plasma-tokens":"1.14.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9cc0b92d09ca66f61628e0cabf6870b2cb80608f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-+snr+sDOKFKXPw5tWRnsMYLYzSorrGEh4E7iWePNblKPnn38jLGawpv4tBQ6Gz/AeNg0VF3TNA6zneQXXTGI5g==","shasum":"40c99329cdb351c392aba937718e22ad1432f77d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBprFltZ/VDEvqQQinxARRg2X+zbPFK5gNVjtqLvEwTHAiA8SP44um/7nQ5AIUb+7rEQRWYn7I5lDY2zGJoKXAfVJA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0_1633599441300_0.7970405096479023"},"_hasShrinkwrap":false},"1.52.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.1","@sberdevices/plasma-icons":"1.45.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d9f12060b0bba13f623cceb819a7080a88d3cb06","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-UeCFZJB9NZ+Utw1hFokwFaA4PL5Vma6RrXIFJoYBF2BgWc1lizAT6MnPtyUYT2e08siFsCbhDCJB6I6eiIJVZg==","shasum":"b7c7ef621c81fde7c346e3bcaa7b76dccfeaee69","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0.tgz","fileCount":818,"unpackedSize":1588513,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa2/lUkTX7ffW1d2UkaIE9dSiCeOaSvJjYFzZa6yGJ0QIgRjf6abqCG3iLV53P1diyIG+yfIhs3QrunsdT2GvAbVI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0_1633606248610_0.35646917643121445"},"_hasShrinkwrap":false},"1.52.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","@sberdevices/plasma-icons":"1.45.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","@sberdevices/plasma-tokens":"1.14.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a622d2a7270dde4969f322746df6e769f6d9ed83","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-iSje2805Foy+RR1RSiPCMUhQyskeiBu8jAmJMwTrIj13Li3GJoGdO+UPTdAFKRKNKI4tVHVo+CJRkLRn1CdPNg==","shasum":"50bed66d8ba0419cbbfabfe7af2408df2df5069a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeY1zWzZhm0JeVHuCJkLvWVbQ8Zk7EBoizto4rit8wkAIhAP4D1limDvbzO8oWnyQaMtXbH36EFzorZWzVmEN4QNIB"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0_1633608342112_0.08016872871279856"},"_hasShrinkwrap":false},"1.52.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.1.1","@sberdevices/plasma-icons":"1.45.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0","@sberdevices/plasma-tokens":"1.13.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d6de4ce096b1c70648cab7d4dc864472826cc5a2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-jVSBA+Yixaltr+/huSAF+c4vrdUSNLx3yXlftg5JKsOuCEMhdzPuFN5LmuQh7R4GHDp+5sH/ClCiuPnibKnpaA==","shasum":"59916af11ceeace0d673c045239ed47947542265","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0.tgz","fileCount":818,"unpackedSize":1588513,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWtzoUz//gpV0sUXqVEdGp4xMWZVA0HbjFyIVXulVwTAiEAhU9MR1DDVnZIuNzVcGvRdb1pTpG9WH4b2VeeU/QkWfU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0_1633609499989_0.24990533758197997"},"_hasShrinkwrap":false},"1.52.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","@sberdevices/plasma-icons":"1.45.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","@sberdevices/plasma-tokens":"1.14.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b93cad00110c4f0559506d574c996e65d952d58e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-lYVY+HWAGXodjJhpF5q5L7oJb9GFEdYGd7flyw6WS8UQ7lF4ZlRp2jmb+7mv6pxyv+X8lLC91HJgvvxSL1B+pg==","shasum":"d3dc3ef48569daad8d0f9e69001e95c4f0ae28a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLhqVKtvSsFcGdoW42EE4LVLf4Adww5GgS8O8J4b8J/gIhAInoZ4630JsdVw3H+YgohVE9cVzNLMBOwvhhGcr12dC+"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0_1633618244558_0.40203426551761434"},"_hasShrinkwrap":false},"1.52.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","@sberdevices/plasma-icons":"1.45.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","@sberdevices/plasma-tokens":"1.14.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2a17ba7a82f7971fc51534b7dce642c7d15d6d5f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-khewi3KLmhtPA+Gb4PjBLd3UbS0e1eIGQZfZpxkHCdfwcGoY7Tbvgb9jjpJDdfOp90Rw/vceITIPAoHdWP24EA==","shasum":"00ee5d7d06edb6c8946aa8206c7d01c0ab00a91b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8Cu66mnlbww8sE3Mmh9sz0H2LnSPaq213/hNZR7DV/wIgIUbSbABvvBb681NoLfxzkRNTE4dacltfdELIiVG/zjc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0_1633618304605_0.8952922194137207"},"_hasShrinkwrap":false},"1.52.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","@sberdevices/plasma-icons":"1.45.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","@sberdevices/plasma-tokens":"1.14.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fe1681084f6c404d3256c216b9997cc79e3958ea","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-I/4aPUBt4ZyMSTk9ANzt9DRn330I2G6Z6aeFPk1HUtKB0EYT4cXbz13N5uuv9PUuLdOd15f0Tk925mnp9JEyrQ==","shasum":"8d8de3de0e94e0d7e675914f49195181a9c78fc7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQfpOb09p7lYFJrX0BaayIRrbjrMLGwedFiXmCQeH/2AiBCvAqmb3pEfWyWBvMf1e59SqKJOIkyXdPZ7IkdgaFDCQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0_1633619304051_0.9342472999530578"},"_hasShrinkwrap":false},"1.52.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","@sberdevices/plasma-icons":"1.45.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","@sberdevices/plasma-tokens":"1.14.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"97d33b99871031edc06ccadd90ff283c3d98da34","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-9m0+UbqCuOsvCDqEc6QRYqPaE/IcyvgIYi6fLY2lPvdtwOfrrqPJAos2kGpGjHb7tvYYqVahmbJ2cjVkCr9pqg==","shasum":"e8ee7034d9b0f371285eb7e697b1b1a6efd88303","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlDXtCrPO0qcQ5sEbWwAL66HbhjfT9YzhQeKnLtjJnCAiB1kE91we5h3nVojEiyAhQXPWiW1VdJJSAfuAH7Zv6T3g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0_1633619403555_0.6953946316720538"},"_hasShrinkwrap":false},"1.52.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","@sberdevices/plasma-icons":"1.45.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","@sberdevices/plasma-tokens":"1.14.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5168a0e896beb170445f03e448c3c473ef8b42bc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-4yRLGyObDrGAzgzfynms6WJAcEwwvpInCGY4cnNuJ3TA90KhjPa0wWJzmvecjNSnLoORK3AnrCb+F+SJe6mGcw==","shasum":"7624e446ebea8d3f1020736bb80bc0266d662abc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEsbnGddc2W7XDFrpFnie8Lv2m1zs04OSYv6NfTrR3sAiEAwuBulKBnOrqlABPjtBF/0I68eq61FjEE61buiOugztA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0_1633639203970_0.8676010135243595"},"_hasShrinkwrap":false},"1.52.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","@sberdevices/plasma-icons":"1.45.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","@sberdevices/plasma-tokens":"1.14.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0ba8f80902ebeb5f00ee0ba8044943e3056f859f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-kI6dX8t4SMotfuC5Tw4xvl5CKJmvwzSUNBUDKhVgzq43CR+JYvQNWLU93P9HzeGsRkn1rewP7TtNKxlGC/TdnA==","shasum":"f7640ab8bdb0fa7f47030f3ef9222dc6038632cb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwXneHIlNKrL22SkEMl1aBKJrYmG5kmgRW1k0JwnyLPQIhAPfBj5vruZ1o32/fs42LBgrci8tmLlYtJSzb5JCOmXNb"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0_1633643965898_0.2560632594305452"},"_hasShrinkwrap":false},"1.52.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","@sberdevices/plasma-icons":"1.45.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","@sberdevices/plasma-tokens":"1.14.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7abef9421e8e6fc03436c29eb0deb3cbe9e1791f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-znBof9XIWkTy9nvKNjkH6gZkCQhMIY1IX6TeMbSor+kz8yu6Hh+5dRKe1W6nPl+hDwbfA6U44NNXHnSNl04mJw==","shasum":"bdbd024c6c165ea44743c8081465dd4ed5244e68","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe47VGyi7LlGy30tvUYxxSlmtOW4dQb/F9OF72G+yzgQIhAPhoyZyE6eIGF4b7cs27cXjNc8O5rxh/KDyhu3kjgafe"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0_1633675193091_0.4710344982206329"},"_hasShrinkwrap":false},"1.52.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","@sberdevices/plasma-icons":"1.45.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","@sberdevices/plasma-tokens":"1.14.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6d36e0cc9bdbaede64eb238487cef6b7ec777ff4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-XLukEQLk6+XX6wHXk0r6n6VKLRA3TBoUqs7mXdezLzCMqBR2zZwtb25SCdbdzfKmx/x6SL324Qm0k93WmO8EhQ==","shasum":"885f8be248c0d8f1bbea2d17903ea265a15726ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDuTA7mAJCJ+7ZGYo3YMk9xwm9Imkwq8IgZq+8LoN4vAiEA8t1Nbe05FBGpv6hGIny4tWPAI8QssuAJKXSdwtcL6G4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0_1633682423235_0.5398517287329962"},"_hasShrinkwrap":false},"1.52.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","@sberdevices/plasma-icons":"1.45.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","@sberdevices/plasma-tokens":"1.14.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"23971d0b4fe793802691e0c294766778511f69e5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-I8W58n/rYHCP94M6YNn7Kv2Yfvu9de9YBGqMoUdMmqXQ2YAnBDqlBq4HScoltSlRoC3SbDx72EsIEFaT7xr4Lg==","shasum":"19cded71b4e5473b50a3e43d98bf2f9d644f6fec","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0.tgz","fileCount":780,"unpackedSize":1547440,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxH67elEdfquzElZYnDwKK8E1VA3NWLs0W8Bs5W3cXbQIhAOr2e8G4E1Aw5bpkncz6UocS4YCbAIFnzpl0pspo+XNr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0_1633683001356_0.876931813905061"},"_hasShrinkwrap":false},"1.52.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","@sberdevices/plasma-icons":"1.45.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","@sberdevices/plasma-tokens":"1.14.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0778e27b3a8d0fa7fe627d05385d468faec59458","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-vydVYShy0FWBXaR3xEXCKgD8Ou16XWYvUdAxx/oTZGxzv2WVNIT3+1tFgmTga0rEw/cMOY4HPZ8iWDNf30VoZg==","shasum":"1aeaee0d0300bb8cbcc90967a15e04baba2fac12","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyQnaSgMQYXKjiygs7IKO2vb5EYaSiANyRviWQ1RzA/AiEAh88Vcl4mfvCY9i3x1vQYDbzhJUCZJ0WNM2MXkH+6ix4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0_1633687213628_0.9450155065056536"},"_hasShrinkwrap":false},"1.52.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","@sberdevices/plasma-icons":"1.45.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","@sberdevices/plasma-tokens":"1.14.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-uC+R8QYYYkk+NgjF6rtAxOgIdcdH6sLXhc+9BT8RP598RGWEk2Ma+QtJ7xa6ll7mp+N95/lV5uEG5d96iGlb8Q==","shasum":"9367cdba5508d8762a7958287e0963efd579a704","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsinrNESBCn9LG3sW7CwtaBXOCZbh86v3dg5NY3/DOwgIgZExh7gb979Nui80fLvjow2zDu179wJJh7BA4NhPI23Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0_1633689236328_0.6925586884812793"},"_hasShrinkwrap":false},"1.52.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","@sberdevices/plasma-icons":"1.45.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","@sberdevices/plasma-tokens":"1.14.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4b69e3302464b630149e5126d297dea92bcb9319","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ZbNs4ZXkY9MhmufEUVW+JQ2WS7k7TKFU2qIGQv0QRqq9UDLbdoH7e7yhoNN7OOMK/BjIvZoUNhN+eO9MEfU5hQ==","shasum":"e51f45225ce5c079eb3d5dd5a86824c2d10203ef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChhSkxUw5wMJR9VyAzLT9MDAK4btrdKYkD2pfRWHsm1AIgL4I6ul7+WR9N0aJTemUoh75p9KOMV0EDbVn14Z5BiY4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0_1633695774918_0.01244406052492164"},"_hasShrinkwrap":false},"1.52.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","@sberdevices/plasma-icons":"1.45.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","@sberdevices/plasma-tokens":"1.14.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"374bca91998cee0bbadc4c0cabc57f34ba14234a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-f9X7qGQVCJVYX3ojbdYO3pSCavhQgdR+0dXEs+RUSbVRiVkwPakmK0h3K+gURPjIFDVWnYwXm01OAEhdkN52Hg==","shasum":"fd4d9813258ca9c4cf8d601f440d175fd7d7f062","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/sItN2LM/a1WgS7zOFCe/ffFPc0mkgY22eokkM7VK5wIhANMFO566JZkBJSDhVxQnjDUht/NOBGm1v/ZwqN+YcABb"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0_1633696746648_0.7251532545713226"},"_hasShrinkwrap":false},"1.52.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","@sberdevices/plasma-icons":"1.45.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","@sberdevices/plasma-tokens":"1.14.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"90f21a26cc86e650740158040b7010ece9ae73c5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-gIZswbemZhVySR/P4XHfutkCdsdiRzlupof/GcsO61kSYN/g6d/gRaFFvlmQTvBDAVkj3N3kHvD6uajXZJ8pAQ==","shasum":"4edc2282e4d6d6d6ce10388ba72fd9c08866e43c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0.tgz","fileCount":786,"unpackedSize":1549077,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx718maAW+1nisvZZ641emRhhsp5bEH47+JeNZE6335AIgEb9gQgEexVgK+p7YGGMbM+5TjtikxiZZEfykx8h4DjY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0_1633698689453_0.7964923700154076"},"_hasShrinkwrap":false},"1.52.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0","@sberdevices/plasma-icons":"1.45.0","@sberdevices/plasma-sb-utils":"0.30.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"33393855eb5a70f6d7329609e2abfc7911c03ebc","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-XTzft7hcYj1nKZSppsSYjGwBWz35gxr6H3kwEwvQXPYbZV4SHmUCVH72BrnlUd7LSCOKVh4SHa/IE2Zxl/bOKg==","shasum":"a2b3adc5d83ae56a61033dbf99ec52338479a285","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0.tgz","fileCount":774,"unpackedSize":1539243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1m/kLkLTnoF0TB0I4hx6UcFN0r+EoNDjCfnj6hL7IxAiA4H71mchRtheEkeV2xFm7S0v3y4WnWM9CrFXWr53EveA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0_1633699300600_0.8190690274537762"},"_hasShrinkwrap":false},"1.52.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0":{"name":"@sberdevices/plasma-ui","version":"1.52.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","@sberdevices/plasma-icons":"1.45.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","@sberdevices/plasma-sb-utils":"0.30.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","@sberdevices/plasma-tokens":"1.14.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0cc18735b4202b9485a3687b1006bbf920cf579b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.52.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-goZFLlxywT6ypZhHaMAmlfkoX7poZsvEAEU3taDO2zBvbUufKP4ElKe4iElw9xUN8RHM9z4kQtQu+6CUYls//g==","shasum":"506309fb3e2da687f06cf96d1d445bf81fbc5fc1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.52.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0.tgz","fileCount":774,"unpackedSize":1538949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLLtFfAnJ24OjSaRvsJlT+imIJX92zUHjO981KTMDdywIhAKuLTwmgPgif+X51JU12HwnLcOcN/6j0/Udwrmv0VAQU"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.52.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0_1633699507843_0.8013871306834881"},"_hasShrinkwrap":false},"1.53.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0":{"name":"@sberdevices/plasma-ui","version":"1.53.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.32.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0","@sberdevices/plasma-icons":"1.46.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0","@sberdevices/plasma-sb-utils":"0.31.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"storybook":{"title":"SberDevices Design System","url":"https://5f96ec813d800900227e3b93-eobodfvrnh.chromatic.com/"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"84cbb3b36b3258aa69eeef59e10957665095c562","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.53.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-iV5nLeg8SUGd9Ur8oifXBOD3oWj1TjBYROwRttQBa7YuOhgTUtondi7Zaqiix4v3DPAbk6k4pdQloNAneloYGw==","shasum":"3470e6925311b09f5d05cbfac4f12603f0c82dd7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.53.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0.tgz","fileCount":774,"unpackedSize":1539513,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJL/WMe47VMTNoog0W7LFvFXsbDjNVWWmpksbxCBPzsAiEAlXix4HWNY2vy6RzSRF1KWq14WnDgZR6INb3siBmb78Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.53.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0_1633937902038_0.8704937738498819"},"_hasShrinkwrap":false},"1.53.0-canary.836.0fe12d8c85cb00453741db41c034383d6255001a.0":{"name":"@sberdevices/plasma-ui","version":"1.53.0-canary.836.0fe12d8c85cb00453741db41c034383d6255001a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0","@sberdevices/plasma-icons":"1.45.0","@sberdevices/plasma-sb-utils":"0.30.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0fe12d8c85cb00453741db41c034383d6255001a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.53.0-canary.836.0fe12d8c85cb00453741db41c034383d6255001a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-0vpybyAL4l6cXaBPbAvP5QrlKxiDPby6VlMT4quS6iZ8c3ps7UrwPuUzJRyXSctYshiYgdCVPP9KSQX3m+BxlQ==","shasum":"e3cb2149802db7a75d285ce8db233f8fb334e5c8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.53.0-canary.836.0fe12d8c85cb00453741db41c034383d6255001a.0.tgz","fileCount":774,"unpackedSize":1539149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzoiUk0YRDZJ6DiLc6Hln8WZwjv+epOkTikf//scqLwAIgSUPxeuuPdrCLBzrbz8zsfzPURAJII51XTZSaPBUxPXQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.53.0-canary.836.0fe12d8c85cb00453741db41c034383d6255001a.0_1633941808027_0.18453640900696344"},"_hasShrinkwrap":false},"1.53.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0":{"name":"@sberdevices/plasma-ui","version":"1.53.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.32.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0","@sberdevices/plasma-icons":"1.46.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0","@sberdevices/plasma-sb-utils":"0.31.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"40e8d6d9137a8a03da1c635cdb0d77e917c38495","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.53.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-9bC6L0x6wj10LXUbn73JRwPaKE8Ha4/z40dvLtXnROELIWvigNsxtfZrT564eAbJAGksYQ64U0g73XLvKFuSjQ==","shasum":"f37d3f0334137d153902955e08572f04dda16c80","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.53.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0.tgz","fileCount":774,"unpackedSize":1539365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBI+zWsO6Zm/1xn4ayJMiOnbfpAq9oMD/CmYVvKRXw/CAiAg2ShVQbdlJQIpkCegjLHnd5r80tzkSHdQrTI2r4iq+w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.53.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0_1633942043238_0.28566298445831606"},"_hasShrinkwrap":false},"1.53.0-canary.836.c83b1a533a02be0d084d1fd180750de74b132eca.0":{"name":"@sberdevices/plasma-ui","version":"1.53.0-canary.836.c83b1a533a02be0d084d1fd180750de74b132eca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0","@sberdevices/plasma-icons":"1.45.0","@sberdevices/plasma-sb-utils":"0.30.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c83b1a533a02be0d084d1fd180750de74b132eca","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.53.0-canary.836.c83b1a533a02be0d084d1fd180750de74b132eca.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-PMX+kLxI56lwURYmgYh15q+M6aooYCceefpoubuNV3gpeijsuU3V8iFhhVjKdRJXeYaHbLw9psLPKdnV+lzN0w==","shasum":"89a3214cad4a269fdaa8dc92d4bc1858e5102f96","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.53.0-canary.836.c83b1a533a02be0d084d1fd180750de74b132eca.0.tgz","fileCount":774,"unpackedSize":1539149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXW4nMGEfKJPB54K3XEGf6hH5MO2YqTX+WxDAT/ceKWAiEAhYKir/nfgGC/znjAyavs0Dy7Yk+ViSiQa6xuXd5KIUU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.53.0-canary.836.c83b1a533a02be0d084d1fd180750de74b132eca.0_1633943310715_0.5640697278955931"},"_hasShrinkwrap":false},"1.53.0":{"name":"@sberdevices/plasma-ui","version":"1.53.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.31.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0","@sberdevices/plasma-icons":"1.45.0","@sberdevices/plasma-sb-utils":"0.30.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"75908ae9b91545bc30d0a6b2710c7f8e9fa74410","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.53.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-oYWT525ZjOj9bIJI8JcKrab64qwjJlz3DMB+u8X4FgnAp6ShjTcHzsOvKfbNRgHLacSJyk583hYL4irhDWHlyA==","shasum":"bcfb0f19a6f7a8f4f7b647ef52d38142673892ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.53.0.tgz","fileCount":774,"unpackedSize":1539510,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFy/2HqaU4QseTG8k5PUpbbb2L0OrQVFWeZqrHXVpCsmAiEAr9PE+vBoGnoVFPhP6iaNkIThxMy7QBJ6mGLwZ73YIxI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.53.0_1633945796955_0.016397122348228876"},"_hasShrinkwrap":false},"1.53.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0":{"name":"@sberdevices/plasma-ui","version":"1.53.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.32.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0","@sberdevices/plasma-icons":"1.46.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0","@sberdevices/plasma-sb-utils":"0.31.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"630dd46d4b73aeefe43c910a2590e41ad48ba151","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.53.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-IyhK9Fm/nmgwkekuJsjUMcM0GLkAQP0hFHn/wOShnmzhRbFvdL/UVv+4PRG+uc4y3g7bZAFUxXFGq1AB/gRBxw==","shasum":"62cbc674e2a591ab80d35971dbe2563f862c716c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.53.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0.tgz","fileCount":786,"unpackedSize":1549439,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZGCQP+gKc8dlVIma3oGUAJhKIKpAXcuOJVOAOJgXMPwIhAJ8Q2uFDbJ/DBl5bsSnE+HBkGLuN5uF2hlX4xXIiQSLM"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.53.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0_1633946293464_0.356917808049936"},"_hasShrinkwrap":false},"1.54.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0":{"name":"@sberdevices/plasma-ui","version":"1.54.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.32.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0","@sberdevices/plasma-icons":"1.46.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0","@sberdevices/plasma-sb-utils":"0.31.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"676bb92503d8acb4d11318930208f2ea9b96f2d7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.54.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-hSV1jAeFFIAo9pmzOgMpeWYgon/SlUqZY5SIJ+oSho9+tQ8MOSasamehFYxCO6AiKCpcri8H6VJMdxO/j6n5VQ==","shasum":"f8126d8f2a33f0bde8fdb003284b43b996a1ad0f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.54.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0.tgz","fileCount":774,"unpackedSize":1539726,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHw7qKvu7W/h9VCFrXas+45HYcbNHdPg91GLZrFEPj2cAiBRRxqauZRDspUxPek3uOs0Y6l8nhDUyvriaLAtImsRxw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.54.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0_1633953485160_0.04452979228248477"},"_hasShrinkwrap":false},"1.54.0":{"name":"@sberdevices/plasma-ui","version":"1.54.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.32.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.2.0","@sberdevices/plasma-icons":"1.46.0","@sberdevices/plasma-sb-utils":"0.31.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1965c025baa04b976990a7cc2be77ea9226c40bf","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.54.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-A1nKsgH1sX3USJyOd+4BtYKA3/7vtE8beyg4mvWusBOV5iEE73/jmCr5lzpArsi0EMwhZmJ80unvy1qh03iZtw==","shasum":"99d6394c59ff6e2e39087a4e3bdc1c88380cff5a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.54.0.tgz","fileCount":774,"unpackedSize":1539510,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+ggT8lxlAang2wA50nXM5NDSZe5HvNLYXP8J+ZNTBoAiB9kIN66ryGAGYmnqNadyfcwkJmZdoNkr7hDSElU967ZQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.54.0_1633957214303_0.24068437951195332"},"_hasShrinkwrap":false},"1.55.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0":{"name":"@sberdevices/plasma-ui","version":"1.55.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0","@sberdevices/plasma-icons":"1.47.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0","@sberdevices/plasma-sb-utils":"0.32.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"440040b80c490764d2762586b94199ff97c953f1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-zWxhooUFZORR2PlGxxwd+CF4vw0PuDtoNv0T87B8wF2kYiI3KB3buWEgxW1+AZGxHvrHRZEDXwfOjxBD+JdEmA==","shasum":"561278f52c676a7e5506253c1f58293fcfe5b3e3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0.tgz","fileCount":774,"unpackedSize":1539780,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1lwFBj4ICT3P5DM7CyYDjJOUqczpVxdtig1wv4sqPcAiEAzQKNOBqLWizDJuPcVXnc0Gn5T3tFMfdW3OvcB+fcrgo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0_1633958512836_0.04591971385772409"},"_hasShrinkwrap":false},"1.55.0":{"name":"@sberdevices/plasma-ui","version":"1.55.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.0","@sberdevices/plasma-icons":"1.47.0","@sberdevices/plasma-sb-utils":"0.32.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"91462aa5620374249e919801818d8f8aef51f18e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-zAF5iDrnc1bNmnwdVyE/tzuoWLxP0+NJfaSLOnWsQNeY/jMrC5p/v7JZ5+fDb2YsohjU/W6xN9xax1sRbXNn/w==","shasum":"35da7fc84ee661cc73082ea490b51e2ddd060ee2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.0.tgz","fileCount":774,"unpackedSize":1539510,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtZT1WeNPz29PINKqv7l9EeZW86frxOJNyrY3QZTPnngIgGgnMTe42dU8Z+lzI/lQPXrhK4UBuD/yDhLiBv8qK7Q0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.0_1633959997540_0.610735856265912"},"_hasShrinkwrap":false},"1.55.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0":{"name":"@sberdevices/plasma-ui","version":"1.55.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0","@sberdevices/plasma-icons":"1.47.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0","@sberdevices/plasma-sb-utils":"0.32.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5e5d6d7405db01ef0ec0b3d59dba8b008c31838c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-4DorUDdG1jeN3DCpMm01G2t08jOlsQFXPWZiEen6jo83g9vlvs7q5ct+Ek3IQ5+y9Cg+MlEoKQNRMys5IiSiKA==","shasum":"1e40f01569bc3d633e6c4c65719b4375c69f6401","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0.tgz","fileCount":774,"unpackedSize":1539780,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3+V3M5vGymTx78MspuG8OTsYetxLlsGYRfb72vsTokQIhAMEYvGdfmpBlgcRARJ4y/HekJ7UdmywRXWnq/690oIm9"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0_1634043419409_0.9720417044743304"},"_hasShrinkwrap":false},"1.56.0-canary.819.188ba725eeba6f35ffea4a2d1d75cb7d28ab655b.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.819.188ba725eeba6f35ffea4a2d1d75cb7d28ab655b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.0","@sberdevices/plasma-icons":"1.48.0-canary.819.188ba725eeba6f35ffea4a2d1d75cb7d28ab655b.0","@sberdevices/plasma-sb-utils":"0.32.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"188ba725eeba6f35ffea4a2d1d75cb7d28ab655b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.819.188ba725eeba6f35ffea4a2d1d75cb7d28ab655b.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-xQkNrBDXONpsJgNVE9Canxnn6/7mYJyg+8z6f2RcDOARYR9Bo2JvCLP0LsbDcidaW6tLzyDCQmghYVLvqYX9QQ==","shasum":"b7445118a1597b2c65664d39d3fcb2151e772bcc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.819.188ba725eeba6f35ffea4a2d1d75cb7d28ab655b.0.tgz","fileCount":774,"unpackedSize":1539618,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwcNIUXvpStPLu2zIS2IUhLydWdbAuC19S+OYLyirxzAIgHnn7dVTClj5LXeuzlsTZvRzv8Bbliuzh5iXpozZlNQU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.819.188ba725eeba6f35ffea4a2d1d75cb7d28ab655b.0_1634046358937_0.2537099166725527"},"_hasShrinkwrap":false},"1.56.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.0","@sberdevices/plasma-icons":"1.48.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0428852089d6bcc88fcc95da9f198088c6fdd3dd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-C7BlbN9m8KG+X437fNpGT3RhAjS7TF+/a6e4HlfJgQndNVi0BSxKa3X5uYE/8NGCz9cWVLnm7F0KbedIyvQlVw==","shasum":"6433a88906cd44708a06ca4a1d26b47ed410a013","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0.tgz","fileCount":786,"unpackedSize":1549854,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkwYgSQPnoR6SgBnq39fxXSxUjnyI0DAxKIuJxXaZxnQIhAL40vX+0yiNm1N2ZUJF/j9i930z0z4E5vPmLTqeReLO+"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0_1634047892593_0.8550948218767063"},"_hasShrinkwrap":false},"1.55.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0":{"name":"@sberdevices/plasma-ui","version":"1.55.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0","@sberdevices/plasma-icons":"1.47.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0","@sberdevices/plasma-sb-utils":"0.32.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4b8cdcf75ee00ad990982a73f51f16a33ea7619c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-OlFTH5Ksb/b1kl5RfqM0GpPEqcxNlQGvIgNn5qqYgNPrD38XOvpAMaZf/vE6dZ1ksSRmJeaiO79Rj3aFx4RTww==","shasum":"55ec9cba67468ae282b1668004232e5352e19c20","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0.tgz","fileCount":774,"unpackedSize":1539780,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeJPdjmIFc1w8eU2d9h+iPvkwTZZlp0qvSZn/kTigVZAiBpxC/dY3pVxODhrdARgL63+kt7G6TidHFWHSvFr+EJ9A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0_1634099782936_0.1403281412416899"},"_hasShrinkwrap":false},"1.55.1-canary.857.bc8c9ba07e90c69a705ad777ad4efddc121195cd.0":{"name":"@sberdevices/plasma-ui","version":"1.55.1-canary.857.bc8c9ba07e90c69a705ad777ad4efddc121195cd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.0","@sberdevices/plasma-icons":"1.47.0","@sberdevices/plasma-sb-utils":"0.32.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bc8c9ba07e90c69a705ad777ad4efddc121195cd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.1-canary.857.bc8c9ba07e90c69a705ad777ad4efddc121195cd.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-uHQKQFV7TB+9NMqXwgaaxpUlJIvjeOlIpl3T2J65owbX3omTktHoTQ6CtWG46BE3fyMIhzsBrwvtSXGxdtWG+w==","shasum":"56ed3239f80589c7b77b227a9c31838f4e0e3424","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.1-canary.857.bc8c9ba07e90c69a705ad777ad4efddc121195cd.0.tgz","fileCount":774,"unpackedSize":1539521,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwQDj2zdCmT8+XygD8NXUaZymTpi9I9DvCZ2hFavmuoAiBaV94R08Knk4pbfdol1+S2zWFABHtlh20slNgCHYjDGg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.1-canary.857.bc8c9ba07e90c69a705ad777ad4efddc121195cd.0_1634107443906_0.9749216905482885"},"_hasShrinkwrap":false},"1.55.1":{"name":"@sberdevices/plasma-ui","version":"1.55.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.1","@sberdevices/plasma-sb-utils":"0.32.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dccd92a0f037fc3e5c79ef842c44d30da952046b","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.1","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-V+FcGEwHXrA/RBim7qAR7tC4pWWm74YygW5TQZsTmU/kQw01lyGxQP5FyoIlvTi3boh5LO3x0f3ZjseHNdA7Xg==","shasum":"93e41b73280cbb03bea2c772ea25a1f897935a3c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.1.tgz","fileCount":774,"unpackedSize":1539765,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlbTSWZN3Om9bzEpUynxXWptkyyZfG7cGz1bQywEar1wIhAIYmqv9LDiLMP0Jh8zUlzgMoJ+VAnPR03d0NwRxjOByy"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.1_1634110914006_0.5125964424042859"},"_hasShrinkwrap":false},"1.56.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"60e1b108b4cc742f2c1f98ad67695b93a127daa8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-sq5PWSWO+leHD7pOjUeJt+pTaspA/h5BnTLGnZv++PIMskcygbCZ6A1K9EIJ20hJEv4ppMoRhqUnJEHFxKtjjw==","shasum":"46ec2f37d96e760b2196a4ae69b799826762dc30","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0.tgz","fileCount":786,"unpackedSize":1550109,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/BLcvap7zwflpipOhzSXJ+2xrqUOmu7JzsvZMi21XYwIgOSj0xwM3wjYTyadnAv2VjwTfAyjFdHRE2+YMe7aMX8o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0_1634200110503_0.7465181366055509"},"_hasShrinkwrap":false},"1.56.0-canary.863.58fa87dc4e01da5ba441ddbdec8349223d549051.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.863.58fa87dc4e01da5ba441ddbdec8349223d549051.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.1","@sberdevices/plasma-sb-utils":"0.32.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"58fa87dc4e01da5ba441ddbdec8349223d549051","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.863.58fa87dc4e01da5ba441ddbdec8349223d549051.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-8oLRsLmqpZh/FnXL6CpukXMzWI+u/KHRuj31qYcBRxFHW474i9ndFB+SIVHCWSGAN7A06OmB2bvz8ibzjPJhuw==","shasum":"b92b430a176cf4d85879f8e7616b09140f2dc46d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.863.58fa87dc4e01da5ba441ddbdec8349223d549051.0.tgz","fileCount":786,"unpackedSize":1560697,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDc8UhcQIFsuMfmF7Rk6pvfq93e/UJCjBcyTXV66mEOAiEAzm28ejLXEYgOtHWiQCY+CateoVNwl+XaKwDqeDErj1o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.863.58fa87dc4e01da5ba441ddbdec8349223d549051.0_1634203063187_0.522629720609759"},"_hasShrinkwrap":false},"1.56.0-canary.863.1eaa8751b9962c29953ca3279efa9bd875b4d6c5.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.863.1eaa8751b9962c29953ca3279efa9bd875b4d6c5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.1","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.1","@sberdevices/plasma-sb-utils":"0.32.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1eaa8751b9962c29953ca3279efa9bd875b4d6c5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.863.1eaa8751b9962c29953ca3279efa9bd875b4d6c5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ErW/OW8BUX35k0OuG4Trk4D89Q8Yodc0apGUfbrUJxBxGa3ueB0d9m+nC/nPgjguzV1DIsnAk2HT+qeDaHkkkg==","shasum":"9942f11b1fc97dd25d401ca4aaa975885115a2ab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.863.1eaa8751b9962c29953ca3279efa9bd875b4d6c5.0.tgz","fileCount":786,"unpackedSize":1560697,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE58lDTdE7t2LNX9qjXfMIXEPZgPME+cyzLjNOURHDyEAiEAySUkprIH593Pq/wZELcPcg+qIImY6CIKb3z2jmxAZtI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.863.1eaa8751b9962c29953ca3279efa9bd875b4d6c5.0_1634203648724_0.7573562482156972"},"_hasShrinkwrap":false},"1.55.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0":{"name":"@sberdevices/plasma-ui","version":"1.55.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0","@sberdevices/plasma-sb-utils":"0.32.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"34ab922b9396d22bff575d5660316e6ed1c14575","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-bcbdxYei/AnCg/YDo66HY2FdjvoV+1tNTwniiUF9qERpAsheuWuf29pRRDkt022DObfgg4W231mUe9et05E6/Q==","shasum":"a24989d035b0ab98fe68a9650d5d65f300648f26","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0.tgz","fileCount":774,"unpackedSize":1539981,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICC1ZfSEBKAQN3am+KghjdPU7UiFNS3hRLTOaiTJhznuAiBVglIUQzPUIu9BGJAZMxgWh4JxvsLo9mXuyjwhnK+OfA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0_1634214430384_0.7443085406098908"},"_hasShrinkwrap":false},"1.55.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0":{"name":"@sberdevices/plasma-ui","version":"1.55.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0","@sberdevices/plasma-sb-utils":"0.32.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"95726dd14a1c06207bf262c2ebafb4ee9f044449","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ysNJ78s9qIFND1W+2pTITaRCMB8XWLgDtS8yX5E4E92CUobrpCMl4m/cr9GcKUGYWD474Ao5i5KVqZ+SVrocyQ==","shasum":"dddc7f3bb2b990bbfccc9aab30561d9a0342c235","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0.tgz","fileCount":774,"unpackedSize":1539981,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+KtKnVXoCAlMmyCy1bvmHK+EydkZFt+7WAmqX6EGVdAIgWZCmO37KtJefEmd3A0V9dAsj31cffj9dEQjuo2TypPg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0_1634216665386_0.505336501966436"},"_hasShrinkwrap":false},"1.55.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0":{"name":"@sberdevices/plasma-ui","version":"1.55.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0","@sberdevices/plasma-sb-utils":"0.32.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5ccc18994fb2ec56024561286e2d896e91f7391e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-c4XksODmC8cfe2zp8vEzulo1fvm4iJOeyEzE54hGN8mW6nsk3N/aVj8GpCzt1C18vh6Qt6z3sW7XHYFs9RDlhA==","shasum":"b4f7f8752f225356de9c37c624fce758f3c33129","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0.tgz","fileCount":774,"unpackedSize":1539981,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNE3nEChetJBRSmcf5czzVTBc4niejzIeePdoDh7OQPwIhALHA8ELhwsvTFRKUDbGxQ3bUZtWiaGXFB90zTWIfssMD"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0_1634222354546_0.038307784132615375"},"_hasShrinkwrap":false},"1.55.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0":{"name":"@sberdevices/plasma-ui","version":"1.55.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0","@sberdevices/plasma-sb-utils":"0.32.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f7b7e1d72ccc747fe5520e61581ac0d4f56ba734","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-sp5xt9DaP7ByB50DEp+Pox2uHmTXJ1MFCIDi0y/3x1G1Oeig9AVKSTIbKQo59mlhPrGYEuqUE6jsiCuyZTVZvQ==","shasum":"1dfc7e3c26e6480dc3e523c558a1b2f8fdf4e867","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0.tgz","fileCount":774,"unpackedSize":1539981,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC71b0OBHjbH4NMjFOMdPMmnxoF9bBe2xjswnUMLIdjawIgG5/eH8vqIUgX99wuz7W1oIiqsmha07FlptNViJTdyi8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0_1634227357018_0.15673879019848314"},"_hasShrinkwrap":false},"1.55.2":{"name":"@sberdevices/plasma-ui","version":"1.55.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3ed1c456845aad26d47bb8e9ececb6aef8d2a0dc","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.2","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-4TuT3vv9NdTh7GWHzLtNlSsGuk/+8zw5D9a0MU6s2Cr6m0R0n40zCCVchYoTSiBbbt0ones7mYT2MIofbudV2g==","shasum":"b9695633fdc99cd070ad17780b3549600b6bc2ef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.2.tgz","fileCount":774,"unpackedSize":1539993,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9UrpaYD1UKP12tn2essgZg9lTb6SZ1EouclXglxeagwIgJ84flL57uR+bqo8QrKTFNRUwKjRIFdea6T+WQ99UtQA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.2_1634244420271_0.06947144633831259"},"_hasShrinkwrap":false},"1.56.0-canary.819.ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.819.ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.819.ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addon-knobs":"6.3.1","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.819.ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-vWvUACZ8JwJsBWTgU6RZ93PL+zp6hxSljOmYAHfDioXP/sMqcYOYeZK7bgomSMEBvVhbZAmfToTogHeEDuOkMg==","shasum":"68168723b1b5a85a3f9a0da17955c1029f305dfb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.819.ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549.0.tgz","fileCount":774,"unpackedSize":1540101,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTMkF2dIO33z8Zqk3qLWQeUWA8ROCST+IEfvfRFiGesgIhALPhqv3llGjq+ekHe+Nmk/599iqhptqLQ2FTbTxB1tva"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.819.ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549.0_1634302391383_0.9879447419544705"},"_hasShrinkwrap":false},"1.55.3-canary.857.a3ff0e4fda42d8ae8e3adf6dad3680eb638f94c6.0":{"name":"@sberdevices/plasma-ui","version":"1.55.3-canary.857.a3ff0e4fda42d8ae8e3adf6dad3680eb638f94c6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a3ff0e4fda42d8ae8e3adf6dad3680eb638f94c6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.3-canary.857.a3ff0e4fda42d8ae8e3adf6dad3680eb638f94c6.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-QdvLkbiAOOJJDuMDT8b4bTq5VOw+l1JgnqLomcyZ4jjD1HCmRm/nAdX+YSVXdfNJR9GF2EOPyJvU7dQ1OJOqng==","shasum":"a0475e02bd79658886bb45ab34bad214e4eea935","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.3-canary.857.a3ff0e4fda42d8ae8e3adf6dad3680eb638f94c6.0.tgz","fileCount":774,"unpackedSize":1540004,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVSqRldBOZoGa35edL6dekeG9TtozNoXBXIEEnpZz/8wIgR6HYT7P54GUyyvjh/9xx/b/aVEWJiSfEUBqTv/wg+Ho="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.3-canary.857.a3ff0e4fda42d8ae8e3adf6dad3680eb638f94c6.0_1634303067479_0.6705290787259115"},"_hasShrinkwrap":false},"1.55.3":{"name":"@sberdevices/plasma-ui","version":"1.55.3","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cd498e135a4885ee8fdc108571126903d0b1ea15","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.3","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-TYk5aMxaXPhQjBHczonn5ttKU7L+oGKdykOlTW3NuI5RjiIunE8TqEKwq4BfwgjDuNxds8JgFHoycmnCGei+Fg==","shasum":"9b89548c0026650613f05c3efd4d33da2644b1f4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.3.tgz","fileCount":774,"unpackedSize":1540219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGe7vGT3vEelX/hQMUWdzGcT8BP3CDFqc4xokmsTJTBWAiEAlc39Qz337aatLrzX9XsNbOPqlA/g5csVL5/txYtrLQ8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.3_1634304615608_0.15322810584467583"},"_hasShrinkwrap":false},"1.56.0-canary.819.4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.819.4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.819.4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.819.4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-quSMC058q62a63Qh6wUmk8yo/mq1OENUAvE2WCORx9m92/A42a1j+n/uxRwZvxu3janG7mjdtbjn9IBnPrTZEg==","shasum":"25e411ee64583a6e4a53b8ab51dcd72799b9d67a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.819.4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESlVcbqawv2Jycz5LmblWLM7q/yVfewAM7yYQWRdNJZAiBE1B/363zeQ4x7HTisnzi/7hVRW0rvb0tuOh1ZprQUNA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.819.4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76.0_1634624164935_0.47039285432462274"},"_hasShrinkwrap":false},"1.56.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"935bfd640f9ccf5dcbd183a00a27244d29835149","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-rnMqdog4VSlWev+ca1CT3CH9rzBnaJNJopB73iz+a3+NVOBEX8LDCMxwMe4CNqA86dKnlSef0lnsGsNmgqEjNw==","shasum":"5530182f39fec7aaa47228dc4e8a5dd3caa9b135","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0.tgz","fileCount":786,"unpackedSize":1550563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTE8i4SJz3DS2/GJoQ9sZw54z+i7SKbMUd/PmKcLV6AwIhAKWHe8AbTo1V8Aj4fQWb1mW4gvI+OYCP4Q8e53X/4hfj"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0_1634637543312_0.4127958696198004"},"_hasShrinkwrap":false},"1.55.4-canary.875.a37eab0dea0a526da60c7cd8ee543d94ddc52142.0":{"name":"@sberdevices/plasma-ui","version":"1.55.4-canary.875.a37eab0dea0a526da60c7cd8ee543d94ddc52142.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a37eab0dea0a526da60c7cd8ee543d94ddc52142","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.4-canary.875.a37eab0dea0a526da60c7cd8ee543d94ddc52142.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-kod7omzJiSAlFF1lFNcdgbfIqDtg3RsX1hX3+W53+kVABCfkoTHsW8Qqp2HWJ2v0ApICvUZvZQgWxJk9fRSSew==","shasum":"1429414c1bd590dc2f537916333159abca54a7cd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.4-canary.875.a37eab0dea0a526da60c7cd8ee543d94ddc52142.0.tgz","fileCount":774,"unpackedSize":1540453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8+0u+YrUZiOQVQeio3MN/nWaMSdLfvVH+l90k+fdWqwIgXYDJWxrdFVXkKCTaIB1sWP9dnUrXXC1Lunnw4pFR0Bw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.4-canary.875.a37eab0dea0a526da60c7cd8ee543d94ddc52142.0_1634648252788_0.15749864166216354"},"_hasShrinkwrap":false},"1.56.0-canary.874.9409ec57dc1e0d693b3d0e7bf56945d09aba8fb3.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.874.9409ec57dc1e0d693b3d0e7bf56945d09aba8fb3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.2","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9409ec57dc1e0d693b3d0e7bf56945d09aba8fb3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.874.9409ec57dc1e0d693b3d0e7bf56945d09aba8fb3.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-JawapsxFDnMhGPugoKCAS+oKOGuk7921478SJTI2rW9nkpfhAa7InqYbuae9nye7+CtaPOq6ungZmIKpoAQgnA==","shasum":"f3db4a8cd1330937ee280faa00795bdd86c2b2ae","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.874.9409ec57dc1e0d693b3d0e7bf56945d09aba8fb3.0.tgz","fileCount":786,"unpackedSize":1564818,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtRIsvuLmisG3xwE3Ql07ZFGdv8RR8xhlcR+u952/68gIgSoiCRjdfw+luJqgpm5ka5nkQ0oCtmxqB+ehkGAGd6jc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.874.9409ec57dc1e0d693b3d0e7bf56945d09aba8fb3.0_1634651377412_0.16344590318766294"},"_hasShrinkwrap":false},"1.56.0-canary.819.205a3f01dc47ce8f776fcd0b41365cf7c5d5563d.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.819.205a3f01dc47ce8f776fcd0b41365cf7c5d5563d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.819.205a3f01dc47ce8f776fcd0b41365cf7c5d5563d.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"205a3f01dc47ce8f776fcd0b41365cf7c5d5563d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.819.205a3f01dc47ce8f776fcd0b41365cf7c5d5563d.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-lC78UlAoj3YJtzsPRi9u1gdnnBP/qjuF7N3vyMSdMSFlKUHJq+4bjBaUkAemxSvWAsmbB+pi3i/Nau9OWuCQBw==","shasum":"9fe155f70379525ba1ccf57c1b231251cffc6711","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.819.205a3f01dc47ce8f776fcd0b41365cf7c5d5563d.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvwTEt0FOXv3WR+ca9yRg44DIEeCZZQ5nVW1q+AfFxVQIhAKuzuQc6RKp8qJbS6BY3jHeap/56j+b4RTF2EBH/e/dX"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.819.205a3f01dc47ce8f776fcd0b41365cf7c5d5563d.0_1634724910510_0.09290147128451864"},"_hasShrinkwrap":false},"1.56.0-canary.819.770d85e58201d493d0d880840628a6e1e29d7069.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.819.770d85e58201d493d0d880840628a6e1e29d7069.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.819.770d85e58201d493d0d880840628a6e1e29d7069.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"770d85e58201d493d0d880840628a6e1e29d7069","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.819.770d85e58201d493d0d880840628a6e1e29d7069.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Pc4kufIn+YRLCTIHL5Gw0x1RBBGOWjcyyOMuZEuFAIj6fcrILXuLO9OpfbdCuesb+QORC88AipwQgPc9g6kM3Q==","shasum":"1d8223c2070bef16d15a6d73be76e2472e7990a1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.819.770d85e58201d493d0d880840628a6e1e29d7069.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOcBKMBK6a7xJbXZ0W1pmuOxAP2ApphIxbRIl9mKKkZQIhAIcA1RrAcLrfVKIc4ZwnG1f4VDV7dy/A2OIs6k+n8+Z7"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.819.770d85e58201d493d0d880840628a6e1e29d7069.0_1634732105275_0.13767936283708382"},"_hasShrinkwrap":false},"1.56.0-canary.866.61d920cb1176d524a3b95a88019ac16402d5124c.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.866.61d920cb1176d524a3b95a88019ac16402d5124c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.866.61d920cb1176d524a3b95a88019ac16402d5124c.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"61d920cb1176d524a3b95a88019ac16402d5124c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.866.61d920cb1176d524a3b95a88019ac16402d5124c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-k0QNzXzWVvq/z5m8fubH2+xRm+M/llguNUOPWqc64kjHt6qOh/URdv1meVCtKt94Nv7Zya4wIPj6Q65PsNcajw==","shasum":"b88135991a92d3b4598e858c013f98b35ce9621d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.866.61d920cb1176d524a3b95a88019ac16402d5124c.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKBRFudK8GwUCRNqd2y9uRnkb4XLi4wy8KFlJtIUm6GAiBuSgxxch3tEacIlNRQqDk5zDn/3YGe6FB2auFZIobZpQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.866.61d920cb1176d524a3b95a88019ac16402d5124c.0_1634737291477_0.23480498112077774"},"_hasShrinkwrap":false},"1.55.4-canary.867.0246c00aa376e1a18b5706d691726621e0df70fc.0":{"name":"@sberdevices/plasma-ui","version":"1.55.4-canary.867.0246c00aa376e1a18b5706d691726621e0df70fc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.47.3-canary.867.0246c00aa376e1a18b5706d691726621e0df70fc.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0246c00aa376e1a18b5706d691726621e0df70fc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.55.4-canary.867.0246c00aa376e1a18b5706d691726621e0df70fc.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-r+IZk1oNeXE8UMXp+yFWzFURp8ZqadVyR713cD3YG7bFVezWfKAqvGhuXpyb+pzkOvs+Pd9SvhoHIuAN5O3+1w==","shasum":"ad59a1a0c33839680739f7a1648f2d93456fd4ef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.55.4-canary.867.0246c00aa376e1a18b5706d691726621e0df70fc.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWw8eGClB/I27g/wiRMjlCXAfzXbWIjEDrB6K0zB4Z7AIhAMmLjLBxcKC+ptsAzN0Xk8zFvNkM3MsjBeWvQe0LYMl8"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.55.4-canary.867.0246c00aa376e1a18b5706d691726621e0df70fc.0_1634740039054_0.6007956475573784"},"_hasShrinkwrap":false},"1.56.0-canary.882.b913f28ccf5dd7e62637bcdae316738fa8b54dd7.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.882.b913f28ccf5dd7e62637bcdae316738fa8b54dd7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.882.b913f28ccf5dd7e62637bcdae316738fa8b54dd7.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b913f28ccf5dd7e62637bcdae316738fa8b54dd7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.882.b913f28ccf5dd7e62637bcdae316738fa8b54dd7.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-vZfPyMWW/KU0KFYMLwx/Vfp+cVbW3fraEmH9aSdp0gBsoYWC9LyGnuOz90NNzU14gZvLGv4+4aGbOGGLk7TPXg==","shasum":"d2f29690ac1190e5686be1ccec997a3da8286ac6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.882.b913f28ccf5dd7e62637bcdae316738fa8b54dd7.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn/FvvqBknEBzuy0vYbYv+UeWrbVe3E7/m+mmaoGAjZAIgYvOVZhLXsKzA/eSr9XjKKCbEMDaZyM3YCgIbqf4+/5c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.882.b913f28ccf5dd7e62637bcdae316738fa8b54dd7.0_1634740470299_0.49101993765703544"},"_hasShrinkwrap":false},"1.56.0-canary.877.b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.877.b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.877.b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.877.b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-2DbVLsO9b9nR2TmtaoL7XbYUd/bTE5X+QAOrzK1G+V+zWGkzTmJa6HW3GZ3Bbl13wEhPRXWYJ8P71jifm5yc3A==","shasum":"731df58d05186a5d3758f6a0adebc7b7d489c838","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.877.b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbrGi+gN+j+7Lko0SxXJZeHC6hyIOiCmmXwbPJ8xhbtwIhAJs5Gvbz82aToncqYzBjZZlpZp7uNhhOA7lIqgiKm8Au"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.877.b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf.0_1634742894594_0.8222454901616911"},"_hasShrinkwrap":false},"1.56.0-canary.883.afe4a889b90300794636dbc052d4446517085c35.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0-canary.883.afe4a889b90300794636dbc052d4446517085c35.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0-canary.883.afe4a889b90300794636dbc052d4446517085c35.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"afe4a889b90300794636dbc052d4446517085c35","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0-canary.883.afe4a889b90300794636dbc052d4446517085c35.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-COy6z48iUawv6Oe87wlvnx01ZbIv1gzvP35ho/5CC1Tv9AhAXh6rOdPvymAOtXBFMKrKHEjCMc737e1gRus1gg==","shasum":"3938fae920ebae5b510e6b0d823bdfacc05ca23d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0-canary.883.afe4a889b90300794636dbc052d4446517085c35.0.tgz","fileCount":774,"unpackedSize":1540327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCucdLO+f7q700vS9ojmUvyHmMVIIzZlaPHsJdY0jfD5AIgfoSjDihPmTGXMbL61vz3fp9k7SP1bqrYkUDlC6+MN3g="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0-canary.883.afe4a889b90300794636dbc052d4446517085c35.0_1634745631485_0.8408618110530433"},"_hasShrinkwrap":false},"1.56.0":{"name":"@sberdevices/plasma-ui","version":"1.56.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dfdc7706676e2275fcefb5d851f01bbf0fe7f335","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-j1sctnpdnSl3UnkjD3qRZ8fAIU/RV3FH92kzB6wOvzc8wn0XUWY5sdlkdWnReJBe7TKauFS9iV3p6aQfcRlD/Q==","shasum":"43c61faf43123a2a3f4f19f36e427eea990dacf1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.0.tgz","fileCount":774,"unpackedSize":1540219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFR1d7V4v0qKv9R32gikpm9kn9UzRt0miEQIJve8cEBlAiEAgMLe0cTffbgHRqj7N1soyl/UYte7rHnG7ysiJTzWAFc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.0_1634785968833_0.7654862757623551"},"_hasShrinkwrap":false},"1.56.1-canary.875.43349798cc2502d9edae76da43d6bbfbc695b080.0":{"name":"@sberdevices/plasma-ui","version":"1.56.1-canary.875.43349798cc2502d9edae76da43d6bbfbc695b080.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"43349798cc2502d9edae76da43d6bbfbc695b080","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.1-canary.875.43349798cc2502d9edae76da43d6bbfbc695b080.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-NX6iRUgcCM76EDal9DBV3OGCKSL0kaq+AWPZdVxhGCHUTCZkXR8KpL2Ugw4WNZQ4jURWu6jwnvm2NQ07ba2buQ==","shasum":"fa073ef0e5ff94b609e8de644e57459972e9a672","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.1-canary.875.43349798cc2502d9edae76da43d6bbfbc695b080.0.tgz","fileCount":774,"unpackedSize":1540453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH0lWhqgX/8C4t5ASufQzngjuvT/WF2ABF9wKBcSYLcsCIC4CzSpZBPKZ+wJ94FR+eR797i0U+eaj9QgAJJDQY3sn"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.1-canary.875.43349798cc2502d9edae76da43d6bbfbc695b080.0_1634807875978_0.16241265480484235"},"_hasShrinkwrap":false},"1.56.1":{"name":"@sberdevices/plasma-ui","version":"1.56.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0ac1de3f0910bdedd8e78c0781243ff1e2348249","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.56.1","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-OCnW30lVflL0I/h8uhfvHX0PNXFyW3X9xVUHCCD71lY9sz+9hRG7be9Fo09mmCEhqm1ycqQ6BEdhE/CzmA4PVw==","shasum":"6c13201dd2c7996e682b1da6c4168ba30822b369","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.56.1.tgz","fileCount":774,"unpackedSize":1540834,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmhLZbEV0R9TGwFGsoOSsOPBlQSGGKwmA0uMRqEpO4ZAiA1UInpTxD3oaZUl1d3DCE4K2d8vZM9M3iwRxOUH2ahSA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.56.1_1634809929835_0.4200579247942551"},"_hasShrinkwrap":false},"1.57.0-canary.863.eb348ed4cc27dfa006a7ed2ab860f849739da2f2.0":{"name":"@sberdevices/plasma-ui","version":"1.57.0-canary.863.eb348ed4cc27dfa006a7ed2ab860f849739da2f2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eb348ed4cc27dfa006a7ed2ab860f849739da2f2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.57.0-canary.863.eb348ed4cc27dfa006a7ed2ab860f849739da2f2.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-If95iilqy/CIkc2nAaE3N9v44Uh+A9+GxyShqCHznUEIzAMMJtGLD8Fv78LvMXpRYIVkIE7Pos/5mWzv1GqQ/A==","shasum":"d376c985fc379ec65de72b5e529addef5f8af5d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.57.0-canary.863.eb348ed4cc27dfa006a7ed2ab860f849739da2f2.0.tgz","fileCount":786,"unpackedSize":1561766,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsRXpy9FWaTXWLPCqaHZSExp+i7sLiETbHIUID7Op0LgIhAMr5BvclLlaTmQNR6QqoSk1yVd8jyJk0R3jAwQz/tzxk"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.57.0-canary.863.eb348ed4cc27dfa006a7ed2ab860f849739da2f2.0_1634810891154_0.4044450666125181"},"_hasShrinkwrap":false},"1.57.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0":{"name":"@sberdevices/plasma-ui","version":"1.57.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.49.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"daa98f2a77f878d2ef157ac3af1312b857f2935d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.57.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-5PXhJ459NI1DfG5aNzMWXFNXUYMVSJGGw5Obs2xKIJc5AyBAlpatSZ7iQnjkdrH8cD8cFvBK2qyXVwz3Tb4I2Q==","shasum":"29362afeae1999c57f4ba88dc3ec387b049c2381","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.57.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0.tgz","fileCount":774,"unpackedSize":1541050,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7P2iB/4KLjAAm4gkHWBRkpO558c6PWOwOGX8MD0hSEwIgXLdjEDeZ+J+whQHfTYwHkp2YirImaLeO3ZOjFVeSv2E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.57.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0_1634811718033_0.5719702907905329"},"_hasShrinkwrap":false},"1.57.0":{"name":"@sberdevices/plasma-ui","version":"1.57.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b2c639e0dbc08ffc4b0e67b770e45b38c606eb67","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.57.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-bvG9q1M8jMOWjXaGSrYtKXHs8RubreOuPkAN65fIGdyZkLaa6D5/D3u820pIkVVJywf/hncqiyYm8Pp8Iyb66w==","shasum":"394ab726d96d9ce112f4cb036f344599aac3dbbd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.57.0.tgz","fileCount":786,"unpackedSize":1562168,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiUcrQmG8ZkrGG6AbMZbj/S668LSByuPXROhFhTq4EoAiEA94N8APWMRJqBP1rbFWfpmBmwu/oAOK4Hz5IiKsSdG+Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.57.0_1634812414889_0.7052289451632385"},"_hasShrinkwrap":false},"1.58.0-canary.874.b4182dba445649549c92171fb81edcfbfbe473d4.0":{"name":"@sberdevices/plasma-ui","version":"1.58.0-canary.874.b4182dba445649549c92171fb81edcfbfbe473d4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b4182dba445649549c92171fb81edcfbfbe473d4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.0-canary.874.b4182dba445649549c92171fb81edcfbfbe473d4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-uybjUooUtEksc/qlW4PJ5VMKERdhpq+rh2weEERhOF1Glghq1n8DWcuvL2ybsQwwIYLygvAFHjBEWfGdd9nCfg==","shasum":"cfe42beb3d26f83009f29c806d7b71e8775321a1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.0-canary.874.b4182dba445649549c92171fb81edcfbfbe473d4.0.tgz","fileCount":786,"unpackedSize":1567103,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvJCkQykOLhwanow5ywqmFDGVWVdFblkJbuj0TeJG1CAiAzgT12lWX4Nq2SEF1JGCLqsnt6HV9wUqyOzmsCYdgvoA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.0-canary.874.b4182dba445649549c92171fb81edcfbfbe473d4.0_1634814417439_0.12473361728853027"},"_hasShrinkwrap":false},"1.58.0":{"name":"@sberdevices/plasma-ui","version":"1.58.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6c19c4ecf654f76b4418787b179eacda0cc6da8e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-vPcAq8u+bRacb1QJ3PaozpkF98eXKT/8hIAGE7IQGJxYjkXH+cntG1697Bf26/5DvO89UPcs4beGA5Hp8Ua9xA==","shasum":"041779139fa79e01a01728861ba4a1a5b7bd3358","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.0.tgz","fileCount":786,"unpackedSize":1567338,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0AhaVekibGFchXLkMeyhAgVXkpgdNXM/BRVnXRhukmgIgL62167P/smm+47CLgo8Qhdkx63LRATDYxCI1K92Hf3o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.0_1634816570789_0.301030790380866"},"_hasShrinkwrap":false},"1.58.1-canary.887.4cd5dcfcbfc5c85bcf8f62d2821e8fa669856e4f.0":{"name":"@sberdevices/plasma-ui","version":"1.58.1-canary.887.4cd5dcfcbfc5c85bcf8f62d2821e8fa669856e4f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4cd5dcfcbfc5c85bcf8f62d2821e8fa669856e4f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.1-canary.887.4cd5dcfcbfc5c85bcf8f62d2821e8fa669856e4f.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-05FtLddiwcY6qPQh9CnpydsR+lH3R9C4enjqaSkRKy47I/CWTPqwsO1jrtQmDVEpx303cK4qG3x6DLT0uyP0DA==","shasum":"78ad66c7521059999b14aac784505baceebb3350","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.1-canary.887.4cd5dcfcbfc5c85bcf8f62d2821e8fa669856e4f.0.tgz","fileCount":786,"unpackedSize":1598657,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH0+yfjv9OOyFVzJ6ir4Mv1RI7twQNHyz7HgbHFjb5EUCIQCw2m0VMeltTGthreTy24MC8QTN73aDG8TbAiTAQwk2kw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.1-canary.887.4cd5dcfcbfc5c85bcf8f62d2821e8fa669856e4f.0_1634894120699_0.4453722736142294"},"_hasShrinkwrap":false},"1.58.1-canary.887.fed181fdbd784b54cca769b7056a8f224018592e.0":{"name":"@sberdevices/plasma-ui","version":"1.58.1-canary.887.fed181fdbd784b54cca769b7056a8f224018592e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fed181fdbd784b54cca769b7056a8f224018592e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.1-canary.887.fed181fdbd784b54cca769b7056a8f224018592e.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-8GU17KVMGO9Bk4NDOMYCmcx1vHllo9LXnpD+Fnfs5gSPau+xkbiEdf12R88usTfo71YIMt8QrvIcJdYoP6JA3w==","shasum":"665391933bdb779c1e2d53391d262b9916a3b6ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.1-canary.887.fed181fdbd784b54cca769b7056a8f224018592e.0.tgz","fileCount":786,"unpackedSize":1598657,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1C2wlrisLiFFTA6X3z4T38V91ELcybXMJAZUiL4iSKwIhAKWu6o99fGU9nvjHkCAsSJQTFR67IpvsrySyKEk4Y0KJ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.1-canary.887.fed181fdbd784b54cca769b7056a8f224018592e.0_1634895621932_0.13286177346609862"},"_hasShrinkwrap":false},"1.58.1-canary.887.688610dd55c1db6d7000acdf345bdbd9c4275a90.0":{"name":"@sberdevices/plasma-ui","version":"1.58.1-canary.887.688610dd55c1db6d7000acdf345bdbd9c4275a90.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"688610dd55c1db6d7000acdf345bdbd9c4275a90","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.1-canary.887.688610dd55c1db6d7000acdf345bdbd9c4275a90.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-TktihKNBiPwBt0ZWIXcy0zOFfDRPsuXBC+jgXho3mBD+Lcn1e73iqJR/EfcHzxmr/xfEJDdyYt6VGrf2EVIlsw==","shasum":"ec38ef2f201d5552bdc2f830336d3732a33f6b9f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.1-canary.887.688610dd55c1db6d7000acdf345bdbd9c4275a90.0.tgz","fileCount":786,"unpackedSize":1598657,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbrVYL2qRdI+fqBTalTWmxs4OUeHNVsmmjWpqnn5XobAiEA8nAMTw/NB9fHOI0NGmuSxmuCfeWzIbY9FefzFAZFJgI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.1-canary.887.688610dd55c1db6d7000acdf345bdbd9c4275a90.0_1634913466900_0.7534680526087663"},"_hasShrinkwrap":false},"1.58.1":{"name":"@sberdevices/plasma-ui","version":"1.58.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.1","@sberdevices/plasma-icons":"1.48.0","@sberdevices/plasma-sb-utils":"0.32.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"00d77dd0a72f72449b58c64cf559bc62eb934f65","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.1","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-laNzwrtPEZLoEfh+Eol4eNQJ4cmjbemvSzR3M1OBosrT0CrEzbvPt5h2KESc4wCJProQ4Per/DAssGAGYOf4FQ==","shasum":"15bca33c536045ab9bf3191a3bf314a71563f109","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.1.tgz","fileCount":786,"unpackedSize":1599084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX3+DilsQc/KNQe2mQb76zIyqjvog6UghqEVK8VbrgpgIgFIOhjQmj5i1+etAbYCyN3bV9d6RXQr2USCcqWZ8Z/1s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.1_1634915348512_0.008170341412349735"},"_hasShrinkwrap":false},"1.58.2-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0":{"name":"@sberdevices/plasma-ui","version":"1.58.2-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.3-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0","@sberdevices/plasma-icons":"1.48.1-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0","@sberdevices/plasma-sb-utils":"0.32.3-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"816d3bda31ea00c9549396b77e7c15b1fe023a0c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.2-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-aKTO7yK176WdMJG2bXIkTMhzh/jO41EbE+xGJo6p51IFFivwqhzhmaB+yV6tk3+SlTTXN0lG+Ix7R1019UPPyA==","shasum":"45faf5b323fc16e4c5ceb624b11eb9e904aa9c22","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.2-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0.tgz","fileCount":786,"unpackedSize":1599354,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBFZNBPuAoYZovm87O1ktYBMzwNNTEp8LIf7vJ11vNbAiEAv+vbGFgbV6ci/TgCba7U6gibACNobJ4vD380xD2Aaog="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.2-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0_1634923978510_0.1620589065808875"},"_hasShrinkwrap":false},"1.58.2":{"name":"@sberdevices/plasma-ui","version":"1.58.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.3","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.48.1","@sberdevices/plasma-sb-utils":"0.32.3","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0f1e255d0cda6bc087ec99e8f56d60663f8389cb","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.2","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Q/JMOAlTv2WiP8z4DHOQXSTQCZvPxBXmZjT5ZsWx/zeJTS0TN4IbU7M2hWLUlxAuFE82P3Aejr5Cm1jTQ2CFmQ==","shasum":"14b3ac44b76c833d6c1f087af8a3c93f340d9285","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.2.tgz","fileCount":786,"unpackedSize":1599084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2uIE4MBetemwwWGrCXHKGT22wiuHmKGDsL3KzXqg34AiA+WfJC35ywT6/cHiN5D+iqeoYY1itblzoxqcVmO8sS3Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.2_1634925576701_0.18202279088367357"},"_hasShrinkwrap":false},"1.58.3-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0":{"name":"@sberdevices/plasma-ui","version":"1.58.3-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.48.2-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0","@sberdevices/plasma-sb-utils":"0.32.4-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"026812b71ae37c7446da06f38331936023ed52b1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.3-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-agIcSuaOU94u7jYL4fOGRNPDSNtA5ucyMXZr8ogomksLTMwjTZMm3kwpqzSwaLVl+YdVtg4qPdf8LjMa3dpQrQ==","shasum":"9db377762765dc2cf55aa364a501595871e2d85b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.3-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjWFSF1g+9yCJdLRtI/j01IRPtmZOmtbuN2AQtmwvB2AiBxDA7/FtscWMpC7JUzg5+3r+Qvz2NI76sx2FP0DoLrig=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.3-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0_1635001699436_0.24926133223173208"},"_hasShrinkwrap":false},"1.58.3-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0":{"name":"@sberdevices/plasma-ui","version":"1.58.3-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.48.2-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0","@sberdevices/plasma-sb-utils":"0.32.4-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1be9604774e0b121d3f4153dee1f2f99b751cb22","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.3-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-ZQi6vSFXL7fe6oXz6dE/w2aytsMaGSgKeH3ft5cwaT1v/6dMBJS4Gm9EAKs4e8B9xRovWlBbCMweNk/aS/Efrw==","shasum":"88b7c714aab1782c7ba6362670dff4fee128fe4a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.3-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdjHLP9XHEDoY/QxesjwRvUE8nu3YaQ2lJ0b71klfidgIhAJ9LEg+9NQyD4/jg+rtcOwLI/nwa6wGWJ1/4E3S/giQR"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.3-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0_1635002070243_0.40337566160702254"},"_hasShrinkwrap":false},"1.58.3-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0":{"name":"@sberdevices/plasma-ui","version":"1.58.3-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.48.2-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0","@sberdevices/plasma-sb-utils":"0.32.4-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1b9a91aa5d924d06afcfa315faf7ee014404dd4c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.3-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-YIelLdf9ZdEHU5vnjEwvzJqTZ+0K5tSv89EqEQzjZL74g+dxPhZn2sGIxDQ0Khw3/abYJkCscv4TTWhbHzXYLg==","shasum":"318c56f16d36b0abbedb54cdb72a8cfe79d89d75","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.3-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0E+7GEQOWTrwrm5uOXX2fho+SsCFAIyiVX+w+xvQibAIhANmSkhKepnHWig353UxuvtgwJmLfkzyoaYa9qdhIqLp8"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.3-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0_1635080587270_0.25989593259637944"},"_hasShrinkwrap":false},"1.58.3":{"name":"@sberdevices/plasma-ui","version":"1.58.3","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.48.2","@sberdevices/plasma-sb-utils":"0.32.4","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"177a54e1eb996f8a9e781d6687221048793547b8","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.3","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-V2ztfFX6N8d/rYFg2ZINYdk037srO+VIfAbms6hNSERV8/cevi4BIhv5K0aQd/cThM9ZNd1qHqjFKLtqlpqLrQ==","shasum":"9bff42c1c25887ee9dc77ce88c27faeb7b7aa20a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.3.tgz","fileCount":786,"unpackedSize":1599084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQ+2JDnCTvHa5QJwubmHAViNyKn/5fMJC15vcUlCd5iAiAoK7fuQ97hoBJyXQoFcKpfYBqL1D57DW+4nPQJYHzK1Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.3_1635085932286_0.6523911590076623"},"_hasShrinkwrap":false},"1.59.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-u9mUCUq5KRLgImh2KlYrgw1/2zB9kz773MesZ+cIMBjCjbDPVgq0741X0/cvaECNIdTBZAHYBtCEn2U6muvE2A==","shasum":"cc50a44a6d911cdd9bf1eb8026663493a362513f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0.tgz","fileCount":786,"unpackedSize":1599355,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcvGgrgEQyZnf1uo/Ea32og5DmUtxmvv5dgpiKao+xVQIhAN64qOckVwv9MgiVaCj0mdxEc8uW/zfsGiliWhDM81hK"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0_1635242278082_0.8193043678875163"},"_hasShrinkwrap":false},"1.59.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"66de901f5975aa194df84903dff25dfac67cced1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-OxFKTyHt7moTL/8ECYzwoyYgxsVE2bxzX5sPJARvzUH49k+YbsEh2Q//SEz+irgxuL0bUxCJmVOZRnDGURL3mg==","shasum":"e19ef52618f5b33dbecd07543568a91f50abae5e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwssBu1We/F9qiBskMzyozGHlrrZIRHYzaH4iU9nfwvAIhAIN4EK9Jb2oP4i7GftJgEQ6qAYJulrItBRGnLMWv+McT"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0_1635264083331_0.6938042763740844"},"_hasShrinkwrap":false},"1.58.4-canary.897.e63301a2657616f03d25f82818e4e9b075ea513a.0":{"name":"@sberdevices/plasma-ui","version":"1.58.4-canary.897.e63301a2657616f03d25f82818e4e9b075ea513a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.48.2","@sberdevices/plasma-sb-utils":"0.32.4","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e63301a2657616f03d25f82818e4e9b075ea513a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.58.4-canary.897.e63301a2657616f03d25f82818e4e9b075ea513a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-rzLxqDPOFk2wn8Y6y44c5d1Bq9teMH3xsYAkI8XZ5uIzChjVXnmEiWUNHcd6Ye+KfzZifGtIuevB9IjhGx2n0w==","shasum":"9eafbee0eccc0dfb1b39780ea6f200370d0138cc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.58.4-canary.897.e63301a2657616f03d25f82818e4e9b075ea513a.0.tgz","fileCount":786,"unpackedSize":1608955,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWwuRb4aRrwRstVl0mJP0fWiosN1MKDmN6RNYku78VhAiEAqExmL4IX+klJtIO6OHvAgGYFzRgUukIkm8FrNPWtxk8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.58.4-canary.897.e63301a2657616f03d25f82818e4e9b075ea513a.0_1635320182283_0.7342455488877768"},"_hasShrinkwrap":false},"1.59.0-canary.896.4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0-canary.896.4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0-canary.896.4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85.0","@sberdevices/plasma-sb-utils":"0.32.4","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0-canary.896.4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-nN/RjclYbITHuhsLq27x1h1AAwTsodv09A1vmp088UPD3eaRgY6LW5nTcRoU5GO7TaGVEpzk0Ffta/3gwHkFig==","shasum":"973217eb5f2c5630ae2faca0fd35f4e98f29f6c8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0-canary.896.4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85.0.tgz","fileCount":786,"unpackedSize":1599192,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3uEOhPee+lkjycTO3tk5LVPRfzfMEWVZ66WsKj3nNkgIgNEPa94bYL+5SSUUqHsHOiGxoaTBSCNQPrn5RirbwH6c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0-canary.896.4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85.0_1635321549948_0.3775549594308758"},"_hasShrinkwrap":false},"1.59.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"10e3a1ef4439f4b96326caced8f428707e3cd73d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-2ARhywS3vzX3SI6Yf3KkKOTB+mudJZ91lHXN4CeEiJrdkJ15LEjjhXZrg7qb1IQrGpKl8KZwbXkcDhOIUKiqAw==","shasum":"3b87dfa41ccc919e562b13b83e3d46b4b7a6dde9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6GgJllkLu62uNssNWsWblASXnkGUNUAWBS982iaOqbAiEA+D0AsvgrWgAszdCQ9uYlrpcds95JBRKHzNy7EU23LdQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0_1635339510866_0.16885815737359522"},"_hasShrinkwrap":false},"1.59.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-LvP+lhp4baBcCAKnr33PykhURllnK/RGQH00cB0QM3uC2P2beTcn2qbqiDtoJosSbizsD4OkAT8MxnPqzitotg==","shasum":"768858810f060c6d4e6a5f1751a9a239421baa88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSAA7QIeYdskAkhp+bk63GcImbeEaPEqv1CGThZSsVdAiB0b9yFWgazSD43eOU3qWdf0Yr6JhBINzabgajy5pumzg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0_1635339833028_0.3030775339696694"},"_hasShrinkwrap":false},"1.59.0-canary.896.4444cbfc504885c2cb666430ffd092a7bc0db5a9.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0-canary.896.4444cbfc504885c2cb666430ffd092a7bc0db5a9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0-canary.896.4444cbfc504885c2cb666430ffd092a7bc0db5a9.0","@sberdevices/plasma-sb-utils":"0.32.4","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4444cbfc504885c2cb666430ffd092a7bc0db5a9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0-canary.896.4444cbfc504885c2cb666430ffd092a7bc0db5a9.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-kC5DS/8mO3OuVEMGrHdeUCsKRfBmw1EzQAXaoxpGs5/ikrqpDZhled7bfkBwSf0RZBE4Fpv0w+KR8yNa5Ibp7g==","shasum":"66a73b45188da703bedde80968b9c9a0bb7fab36","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0-canary.896.4444cbfc504885c2cb666430ffd092a7bc0db5a9.0.tgz","fileCount":786,"unpackedSize":1599192,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwM8IlGHUo4T/Rc/AKH9WXEEg2rfY5hDtv0gbytdgTtAiArDKwh6m3I+xi45XFIDkQk6Vw/27rjcQacuAzyG/ZD1g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0-canary.896.4444cbfc504885c2cb666430ffd092a7bc0db5a9.0_1635407810858_0.4585482611913223"},"_hasShrinkwrap":false},"1.59.0-canary.896.b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0-canary.896.b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0-canary.896.b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd.0","@sberdevices/plasma-sb-utils":"0.32.4","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0-canary.896.b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-tV1JSqCRkrwdr+uQaOeA/QxiXqnPpFHNIuXVY0He9rzyvquEdLz37wPTVJrFWrrp0tb7wfypsZN0pBNV0EqpbQ==","shasum":"d114fdc763381e73d73b0acc97e762c53605152c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0-canary.896.b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd.0.tgz","fileCount":786,"unpackedSize":1599192,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCZhQZmvXyt7pdPSI4N4skItIQ6OiA1Gpc6TeogavccAIgRTuHKT7sbyOV+yyQZ52ATpgbv6wgDEJu6TcxOWHMc80="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0-canary.896.b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd.0_1635410583950_0.7714817881273652"},"_hasShrinkwrap":false},"1.59.0":{"name":"@sberdevices/plasma-ui","version":"1.59.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0","@sberdevices/plasma-sb-utils":"0.32.4","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b07a8a8f687dfa8357f21a2e9b5fb4b8325a5995","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Ab5ovOUeAqz/hU0Us6A8urk3bq7PBjZNyeMGAZdfTqBylD1gV+NwcHb9wpS7wR9Ce/02P2/3naEUKPF6g42rqg==","shasum":"c57b53ab0bff063341a31b6e9b548bb09440d220","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.0.tgz","fileCount":786,"unpackedSize":1599084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAlfhmhGinxMcqAOYBgV9VvgOiE0bmKJhjsfAMAVChbAiAgD9lFGcLnej/a0W6nSNqlqQj8/ZAlYYApKai3nUxJyg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.0_1635424121796_0.9818050151891904"},"_hasShrinkwrap":false},"1.59.1-canary.897.db7b74c67885d0e99fb96302ec947be508d7f04c.0":{"name":"@sberdevices/plasma-ui","version":"1.59.1-canary.897.db7b74c67885d0e99fb96302ec947be508d7f04c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.33.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.49.0","@sberdevices/plasma-sb-utils":"0.32.4","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"db7b74c67885d0e99fb96302ec947be508d7f04c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.59.1-canary.897.db7b74c67885d0e99fb96302ec947be508d7f04c.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Y7gesgn3WMDScFzaWsAkIU44qq9ogw9ErVX9gi4B3PDQGAQxPiDVJspO3N2cb1ZhhxeW/KIoHK6vwiYCUZZk3Q==","shasum":"d3cd85241e4d82248cd41aadaba4875e20999ce7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.59.1-canary.897.db7b74c67885d0e99fb96302ec947be508d7f04c.0.tgz","fileCount":786,"unpackedSize":1608601,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTUexpF3TByRX+zX1nhgPrfIdo1NA/rxvVP2QCRZ9qaQIhALxwcDuOZg2NmChZNQ/Pe+DKOHArWW8wzBgEr4wG2M4w"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.59.1-canary.897.db7b74c67885d0e99fb96302ec947be508d7f04c.0_1635487168730_0.7059624149895487"},"_hasShrinkwrap":false},"1.60.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0":{"name":"@sberdevices/plasma-ui","version":"1.60.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4555175647d32931587d5f14e6b03f59aa23e6ca","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-QYKpxDspgRNghrII0k9dg34FVQDpngQKm7RyYunwX6c0pqLehvxJ/j70bGRfISa0vHoc5LAGT16U6ZIwaiiIEg==","shasum":"f99385167e59d44280486d1fcff0457bfcc40224","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcFT3BhW6j2KOk4bq2uEoLpvq566guOSjFJ7jlc8TVMQIgWRwRb7sONn9D/FJ9a+J45RxKdGq1Q4mNO5ONipFSw9s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0_1635496992835_0.6979381269775764"},"_hasShrinkwrap":false},"1.60.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0":{"name":"@sberdevices/plasma-ui","version":"1.60.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0","@sberdevices/plasma-sb-utils":"0.33.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9cde548d8012e232295c09be1141a3bd842db726","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-t+Yb2uRNHTHPZGguLTw3MCSZD6DWocwEMpsaM8WS3kcQaBqiJJPZyIg7OLu1f+88ePQqVagiVdjeVgr2hA0lmw==","shasum":"eb95e3b5fb40156c69c317bed74a3afd4dc0bada","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBo9lFisoLYZjwP3Fj3hJWzgzcTS76iKEE/aQx4AS8raAiEAqRmSxF70EMiIKLyJdmpbxm7GmnQn2BdP7YSZ+w+qj/4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0_1635501538143_0.27503103622058367"},"_hasShrinkwrap":false},"1.60.0":{"name":"@sberdevices/plasma-ui","version":"1.60.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.0","@sberdevices/plasma-sb-utils":"0.33.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"23c23cb6fe897b1ff7a3457a024d533f9003cf61","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-1BB/ojsLs3odkTfc9+IbGcYKWaLBwXyYq6VVaAFGJC6MXotyz7DHT2aMBWAWy1D6OuMawZdMk/I5lxEtWyUSBQ==","shasum":"5d57deb01304cbda63b9506759e49951b41dce60","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.0.tgz","fileCount":786,"unpackedSize":1599084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZZdA5LC63QoLv8bcnxeUub/jcyl97U/ScPD9IEQA5CAiEA0YCHCEofFdN5carUkQAJLWXaldZSIc7+n6GpO9ZUA1M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.0_1635502919949_0.34020381096169605"},"_hasShrinkwrap":false},"1.61.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9c87ab1003e80796233d769d876af73f1b04e007","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-5tDb3u9VK/RWcZ0EtM1xU0xYUnsnvGlKKDwy8SQXItp+0BRQr7PLVeTkMS1/rPEbOw5CKMxhf2k5VRbwKjYfSw==","shasum":"7af208e734ab9fdceb33f5ff1084e0f87856eb5d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnH74W8LFSV7f+zUbFXZs0vVsBsbAU1qXCW6YJv+gN4gIgTiGgeml6pHBULTHeETgWlm8L/HezJCJtj66UFApw3XU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0_1635677940677_0.45176291396467705"},"_hasShrinkwrap":false},"1.61.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f4dedd08fe5c258be1248b103dcdb9a9c9f1267","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-9oeNDmKTvv/VEYjHlmeXNGThFIt3mfaZkAUx8kLz/NA8SUZIy+mn0xAB+8BMWjRNwBnfNY2lcfX6wFz8n2qlpg==","shasum":"7b7aba14f9d3564b2a22e63b1e68a7b0542780b6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0.tgz","fileCount":786,"unpackedSize":1599300,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/5uaPQPPS+uw4O8b2Rya+GJfA4H8owYdqT8P8Um3XKAiAHgMRCD8ySwJHi9zyfV3e/uilcQaDBgSUolBtv8yDg0Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0_1635680792014_0.6586422585827585"},"_hasShrinkwrap":false},"1.61.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cb89e3bcd9fda1d82fb3d639098c885fa7ff7053","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-nyTy4N8NlfDPKpaq0jUpraej65I7I0bkgfhDYKXkXhQiyLjo0FjtOvwN96/yK9C8Ak828gv9q4EVZzrpQe/qqA==","shasum":"e11e7e9f778eeed6ae56275a69b52510e7c1575d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0.tgz","fileCount":786,"unpackedSize":1599499,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIwuhd2MeW426LAAANbGRGvzQKSKFCjoW/ceZfrafLIAiBdYr4iJdHtk+v++kVN0MTUh2OhUVH6Tr5Y9ZIYRPTzWg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0_1635681925106_0.8370440401260195"},"_hasShrinkwrap":false},"1.60.1-canary.897.03b749d28895afb3767d6c4f647eda81b3cfa9d2.0":{"name":"@sberdevices/plasma-ui","version":"1.60.1-canary.897.03b749d28895afb3767d6c4f647eda81b3cfa9d2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.0","@sberdevices/plasma-sb-utils":"0.33.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"03b749d28895afb3767d6c4f647eda81b3cfa9d2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.1-canary.897.03b749d28895afb3767d6c4f647eda81b3cfa9d2.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Stc328ISNxujR5YSRrGvsAE+uWoqiZ72taR/b24LUCauykXwwlmuToa6n/a33XCFni2h+/PmpM/agVx/gxPmNA==","shasum":"39a7216a4a1eab88d96de4513f1a9e436538feed","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.1-canary.897.03b749d28895afb3767d6c4f647eda81b3cfa9d2.0.tgz","fileCount":786,"unpackedSize":1608601,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkQl/23H96EZNsKUUKRj29oIsoplKxwV+87auKeuX+NAIgXPY+8/xdDEW4oGfJcp5jFMM2+VhsLKTESSzJ+qHpUno="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.1-canary.897.03b749d28895afb3767d6c4f647eda81b3cfa9d2.0_1635739062655_0.29562333841066635"},"_hasShrinkwrap":false},"1.60.1-canary.897.59e60c3025611aeff0ceaafbf7e74146c35da537.0":{"name":"@sberdevices/plasma-ui","version":"1.60.1-canary.897.59e60c3025611aeff0ceaafbf7e74146c35da537.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.0","@sberdevices/plasma-sb-utils":"0.33.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"59e60c3025611aeff0ceaafbf7e74146c35da537","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.1-canary.897.59e60c3025611aeff0ceaafbf7e74146c35da537.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-DgPeElTQ/9h4NMcXX9DXmYSG8D6jAztpz0VUJhCYdhjwl4fK08MMNz8qhOkYuzkPqLfxXqxgWYTxN4ofA3kPAQ==","shasum":"a51ac650832ca2c32a580adecc4135f18ffa5cfd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.1-canary.897.59e60c3025611aeff0ceaafbf7e74146c35da537.0.tgz","fileCount":786,"unpackedSize":1608601,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICn9z4EU3disI7+2mn9qn8vityYx889j4DDlQKloko+7AiEAndMRn9dylw3FseYZZV0T3qONX43YmcnZ9b1YKdLRDXw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.1-canary.897.59e60c3025611aeff0ceaafbf7e74146c35da537.0_1635742743806_0.9046182177941771"},"_hasShrinkwrap":false},"1.60.1":{"name":"@sberdevices/plasma-ui","version":"1.60.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.0","@sberdevices/plasma-sb-utils":"0.33.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"703f7a7c2bbe17c9fbe45376e7193f0479d4502d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.1","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-JPIwEVj6ciJQ/UFw8VT8X21zGUFKk31/S50S7RJ+aFRg0OnrckuBjlXZed/q2UceG39OTbzo5/5LIuE/m4qCGg==","shasum":"5b3e49b0a61a343f048158b7237a21d69dd62061","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.1.tgz","fileCount":786,"unpackedSize":1608870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgjUxFDDhgDDwsbaLNHCJNBfT86DSHgYMdMg1oTg0GdAIgLCsk4ezt+2hrx/3NevBAc9787AJHkJ5ilgaCHSGncTg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.1_1635751594737_0.8716675589880065"},"_hasShrinkwrap":false},"1.61.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0cc9d7c0ee182d7fd979153a545cbd1b18751114","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-d/1B/wfkaw9QjuV5vi4X8JBsN5pyKwtOee+z53HkUwQ9XV94DWC5PAJKD2Ig138tVbUmyVKzcQz+GNRFdwzZsg==","shasum":"0c2c15cd44bd219332349728630aef73d5cbb3a5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0.tgz","fileCount":786,"unpackedSize":1609285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRE4AWCrHf3XMjRgKUKk29u2ARPpWbAwcWBNCTm58CogIhAIc3+2lC8rYMDYJZPYvdpif1Qq+dW942K15GhvFrzlIZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0_1635757628146_0.6219671367920967"},"_hasShrinkwrap":false},"1.61.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"228ef1c4c8476532e5a7886abd36a20a746dfc2e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-ZebAC+opTeFilPMnSdcIb+dBccjqwADaOUdmHjlVALzIsUMtjhV2rQdWY2FdGRSnITSev+GWIgXubM4WSaGkFw==","shasum":"41bb809e88bd4bdc5f5412b583435c846be95267","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0.tgz","fileCount":798,"unpackedSize":1619214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVQmS3wrdnVecmGzrJvDZbcEB05N8AdtFJZROiix9U5wIhAJnQ6IYs6aOPcWa5zHYdu3qcjcKG6Y2lKmVpQWcY2QNw"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0_1635769672081_0.39870705658550865"},"_hasShrinkwrap":false},"1.60.2-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0":{"name":"@sberdevices/plasma-ui","version":"1.60.2-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.1-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.1-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0","@sberdevices/plasma-sb-utils":"0.33.1-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.2-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-CNWqVSFJzdYHhpm0B/pIDkDI89nftD+iwdIYO4+OhGoNe36JHs4W8f3fC+u9l9PCm+ERrtzFQ7pzcGoQjIWM6g==","shasum":"9b0e9e8e6e911be274018de282eb31eb42b3af51","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.2-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0.tgz","fileCount":786,"unpackedSize":1609285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE9cSCXy0UzIYcNfpsuErBxFu3MyiUPIZ4bEskXshFyEAiEAqWJ0YQpvNIoiFTBqaO0DKjAZ8f/cqjkedOUAbDUn7VM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.2-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0_1635850263780_0.7532884571923026"},"_hasShrinkwrap":false},"1.60.2-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0":{"name":"@sberdevices/plasma-ui","version":"1.60.2-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.1-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.1-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0","@sberdevices/plasma-sb-utils":"0.33.1-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"48e35273ac91bfab0ea1ae1126d3603cfaeda17a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.2-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Rm0mKqNOlckfP99ea9xZethJOAuVecroWJRCofvWuQaIRLMSoFIPIHsy/Sp0dO+3GRqy6Vm2IWZNcDkDiy8COw==","shasum":"6e83f2c8134f383dc0c4d6992283bb6c9e6313b2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.2-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0.tgz","fileCount":786,"unpackedSize":1609086,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6pFiFTbSFS6zUreSDkAIZNv33TZu6gp5/T39Xq1KuTQIgUj9+edj1kLPzXWyhHq/tSAoc5sPwkYsAccV7nUCOPjU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.2-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0_1635850383557_0.39356881974741986"},"_hasShrinkwrap":false},"1.61.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"136994ef200bcbb70b13584d77ed37abc93824e9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-HavdTwuxtAMP408/sE/wA+npjJdirH8T6iuYDjDx2QSqMRlB3qoAOBP5/5lX2huH6q5/9bUAV/i00Y1MN+XaNQ==","shasum":"9f4480853806796cd900b104cf5cf86c886482a2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0.tgz","fileCount":780,"unpackedSize":1581110,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAt0FBQd1DRRMItA7bZTPTdQp96XSzdQ6yuVUL9pBk86AiEAhKoV/sB2dAKhqqQNGwxh1tCvTeGTmkKvZ6fTjTHlWXs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0_1635850654236_0.07463086423061793"},"_hasShrinkwrap":false},"1.61.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b6e5980a2da52251807f6fd191d953af84ab18da","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-LCrtrrFzHjASVz7m0b2ye52N87dkqUjD/j9fD8SINQvB4CLRM6c1fJdepQkINTQfzF4IEnv4p3bZ8gFgZk9S+w==","shasum":"5dbf3934757dc56389383f3ad2c3600fdf81ad62","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0.tgz","fileCount":798,"unpackedSize":1619214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC30L7PqueFHfAkwtzmaqP6R4c68C4VfIWANUh2ADVFgIgbxSn4Qk6hCQKzbjZoUOGhKn36hK/0tigdeSTNH+AvhU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0_1635864535102_0.7736277342310902"},"_hasShrinkwrap":false},"1.61.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2f1fa0b84fb20b422b154a2c09080ee093c07556","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Y4PyJptrf/iyJNoinChPwxD1HypgMcE+jhIexFubAA509PSbBDbb+d4YSMbqrfBDWar0iUJ0UeTr7fOa0y+rzg==","shasum":"db20367e2a1a5c81b75142f7c7b6e03c68259e5d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0.tgz","fileCount":780,"unpackedSize":1603602,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7aoHmIOT0d71mfpR9Nl9mcPIrSF8nAivLARJqJAuDAgIgPbOASI1WFRJcLt7gSEkvEFk3F8muHKYOCJ5mTs6Grx0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0_1635870017869_0.9065837969587676"},"_hasShrinkwrap":false},"1.61.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"993a8f2c5e6a22c3c6f1d927972e21d3100a21d7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-yTw955tAxAkCV5n8zRmLG9Y+Ec5dDVY2M3efH1cYfDd900Y0MgiYaixvF1Tv4M+KpH+KrUPImOehahISyQsPlg==","shasum":"03049f7c81f3abe0ba53eceda2c0d88e23bace88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0.tgz","fileCount":786,"unpackedSize":1609141,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYf7kneGclGYWnRSsjp5s+SBwrhOchV1MCm5DC9tSrxQIhAO1EiGuAa/x5SZT2tEuzD7s7i8IfSJb+DIULB8gpbOYA"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0_1635926548169_0.49684830917593303"},"_hasShrinkwrap":false},"1.61.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bb5444e9425a60b0d7961151d1b5e2e297bc4081","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-UNtnp6H5EhE7pZWEQMzGHFQriwQpiUZQJvRUuca7HdMbfYG9WibsAv8u9OnMLM1/X/S2VKyVUx7R5loDKROl0A==","shasum":"a127a73a11f0a3def06b15087284891dd1abdfd0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0.tgz","fileCount":786,"unpackedSize":1609141,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg+wbgCaQUvNQyissOZBd5o1J3sZdvCayWNoWqWazX9wIhAJcJ/qz4bdoJ6Liunxh2MGa5xvQC2MKzIbxegD8eNc0m"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0_1635929079969_0.329917942693869"},"_hasShrinkwrap":false},"1.61.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"515ff653f0311e0bf4dd0801b32ee50bf7088ef8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-N70OlNiW2/iaO4Lj9aFR6I20nw6U3QG8xhXo3RdByqPTD4ccOKehSRzddlcHgvIBqci1vVVfIn9e8pl69pkVXA==","shasum":"f2b3afb042b72d272bff81a1c81759ee5d8a0832","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0.tgz","fileCount":792,"unpackedSize":1609339,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFD7bpRamBMFAj+oxVhm23xfzIHKEfZaGk9GzKism4tNAiEA3/UIW3UoGXaua2okFk3DAKPzn5cCIAlQtnJn1Ge8eKs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0_1635932552721_0.700459198640053"},"_hasShrinkwrap":false},"1.61.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2b7d9bf5ed4065da91c443af7bbbd47dc249f29a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-KsKUL5w/2YoWrnrth6rgFek+epi6RjEXbxQRVOpnTYOjqUUA2CGhFWy7gHy8wzfz4a2lmgbcpwoTrLSwpme13Q==","shasum":"bc9ee77c9830240599d94eedd6fffe70bfa434bb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0.tgz","fileCount":798,"unpackedSize":1649499,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEnYxpqCsD5JrIGSKnPTfn/nvQDsXbJoptvo4+z6iKILAiAvHyW0iS+kMVCgOjHAYgPMhv53AuuO/c8UWAiAXqKJDg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0_1635943249681_0.26766379370141924"},"_hasShrinkwrap":false},"1.61.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"51543faae081a06ac3a60740f8df6c6de5edfd31","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-03UlPPDFfMhVrRUQb4DkjdaI2lPJ146DfWpn7vP+PMXLKfaimcNkgoyDObkot68zryiLrX3kxp3G/rJJZkuOKA==","shasum":"b45ec3df3097559cb9e46eea2cf6d7ade7370cb0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0.tgz","fileCount":786,"unpackedSize":1639371,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBTZT+S8u9318o7oXZSsReev5mQK8QKNi/1uwvexJ6mAiBaWVMfDKtIKsZC66h9qODRTTzJIb003EdypcHIb+C8qA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0_1635943422783_0.9133653998521964"},"_hasShrinkwrap":false},"1.61.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b936c83abbb7883bfa22c2f521eabca6a9b2b314","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-+o7YIGGF/w/OajPRoI3NYglgB8gLkct2KKP4L7Ru1gm5MRSLNej12BTLaypN9mz/NI0jGJA4RrVmboSzwppAtg==","shasum":"c2edfeb33c789fc11d0d6201ae8ba46a22f9d2d6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0.tgz","fileCount":792,"unpackedSize":1639569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC77mSssU5zo+NN/WBvmTrEB+DUCKvXR4xyZps6c+uwQgIgYsZnOtVbc83vwSHzVkplG/PDx1RktiEk1MKXt5dgm10="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0_1635943486571_0.9051978672914416"},"_hasShrinkwrap":false},"1.61.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ffae7476296feda9266fd376c0ab3687c649138d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-dBjTPiOA+d/acifUEqVIeBF7p12659G21YyCqCK5p+aarCxVaIe+e8ankE0AUfckyTmbzhYRXcJth1s9LzO+Sw==","shasum":"f22652fe96bd8deeb546f6d0c4dc1b85fc39cfe2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0.tgz","fileCount":786,"unpackedSize":1644408,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrW4plMLQXjYQ0ha7Hoz/3j1YxCUPcqqFaljWEdQJzrAiBMjjfF9wXJKovJPQNK2rdweg4H414Rn7w+3QhSSN5uuw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0_1636367991230_0.022258165386800588"},"_hasShrinkwrap":false},"1.61.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"23be31fe6d638f3a96ced8750b8c5116b80c60dc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-mLVImmCZ/xTV+DWXVxg9UOTwVBi11HAD5VglinDDwsm6ZVWnnA4RzHpQLYBnLFiJZlyzZq+wjvvimsjtKDoOuA==","shasum":"5b348f7946e2f6b4e8372e6caf63caa8f7cfbb79","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0.tgz","fileCount":786,"unpackedSize":1643252,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEm61xWkm3xqP0/ZK1Z66/5ifrFYun/B/fL/sADAemGiAiANwKBuzbvVKMUMin2KjASO9oDpWd842Li5SD0DaBdoSA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0_1636368193978_0.9998663631647151"},"_hasShrinkwrap":false},"1.61.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"02bde25c04467e41f19100a9d9f4fc2ce278c98a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-arr+NL4ygIMj4cw6ioY9IuUUs3VNJv5/fYOHsTNNLD3wVOjk7OkaBjb4a3lH88N1TJ1Xbkutf4TEnZomashO2w==","shasum":"00cc3e19823ebcb3b3290eb52fc6a54711c7269d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0.tgz","fileCount":794,"unpackedSize":1647653,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD97/Sfgia+JJRhUpFkLTY/89POHtK5TQYGDZzd3CrhHQIgHyDmcEvPnkBw17fMMTsD6qolBR3pNQ2g+Ib7pbzmDsw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0_1636382106372_0.07065012897079392"},"_hasShrinkwrap":false},"1.61.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"918b1ea2bd541e6016606c347bda6ef6c930af9d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-iNsTl5AwVThvi2fP2hwNEUY+CBbddDt4fjHprb6InEBc7jXGMKcmPBckYao+6pQQLbZQvZwgHgRXTQZMGwtcgA==","shasum":"9280af21a17ac3eb4c89e66e3666c48b19785369","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0.tgz","fileCount":794,"unpackedSize":1647653,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUx+BaT2Nv7z7r5ZVjpn3yRysr6fMI4+ErzjXa+HNNpwIhAMSWdRRUmF5A/WQf59d1RK9EYrhXaVNtGBm0UntkQVEy"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0_1636444505660_0.24987979781803515"},"_hasShrinkwrap":false},"1.60.2-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0":{"name":"@sberdevices/plasma-ui","version":"1.60.2-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.1-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.1-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0","@sberdevices/plasma-sb-utils":"0.33.1-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b3a0085e82412e31568365f7d3ee82d1e12f08f1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.2-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-aU7BPklU77uIoajhU4CsoW86tB0teRG2dkTr7Nu77SGlfXN+zuf7yBE3j61JDCh5BU7dSW8wJGfPL9I1NieJyg==","shasum":"ffc1d37ec7f0449b075ed76b75ed964594483ad2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.2-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0.tgz","fileCount":798,"unpackedSize":1653174,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwH2v9mF/3pgxiMH59HQZOWTwxyibzX0639dIw8LS9SQIhAIhHM0x7IkIws/dX5Y/zWrq+j1mZObTSbCK9zuGz57+k"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.2-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0_1636456696702_0.7432071699743636"},"_hasShrinkwrap":false},"1.60.2-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0":{"name":"@sberdevices/plasma-ui","version":"1.60.2-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.34.1-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.50.1-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0","@sberdevices/plasma-sb-utils":"0.33.1-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"26c387e307fa4da356477800b52d72a5259ad34e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.60.2-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-CYqDDaYf5fvuKjghkewfpz6ijaos/LqKuxfVAjQqZQLnVyRUbB49zB9vd4g6ORdeKnjgp8iE5S8RrBXNOB7Ivw==","shasum":"e4b35735513fdd54cbd7ddc23f8f764a787db311","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.60.2-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0.tgz","fileCount":794,"unpackedSize":1647653,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyPDrKz1XySxw3KjqbY7KymZ5iKMa2TStz0ozLbdAikAiAaNwySIRO/Pu2wv6zirjOzczehkURU3K9n4yVUMTna7Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.60.2-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0_1636456808744_0.7544614810960184"},"_hasShrinkwrap":false},"1.61.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0","@sberdevices/plasma-sb-utils":"0.34.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6b5ece181c5e36c9225115d1033cf8bf335e9a89","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-R3AtHk5eaV2O2tLL8fLRwEMf/JFqihlDIRPYP1jR6Frn1YfLf0UU+SAhxq/LdZrUltDckPjmwJZcHtoeuLxQww==","shasum":"3020230a88f220c4bb93292e4e047e71f81bf39e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0.tgz","fileCount":794,"unpackedSize":1647653,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmjxD8FeiNqnnfncuYlRPO2UwCqDOX4R+69S2u8vOrVQIhAPGlM5tGygxyMQix1xh6atpkkMyndX1/vOpRQjYYBcxw"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0_1636460034632_0.05582243325180314"},"_hasShrinkwrap":false},"1.61.0":{"name":"@sberdevices/plasma-ui","version":"1.61.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.0","@sberdevices/plasma-sb-utils":"0.34.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dc6a8e76ec07d0b6b6c2d28195ac944a32eb4d1e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-tWELeEdLkWRGGwZrN+33VSJtcugPNTMvnJmFxn2f0FRfPDoc7lpmdkmW9Qx/ARI+D3dBPQwtT86vUGdkh3Ghqw==","shasum":"44407112c2c85ac9660a0aea6668a2548f5f6c86","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.0.tgz","fileCount":794,"unpackedSize":1648019,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3yZi0nJPBx9kUlJ3SHl9ht8s7ES8a8IJK+BPZmjj4iAiEAlGR4rrChS8+diebhGXT5aX0EB3I9tPnX489kdKvQofs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.0_1636461214478_0.41899436689444314"},"_hasShrinkwrap":false},"1.61.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0":{"name":"@sberdevices/plasma-ui","version":"1.61.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0","@sberdevices/plasma-sb-utils":"0.34.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d9ff10201c0ccd19285070f8176b1e37f83651c2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-JR0R8ubmK3DWo0bGtJ1REXDosaG91ZCDqTcIFOqgXXnKMQFDsKcvognmWW1XRWBqPPrTaMeJXlJsKtT9+nfshA==","shasum":"f50f0f0f92a6171e976434926433711abbf8b96d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0.tgz","fileCount":798,"unpackedSize":1653756,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6pu1WnEPuG8zWa7Q7bxLyqGqaLR8Z0FkGrcH9v1tfKQIhAIazH56Y9jLgwc0RkotfFGV1hlVMHlJhfyccc+ehUb5f"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0_1636463010331_0.8058769847472986"},"_hasShrinkwrap":false},"1.61.1":{"name":"@sberdevices/plasma-ui","version":"1.61.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fe3588091308de01b28aacb278b4c72f1284bf2e","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.1","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Dirpnuv9qgV1oezzE+bScZTKyb73NcldWm/N9OUjQOCT8owa+ywDrMGqM5EWDjRcjV0vIiCywIR36eWdJNRP0g==","shasum":"316c0bbccae046251f87ecdff93063ce6f91f1ed","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.1.tgz","fileCount":798,"unpackedSize":1653970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJwiz5Za8oEjJKF6Aa/eqI7Lvj3BZHVrePhEFCRV2FRAiA10PbVnUFYlHp7/UJFtkavwYpcGGxCXjV6As987TavPA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.1_1636466453353_0.8991172826807936"},"_hasShrinkwrap":false},"1.61.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0":{"name":"@sberdevices/plasma-ui","version":"1.61.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0","@sberdevices/plasma-sb-utils":"0.34.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a7bd37e96cad51b083d2d9f2a978c375a69d92f1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.61.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-w7HV2VAi66YU69V2KR6kdQqdoHa5zDS0JfKVw7M+YweP8KjOKwPUmaUAsbOAi7lO6Ra+FSnn5oNqO+AKdUWvow==","shasum":"64bdc3c224c0d1312586a08b80725077787d0d95","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.61.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0.tgz","fileCount":798,"unpackedSize":1654186,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvr5DNeXBnPlBXGWNsD++EEUSCk448U4Xx00PWkMebNAiBvHOaIGVBGmggQjUcTew+xmiJChn4eTTxt9mIIWCdnRA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.61.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0_1636536203732_0.3641678855158992"},"_hasShrinkwrap":false},"1.62.0-canary.916.2135eb39270b37488dc6dfe3a0db61d58a549dcc.0":{"name":"@sberdevices/plasma-ui","version":"1.62.0-canary.916.2135eb39270b37488dc6dfe3a0db61d58a549dcc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2135eb39270b37488dc6dfe3a0db61d58a549dcc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.62.0-canary.916.2135eb39270b37488dc6dfe3a0db61d58a549dcc.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-5iHQdEu1T3RNy7MKzHIZg//In6VIpa0J5aOjqc+Tu/+L2cqUAr4Pg+y1YDruEKfqACEqCwN5KeBGE4HQS/ZeEQ==","shasum":"fbb4518344438ef67464004f010a6032abe912b2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.62.0-canary.916.2135eb39270b37488dc6dfe3a0db61d58a549dcc.0.tgz","fileCount":798,"unpackedSize":1657905,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrz4JWbI8u8WxcztNqwk8T4W2DU9M+a2Z2c3e7bTt+tAiAzepHQ8lt4zUWa2GO7kvn8rWMxTjzOA76oaQ/J056qtQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.62.0-canary.916.2135eb39270b37488dc6dfe3a0db61d58a549dcc.0_1636538456518_0.1284430360522406"},"_hasShrinkwrap":false},"1.62.0":{"name":"@sberdevices/plasma-ui","version":"1.62.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6e8572e3960d773e22f0bbb583df15ab58121026","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.62.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-MFvawwf+9TAfG8uhU6gbE7Ln5kH0tJWthspFrF3FO2nNuF93OLRg4Bi/dHl6or1Uzx1jgRk+6lEAp1v/3iEZAw==","shasum":"d9a240447b23b3c54fcc5ccf652a13a0d1e61d3e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.62.0.tgz","fileCount":798,"unpackedSize":1658323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB5kdftJ9r0qZ/7NaKqQU/yTh2MQNf3wqIqmnQde3vGgIhAKqu21RDN6AoxIEilvu+P4E/TbaiLPUcoJgwhEzDJrN+"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.62.0_1636542133308_0.0018183110501233113"},"_hasShrinkwrap":false},"1.62.1-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0":{"name":"@sberdevices/plasma-ui","version":"1.62.1-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.2-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.2-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0","@sberdevices/plasma-sb-utils":"0.34.2-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4db092572299e5eee849623fe82e9547f1cb829a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.62.1-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-mTlkGj4spt0+imVo8fNKhtRPVay6A0dT1CgNSrot+DysYYhwnuoIJxdptHQCBQJucxUhTCzoOMVi6rc7RTiugg==","shasum":"5283f99f8fc0958d4f416366785d8415326c5cdd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.62.1-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0.tgz","fileCount":798,"unpackedSize":1870283,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYIOHMOrSL/+GJLBH0KN+qyU8kxVV+77as9DJehNW3NgIgALWXUcb6R7M893dS7RsMVoBXyWF2FLHHf+2Fo1auTnw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.62.1-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0_1636627797009_0.6031268305302997"},"_hasShrinkwrap":false},"1.62.1-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0":{"name":"@sberdevices/plasma-ui","version":"1.62.1-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.2-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.2-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0","@sberdevices/plasma-sb-utils":"0.34.2-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"75f85398a557e889fed4e229693be3eb5c9134ab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.62.1-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-v7Z2POer1AK+A1TKEaLCE6/KzuFF3yJN6DXR5ASfxS6UMss6zewi5+SO/mhM6F4waqG/hD3dMo0SXzI/t+Us8g==","shasum":"5b4658a8549ee1ca148e599b4204b16a22b867fc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.62.1-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0.tgz","fileCount":798,"unpackedSize":1671609,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnsAw437f5SVjGdr3FTeYwKH3PcByk0eYlDLGuRAAo7AiAlX/e5CfpQ8foKKFpwD+EulFNGA18Id8oyJRVkRlIxYQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.62.1-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0_1636630999849_0.3652478137585453"},"_hasShrinkwrap":false},"1.62.1-canary.898.20ca0cb15371a5c7a40b15f41deb7c9bbae4f089.0":{"name":"@sberdevices/plasma-ui","version":"1.62.1-canary.898.20ca0cb15371a5c7a40b15f41deb7c9bbae4f089.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"20ca0cb15371a5c7a40b15f41deb7c9bbae4f089","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.62.1-canary.898.20ca0cb15371a5c7a40b15f41deb7c9bbae4f089.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-OeHse70AlL1U+9lkcSYeAEvdXUDMVKXDVpwGU1iBE5YjzH2n+UjJlLhtWWXo3kkG4z0RtOUlplXF/+8W9UkNdA==","shasum":"1aff534d5af27610e55ab52fb5b768bd217232fe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.62.1-canary.898.20ca0cb15371a5c7a40b15f41deb7c9bbae4f089.0.tgz","fileCount":798,"unpackedSize":1658377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTDGeWW8LIIcce3QKRtsx0VncLWvwqOzbTeqyeAD6GTAiAZXH9RrWQSn0ef9yltAYTArJe7QafMVwYqcNUgibntfA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.62.1-canary.898.20ca0cb15371a5c7a40b15f41deb7c9bbae4f089.0_1636708253255_0.5852835683219595"},"_hasShrinkwrap":false},"1.62.1-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0":{"name":"@sberdevices/plasma-ui","version":"1.62.1-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.2-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.2-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0","@sberdevices/plasma-sb-utils":"0.34.2-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"391e646844347cc246bc578db3c465ef1e33fd23","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.62.1-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-XvhEo1ufMQAl82C4I4ZtAHKdfwFE1G7Ch091JXFiXQQHeFiJ8CKE+R5vkZTehrFTKZ2kLe/+QLKDVxFmpQ68tw==","shasum":"50b0b51883da1f9edd2ad8cb2745b1f5bdcf3069","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.62.1-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0.tgz","fileCount":798,"unpackedSize":1658738,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjoEUGYONP5YqlHanPAV/eTG0t6a01GiC8I9/8xRlyYAiEAxdGH1wuzfWNawIFR3wBdpv0e3akyOVRBrGZZigPE3hg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.62.1-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0_1636712052236_0.47503377296805516"},"_hasShrinkwrap":false},"1.63.0-canary.924.b7f40a5de0765f3bce8298074499b7cfb1cb6d08.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.924.b7f40a5de0765f3bce8298074499b7cfb1cb6d08.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b7f40a5de0765f3bce8298074499b7cfb1cb6d08","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.924.b7f40a5de0765f3bce8298074499b7cfb1cb6d08.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-5Egm2lxNsdRrZA+01rdwrw15FUbNViwPb9Vynf39QpUeA3r1OdSmNW197wsMLdY+THjm20StgQdoPn1cIuVrPw==","shasum":"f7042896184481e07b62fd446bae48e9b1ff4fa6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.924.b7f40a5de0765f3bce8298074499b7cfb1cb6d08.0.tgz","fileCount":798,"unpackedSize":1658377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnk3KH+hKajuXOGKB5j4MzfhDKYco4NkzPqil2/EbAnAiAIUnMmLhGNMlIMsmNTVJxXni43SBa0jiDkX35xFMBAGA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.924.b7f40a5de0765f3bce8298074499b7cfb1cb6d08.0_1636967047597_0.4038657290524612"},"_hasShrinkwrap":false},"1.63.0-canary.924.36b8ac61db027a27d00789ebf8490e013446d40a.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.924.36b8ac61db027a27d00789ebf8490e013446d40a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"36b8ac61db027a27d00789ebf8490e013446d40a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.924.36b8ac61db027a27d00789ebf8490e013446d40a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-GU4wv8cB46VmIjhT90QO0oq94AK7OOj6YaQ325C/wQN/lOz8R9VTMCuuwBGnAubBFwLcW5NK0nLM6RwelLb91A==","shasum":"d4d49b03b7de42ed61b2044973a6e2f9a6dac64b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.924.36b8ac61db027a27d00789ebf8490e013446d40a.0.tgz","fileCount":798,"unpackedSize":1658377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+sc2h99y7TzMEOc2+bfgcfJqp9/lvsteAhuu3EnqvYgIgJ+QRRF4D29m1eXlWfkm5AqbcjXRmKZIN1A0nbByubws="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.924.36b8ac61db027a27d00789ebf8490e013446d40a.0_1636970109341_0.21921358846668504"},"_hasShrinkwrap":false},"1.63.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"804b91c1567fa70d31e009b438b292f957f73538","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-+gPl7WGNIAWBbdDMEwVZ4BBWa6XMv/Dx1SzwGezBU2vDk9F2HXhCQ+oRcxWwocXyL+UA5f3SrzO3KBmb7Sraug==","shasum":"457ed5db4194d2cd5e0ccb44c1a661900c65f8d4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0.tgz","fileCount":804,"unpackedSize":1663280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDjgJUy8hxB2BUQjNCz/K6+SM/lUgJ9RTBBIDu4xBjIAiBnoosFfhz3LG0fg2cHZ0D6yWKSS/IgjweXFZGwGyuqKw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0_1636971633029_0.7865868358141306"},"_hasShrinkwrap":false},"1.63.0-canary.911.3447331d3bcd50a158e09252028d4c3f749f9b5f.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.911.3447331d3bcd50a158e09252028d4c3f749f9b5f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3447331d3bcd50a158e09252028d4c3f749f9b5f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.911.3447331d3bcd50a158e09252028d4c3f749f9b5f.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-E+1xk03oBiF3aZmIRM108a5TwoldpO3v33ezoh7+zJwVBTVIF7wXZ551ZpZLU/hrUqMtC+VuFxtX5yxFMKb/1g==","shasum":"a14cb8947ef18a9d3bb0f5b86b68984f102de35f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.911.3447331d3bcd50a158e09252028d4c3f749f9b5f.0.tgz","fileCount":798,"unpackedSize":1658377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC/+DubwkLkqOV+TK6xUHKlj+By8CNia8iUox8uTWt5oAiEA8uPW7VqyRzWLaOwX4O7g4BmYUOV+SGpV6e0ffH7ilZ4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.911.3447331d3bcd50a158e09252028d4c3f749f9b5f.0_1636981962236_0.005149798293953012"},"_hasShrinkwrap":false},"1.63.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6727ef3c1b60b0a47fe5a001b1684550d66c8027","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-jc7WODxILPK29VLerT5W/e24cjEWXkR2rwfwQFYW/u+yzWJTA3KLMnEoHrcXtkH0YTVcyHkUuR0Eoui3k6tNig==","shasum":"1fc76b6f42ba22f5b66dc02ef3ef0264edd1fc7c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0.tgz","fileCount":804,"unpackedSize":1662984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChzEx9zFKWLFHSRyF4OxW5W52d7/T5/clhO/Ta/C//RAIhAPDLOoXxovhCSOZLlxU9dRXcHB650Ya5D5A8FGYmP8n3"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0_1636983369209_0.6243814155406302"},"_hasShrinkwrap":false},"1.63.0-canary.924.378e0849abb84d8f7760a5185fc008407278c9fe.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.924.378e0849abb84d8f7760a5185fc008407278c9fe.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"378e0849abb84d8f7760a5185fc008407278c9fe","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.924.378e0849abb84d8f7760a5185fc008407278c9fe.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-16wztjfQyogL/Y3w7acCPhY5gos7199fij/pz2ttMh23YDm5cq5so6NXbVNAtVdxtbsIRfrdJ2BFhwoxjBYxqw==","shasum":"90f96a067de1c2172b9ffa6299e8cd2c6067402b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.924.378e0849abb84d8f7760a5185fc008407278c9fe.0.tgz","fileCount":798,"unpackedSize":1658377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0Z7OoKp1VS2fOfrnP5owrJFqm2+iuRnfMpzPxgiItsAIgUq47PFNHiZOSi+yvZFWoT8jqb0XvRPq4cmfj2RUkoo0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.924.378e0849abb84d8f7760a5185fc008407278c9fe.0_1636983970200_0.09740394742866787"},"_hasShrinkwrap":false},"1.63.0-canary.924.7406b4eba7954ee9e51ecd2dce3b7baed549370f.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.924.7406b4eba7954ee9e51ecd2dce3b7baed549370f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7406b4eba7954ee9e51ecd2dce3b7baed549370f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.924.7406b4eba7954ee9e51ecd2dce3b7baed549370f.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-4CVmI3KBRHbKG6+F2E86UsJmPoG7zj4TiiZ9OZYK8/ptd4ijxOFHqmPPgxeNpBwDpaZ1Gu+wEpZdmIh/DH3BGg==","shasum":"d77ae7dff3e594dd7c8f0fb2f9342ea9a408f16f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.924.7406b4eba7954ee9e51ecd2dce3b7baed549370f.0.tgz","fileCount":798,"unpackedSize":1658377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9SOkICMAXe0TELKYdZ0/4cK1PxnZ3dQuFnAfnDtnifAiEAs14Wo7Iqv4R2H4n7tJn19hp/QN6PQIOP7ALvpCJGXg0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.924.7406b4eba7954ee9e51ecd2dce3b7baed549370f.0_1636984051777_0.1180860850201193"},"_hasShrinkwrap":false},"1.63.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.1","@sberdevices/plasma-sb-utils":"0.34.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9695a96ceb8efa09587fee10fc6e10da91fa4042","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-gY7jH4Fby1AzviEU/ZaHsGB5aAbjl2Bf3bzXwtN5JlIjD1NZrEMBKbp/p+zmeacex6rYGm9a6fBtHFR8RLWQ8w==","shasum":"4cd989bdfeb663cfa1a64b50098b4efc2c40fad0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0.tgz","fileCount":798,"unpackedSize":1658586,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJYaKgmT6B0G3yX1ER5z9GPQq4GwcIWjtK6aX1bbzCygIhAPr1QioME0FsCp4YbrFdvYSj9fTjPe2GIu1/hH+DtM1x"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0_1636985064200_0.6407734272458152"},"_hasShrinkwrap":false},"1.63.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0":{"name":"@sberdevices/plasma-ui","version":"1.63.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"17372539dcbdf3ec160a0048cd5a680e68999390","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-kwWZf5BvL2FzYVQjt2/u3Ksc/zL3+tjcdS3lOlZqo2HKxYEbwu2IZHqZrCav4Qn98fg4W+waWZX0/fKDmtjk6A==","shasum":"e8d50048e31419dc4807512dc0b34f4bfea80a56","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0.tgz","fileCount":810,"unpackedSize":1668667,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrMC8VYxZNgAcGjUY/nPFAwI3GXuHZzubt86XW6uz9HgIgHhx5wja+/t5e4sF6KJ+ssrqEJHm354a/kJjncKmQKok="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0_1636985392190_0.05822594668006942"},"_hasShrinkwrap":false},"1.64.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0":{"name":"@sberdevices/plasma-ui","version":"1.64.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dde5440084d3be57e693ece838c0f218bb46d823","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-DIKHAxoFGWdnt6bvgO3qMCCHRsb+gtoX3nqcY9N/sR82yi9Lfu8c6siVDz5ye/4lgFNSQQSkw2nWtzIVQeORrQ==","shasum":"93097801e6dc5e6d430209740eb359e64965c5b1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0.tgz","fileCount":804,"unpackedSize":1659000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9BnqP3Jwt2NpxOWBMakT6GZTZOQpam4gqTXoNyWZStAIgboU9WVaoS6EBHA0xOEN68/84AhneV/RIGY/Cutq51xE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0_1636987385007_0.9796215344136505"},"_hasShrinkwrap":false},"1.64.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0":{"name":"@sberdevices/plasma-ui","version":"1.64.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8eb735bf506038babb7498ae0b12faafac3ca328","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-wTUIOhvkTy6BeR6rwmn1NkuOF8kz3lGCtLFJ+U6Te/CHwsDf1pyMp6hRamJt7vUECQNsNQZ9U852czXpqe83Kw==","shasum":"2d196cd90f40f1b52cf866244a0c798da3bacd47","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0.tgz","fileCount":804,"unpackedSize":1663247,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGFn9dd7YK27Timxuc6XUxqJIVH7kp4Zbxasi+31jX3wIhAKwZfdtEk9YhQZ2jVmsAD6NixwotE86EOx9Kmdpn2Rbv"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0_1636987593557_0.8543694733733083"},"_hasShrinkwrap":false},"1.63.1-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0":{"name":"@sberdevices/plasma-ui","version":"1.63.1-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.2-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.2-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0","@sberdevices/plasma-sb-utils":"0.34.2-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"edee9289d5ff9b87cab19b020ce9414dcdeb17a4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.1-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-74KCf6rvcsmBrijG7byQvy6DX5YAQD8zyNzVCwCLpyXy2IjpysVi7NaNUmFVorVHnMlXOPRwo8PVXb0XfXw6Jw==","shasum":"a8e893453197ada0d66d790c0d32e8af65957708","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.1-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0.tgz","fileCount":798,"unpackedSize":1659001,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSETkCPk5tQZEDBwT7B/m/0sQSCzOFqkJpN5Xnbr/c8wIhAP/Tycmw6nOIhoiK7Qf/f3MFAZqHY1ObR3Y6xjplgppc"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.1-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0_1636987780439_0.24294470103366095"},"_hasShrinkwrap":false},"1.63.1":{"name":"@sberdevices/plasma-ui","version":"1.63.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.2","@sberdevices/plasma-sb-utils":"0.34.2","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6fe96555d225c1f60abf818c226b068a9440a9fa","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.1","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-AZZmR5TYHaMG86WOBi0mgGagsZ4vO9unYDXYTC7RMsqY+53XZm6M8/T0cKGlwvncz/vhVtwijOK5xLKvmm1ziA==","shasum":"37028b77c858d05d167fa29fa0ede7c9c5d27e31","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.1.tgz","fileCount":798,"unpackedSize":1659063,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtRAKxbCpr4IYDoeB+NwlEzrcoeo+kJ+5uXXYh+O9WXQIhAP5ddYzUnbvSbIzQTe75TqAN48dHPD7hxeX8+uI/DZd0"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.1_1636989641304_0.6988476330481788"},"_hasShrinkwrap":false},"1.64.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0":{"name":"@sberdevices/plasma-ui","version":"1.64.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"08f8b4d3cd1615a871c5c030f482404edf8a313c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-hGTeSKhJMZM8gJzNB1XsDMzJ3a0GODYuVwiUzvPy2Xny63z40yn0OMM998kVajDuvcufuPzcj340XFKLpxjqQQ==","shasum":"a564c59d61017987542d9e57a2cbfc004376b17f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0.tgz","fileCount":798,"unpackedSize":1659279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhkn4cCRA9TVsSAnZWagAAW7wQAKC+Zg93tWpyVqUzUBQ3\nM0wsmtlesERRlCbRIGi1fDrKeLjodnhIm0otitSzs21vyRBPzWt5EKzm/+JO\nMUTtU54PA1lAiD3jZgV3jn4YR6ppbLtMhD8EkqxiLRzpwg3ZCMVhbvhqc6M0\n3GRrEtSiVZWY3ViXjWrPD2l4qEBue0WYWrYME0q5v5MWfFCQLAs+9vKk8vdO\nu7LqrlflX29IJ9x1t/5VlNS+XyV015U8se9XPd7NBLyVAa6nMum9oo79JmcL\nzfVkong/+0/0KyPqkBr1B1239iGFqcXrzeGBYSEWyFhEbMIAhVLWexF3OoeV\nkEaSyhf+F0T1owWmA47aIvrMrUm2O207S6b8bc6Ai6U6A03bnvLdkcaF0/U/\nRpezBZucWObrhW3NhvWG7ibYz7IA4Mz7GGEbGwKmzL3OI1FfLn0+qXlw6mKd\nKmNVkNvi0SeTQzq81wNm8WK5UANlN8HaYZArR9KuC45kvilN+4pEWJmd5xZa\n3vQvtVl0N9kjEjukBnTiks/F09Xd0iD5BURIinmJSuEkKq/27Rx7Fi0QeaeI\nPzAVZaXFpofncbp+YH+dnveG1M5K85w0zpNpLpFlx1h8SuLrEzDf19ecqpun\nJj0J7schBWAkhlAllMIYkEmo1wrtOzoyclYR2y846C4H2NTeBG9Up1Djnn05\nQ1ic\r\n=9RiQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtful1E5Jb+a+fVlnRHC7vC/KYhEJJG7kfXzjEJtcFgAiEA5JSE3YQ9VzBEU3ng51fmoZAaY0Zs/BcIgCIZNTRupzs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0_1636990492633_0.26867724954888983"},"_hasShrinkwrap":false},"1.64.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0":{"name":"@sberdevices/plasma-ui","version":"1.64.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3dbd65b73e35056ba88719514c82e157d166d25c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-G9vzO1OF6PbKfoHVUGWN14UDxaCTjPYonKt1tswc0UgLlTwE0qJtsHVz5pV5b9uHzUNb9Q4yqNe/UPZXOxZ6PA==","shasum":"9e86b85f697b169815df753aee4f123509915309","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0.tgz","fileCount":798,"unpackedSize":1659279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk2C2CRA9TVsSAnZWagAAiuoQAKMPKqEA8JU8sstU3sgH\nbIthCjlszxJ518wdKxI3le8tVH8wUh6LYMgml6qhSc8W+uvwyuZJ9g46PXqQ\nPl1jI2uYWiVkMVyCrngzrMcllRNKau0GbrZD1gDrIVuRt03imyITLgepNL89\naYAIv8n8c5bSfSBrFTbl4rOGPfZdo5enEwrvWSD5qXHjCf4fV39lVeGH9Si/\nKLOkG/YpB4d2NlJY0NG1wbYP81EZVKeXW9yqbfGg1mEXeCi3Ru17BOIaetas\nvDX15/ljm+nITT8uDkPoYy6/jCDMyz1mY7/Tr+FHahrIALRVWlckSYzKqKLB\nEmgBCUCU5ktQQo5UyhUT2hOMEvAuELnASDyQ0yvpwzsUnXDFFN0cy6eXmzKm\nFv8V02Zg4iUY/PfwfZM65FDWpuXFES8wiqhuV3hLex043d2+H5Z6HVyZjxaF\nxf7j3AVkNNixoW8INVPBYvfyeO3FiWqSM8OIHGqN68LVhv9022SqZyaqSYOG\nDTxVkUfTvdfcI3BmKmXcFwWqKKpZbWqr5+BK3wup9o2aXHYXcQ2YqQ0vDH/U\nbPHQGORY2X0INaf0XrQMDRGhktd+oKGYd7NopW+iNVTzA9VsJ8HX+RxZLz7c\nC6ZLjr9OLpq7O93fFr/jzsQNZViGSet3CEye2vIct+lC1Iz+hC797EQvAjTZ\neV/N\r\n=tJNs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKRyjj5A0v4+tUoPCiq9f6WErksnWAEtQlKG+Gp4z2LwIgRtOtYrSB0EJl3fN9pS9pNABZgGqtjj7Nva/tKeE2ZF8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0_1637048502715_0.016296583936545872"},"_hasShrinkwrap":false},"1.63.2-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0":{"name":"@sberdevices/plasma-ui","version":"1.63.2-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.3-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.3-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0","@sberdevices/plasma-sb-utils":"0.34.3-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d08eaf2c340d1b311e3636091a96c1e0ec7b0f21","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.2-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-pqWC4X5nJumCI38LvThBgi4c6E3CsLaWhe7m86P5SEu8p1Rr3zlV7+Hyo34HpyCZ6D98EDw1OKSmX0omJ2zS2Q==","shasum":"d5edf10a5cb9eeefb2fb562ec16a496d895f640f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.2-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0.tgz","fileCount":798,"unpackedSize":1672349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk2cVCRA9TVsSAnZWagAAbJoP/28+CDAbKPzkgKILCFz9\nKGZ2VmGaabTj2x46shIFdZKFtBVQDdrFrIvToyT4kXpN6NQOOARW26G+DL5l\nUqSA0xYf2SRjw/geiYY34XCcJXoRbm6cXq3ORLmcW7pAfoTzHliaC2c5p95H\nxSp6PTyvntO166KBP2ORQ44a5U/uynRblnpuTjO/doUpuGjiheNklLMIhIhs\niPyGaUohqKmzWrki7PR2TL54w54Ev4fdLhAx0lOZ9LfW6eAYP+9URRuKFnKQ\nNty529kFefBl+SrV/atBeKf67IK4LXI1oEASFegMCEsLjazmAOd12+SF56ST\n8Lp2nveM6tclf4A5lawvSooLHvYSm0EiYNEojGuCvSQoVfCW++FHSxkOHVpg\nZg3rcQKOo9wJ6AfKzykK6H9/J88WhV1s7QkJBfwrV8st2S7qsLeAAzEyIEPa\nGLJ33J3iBxcQk/an3jVLO6iCdnCdmQSzc1xK/Lwhd/uEzMpAa8l+5yfeM1IG\n5R1e0m5YB7n7Vsb8CiLo9Gb8zGO81tFM4bnn48oB7dFqk+rGUarjaFYVWqbQ\nBMaq1UI88ybdNj958WgkWtdETvvpuPOL3JXjut9mR1XduRHLem3yx/I4+ww9\nQc2wYy+GjYV/RJud5p2iKzvEtMjPy2MatbEBE4SzQF2AkOqvzWu69nBxdK7m\nRlY7\r\n=+FsW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO5ivLOzfp7v2qw4FY2WAHM2zhNi9o9gmbaQ5au56O2gIhALUvpOnxN6mXC7VPP6I2t08e+VSxh/Dxa8EDjTaxmIYT"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.2-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0_1637050133578_0.5298758679818962"},"_hasShrinkwrap":false},"1.63.2-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0":{"name":"@sberdevices/plasma-ui","version":"1.63.2-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.35.3-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.51.3-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0","@sberdevices/plasma-sb-utils":"0.34.3-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ea8e479458337d952c8e8be1666e1466116a4000","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.63.2-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Vm+IrjljvI6J/60s+kwRZ8az/76zKTt5uAweQfnlvm1aGI4Y5cDCc/nWiPv7s+yAa32kHTs2ImsTEhRBKaLalA==","shasum":"8e02ff8e6d6308f2ef6541a8196736d8e4d1d72c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.63.2-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0.tgz","fileCount":798,"unpackedSize":1672349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk28VCRA9TVsSAnZWagAAZWQP/3t5beXj28OGWqoj9Ung\no+MiZ6Qxb2QjkMe3xqcNJoMDroebiwNybDWJnOghshaufpa8sbh1fVQ4LxE+\n+2gPAPdzaKYSbPeVcM/w+10JMmcyNkisZ/SOPEPIPxDtvEWoTURve7kw8mqH\nZQDi7jzPsCXbfPUch+B2RuwIuSdt1BLzLDUsJ+eUBFXRtv4/RqZbieQoMyQT\nzTt8ZpA9TaD+XJcTgKbxCXm1AsVvDQgP34XvrcIKAHNoz51IfD/pNoob6w57\nny7dXIW4AuRATTichxtQXg7yeFkfsEvMwCF+w+dPt17E8UwQubxYOi+qyJhf\nqUroAbSMr5C3ssLu6ALQuPHmv+PHM5AEgbU+pEI+uCU6Xj/KDvtEbZ0YMyVe\nTRLcdfT3muh3vLUTCra/nbkgd/Ke2wohLLQowfzXkOMiFhLUIWDktmWP49az\nbRPP7sFDzgHYJ1GmmnTfUnvXhB8dwZq8lDXBgRXWVTGohP8iImVbM5vHfL4F\nIAQOvCSjB563DtdGXEuz4t0toPrcrieHtKC/IOe6JAc0ZT89fcc9IJSX3TND\nolDZnGr6x4eUlNKru+TGLrDp7v/OrAaDDpvFZA00HcM9DjsyEHwZTuDAXN3W\nZMJOgOWhaXLTBajEy2af3rdp/WxzpGwmkk7DCs21p+yW+/BO7qeaPzO8jxh9\nhfMn\r\n=ZKca\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWzwIYEwVhOykk+EvPnl8DjHIv9wl0jYywHeu/yzFj/QIhAIu85/pJQMOyCD0TIygi51VwijQ5QGFwe7BXlcebSbha"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.63.2-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0_1637052180827_0.55921664863351"},"_hasShrinkwrap":false},"1.64.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0":{"name":"@sberdevices/plasma-ui","version":"1.64.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0","@sberdevices/plasma-sb-utils":"0.35.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8b8d1e84abb90c3b586ee8fdb52986ab17211a9b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-20YHj75eZiY9a9/wJ+kNzXfuLaxtT/awZ09mh3ddkWLrBSVV5owFblxnb7mUBYVjrvwM2VSwpnk6jJf4ZK9tBg==","shasum":"8809782ff0ec186d9af9ff3aaaa44db38cbeccb2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0.tgz","fileCount":798,"unpackedSize":1672349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk3LOCRA9TVsSAnZWagAAS7oP/1bDUf/O78jKH40i5Dgb\n4nb6dXb9+JPFKgDM/dlI/wA1ycpbyNnm7XQ6Zn5CxbmsA/aA+r84NEDoLdCm\nAENl2GZR3oKKmfNNK90Bgib36Spq/un9Bhrexxr7v4TVFGG9U5u16jBHMix7\n7g7P8SzZZfPG8R0OIFtRAx3jAkxtqppfZ2QDnkqi8sph/u3Ahqbf5iILMBKZ\nUqlXFSaZaoef4wmQiljNjO8eceeO85gY0b7EE900reg9EDoad+bwwXEjj5+1\ndUFUuP1P9Rt63UMZ7xZ/o+gAnlQQG81u9LITp7IBFMnkEwHnrR5tqbAJ5usv\nQ2VaJ6xwLkJrTAlknGbkYTB1KE0rHxVJM6BDmaT6/eK2zLq544RGL0fft6IN\nPNYKnGTMbK+nQ9EtRJfUO0MfBpJZelTulQtz2aUrbIZB2QKiRP7TS4fuDZ7m\nYc0TS6Rn4YeuI3r1jnBVgqRVVPcubOBmaBvR8LCk892g5zb/ZMf7miFZW6x+\nezuMV8/9wJAKFZlnxz7YQbH8FyyAUuHISDdLLIiAIcYvCEzqtAZXchWvGlhq\nj6aBcGKTs7zi7O+qOSGa68ZjHhTzhaGHFo1Hqg/7hFl6ixDJyJcqdkCf89yH\nsFO3K6pMVRlh0XhJhAzj8IfMDbMk8Y3LCYj3T0lBO0XMsH7Ftvn6RQHpTEB5\n2MTJ\r\n=RnDa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/YdO3iikHfHZoJtm0YDsnifkv0bG4mGH0GE0ILtrozQIgYXzttV6LYom2VMpZSkgaIm2sD01qe91dB8UEDvv6a1E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0_1637053134341_0.3823219367554205"},"_hasShrinkwrap":false},"1.64.0":{"name":"@sberdevices/plasma-ui","version":"1.64.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0","@sberdevices/plasma-sb-utils":"0.35.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5a44a6c885c29b94a6a18e853d7da21ac0dfdf49","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-xGfurEz/tw+icpDyNm2dwQmeFmvqNQ3FryR7qknoieVBpTi7ifkoT1mx2GRHYereA0Ja5ijdOq8U1BFolmB2Jg==","shasum":"576ddafe3754fae0c729f714215112c95663a88e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.0.tgz","fileCount":798,"unpackedSize":1672361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk3oOCRA9TVsSAnZWagAAnUMP/RiRKdPwkw3HC1WZyQt5\nWznblEI0E74jEgmjxhWJWRvCCwFi23pNHTpP0DTJKTJybJ1O+JhjCgpAPmMs\n6hBqdgsA+zx+VvH9396OyRVP1f8rCY/8I0j/0Ryyvrz3weUV9rKqgNxBKDqj\nzWocnTco1xjt+WtpVa7MahEfwcipuC+yMQtwSsuCTLTWxHrfV/q13AO2J61V\nSe7CSvwwc4ruE1IHy8WaB3RNHnGCIE32/KxR4/J1JVFyWAvDzhbnA5mCl/Z7\n0W7PGpCsdjNiLT2oucWd341vAhiJDcSj829sMbk/ZcqLRgnrletFQJOH8OgI\nY8GB1kmMEFoavFWqrCSmncgqxqBR0F3c2QoEUvmhmOq+bhqZeXHPNZqU1NXd\njNn4GLUifVJpN9SP3SJrRpufolTnwPqFLM/SNCmsHGJJi3z8V8NpbbSWTRUb\nEwA1rfpXdOW0GHqnxX2zcDxxa0eVrN8mGzC4m5WKY+qOmqrh2EIe2PaMXHCI\ncHmVu/TfTZa19V4gbDwfLYv04DtuR5TUR0TMUkafrm4BHxPoe+DhiORYubI8\nBg0gnoUWa1eSXkKtI2GyeX03549wnmKo5j+h+99bvx9oan6d3mv4qcANCSnu\ntvk0Rf1irVjnnwGhep7JHbwBXdowyFA1Yt6RgWO8tDiBaIx71RBw9ADTYRzB\ncssv\r\n=lbmP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZTfA/R0RAz/OuyT32euD2VIFO7KIMLnP0eu9DY75uWAIgdmh4H6FM5xAC+BHJ1eBjLYxxXJOGvdFMNIzgV7n5KkI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.0_1637054990473_0.8687138491735111"},"_hasShrinkwrap":false},"1.65.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f5043d6567b63fe0e03ac59fc02258783f30e4f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-fh6hbQYQ5fOCoJHkkha0Uvb7BVlWm2O7/nAuVNexg81/Z93VH+qbH3yQbLa92a9vn5yYuQMdiU5E3ZkueDFBow==","shasum":"1ff261b8d599b6f6b60193136c14fdc5d3d7cee2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0.tgz","fileCount":804,"unpackedSize":1677022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk8xtCRA9TVsSAnZWagAAC70QAIckH3XTcqZ6NVHsENEd\nvpWxkBvlzwzvPS50AAoLVEWSSy0086kNY4kpOQ2YdGcvWLmiovNDy/9W1S5B\nY7+ciubKW6DmAbUv5Mk4hkt2qGODA/MOv14TqdYz2GhPsAMEtScWF4Lq0ubF\ny4mPGBaYM5I3D/nj9GWTKEduTJoltHya/IASUaXIFuFIXxXwFfu19Zx+EMPa\nlxngRiwP3ETOEqmtO4O6trZt20U+hdoXNg2fv8i5pOwqVrQe1GN0rxQlYWZc\naGz4w/ayXad0POwonnMd8uB+IFJtWQxiu4QsaW73DtwaQ8qlgB8eKt2vbVpo\n82p33YYZDAZ6J+gyE99Ogi810LbbhgcMTA+SMRcl4u8uTmxI2v3WJDkq3Fl/\nvoMhd5iU+ZJ3kINASAWYXHsnS1dzCCivuDibQWk6gPplWqC8k029CK7K49A3\nefirQpv/ezNpbVBFFsp52Bq6xcnhO3V0jl/JkD2J02wH2xg1rwpYVPEldqtW\nkhVPQ/13rcYoft/wdTvlNsDseRMzxwSCEuxjzdNNHltG7YtVlFaEOFSwc3uE\n+Ez59QjYKtRiOHs7nRrPvKQ1/p8jQMaG/iXSscRYUt3wDRBW1tbNkN8u4l+C\nPfl0KMOEpiemEVNamPTB5E09pQjhUawDi4vS/IDMkyw+x/5jL/ZrCeENb3FJ\n50yR\r\n=jpEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy9L9dBbONDlyrYOPGMsJMcaLI0HUmYsSl6nv5DExELAIhAPS9hD8HDtgc/GgzaQ9HwmqmNjhYODoi4eEKTmW51oSs"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0_1637076077696_0.1108679636432901"},"_hasShrinkwrap":false},"1.65.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e28fcc65ce6908ed30f44e4683a33eeac49411db","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-lF+Z1HDcrKUZ5sLLmqitMtDSv9OI40tUGT2XdXI+alGQbUuLotZaNAWzwpofgZ0q2QxLFzOJuuAKN9pG0g+Hqg==","shasum":"53a1fb4b2e97f4ad7ed0e5aa9c9d0b2841d636c8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0.tgz","fileCount":804,"unpackedSize":1672576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlJd0CRA9TVsSAnZWagAAnoIP/1cVMEAdR4FFH+dDaPNr\nDPi3yeGRzPtJSnHIu75Qrr+z7Ud3fqHo9cwyiWOHS4EOy9fS56Y3I8VmETtX\n0CKkOIwChssbLp4m4GoJ9CNApyVNfZkAR2e1Npok6PuajUo11upcfxAXyDDL\n/Ce5cDMysIIVKg8EFhi7f+M9s87Ra7pL4mB/Z9LuG8hFfW4mnE/HTZSY6GDL\nCuvaqjbfIQeoz1Z8Iv7CaK7o2VpyKWrSnJQU/SvRy+CVBHcc+VlUNBEGVaj6\nrqgH93Zx32AeiMRE9H/wiwMfp9gerCla/l7uBILdHbcvPyt7USKkUlzZ8iFV\ns3gtCKB7v0yzHPzQ9a2D/1sUFg2DDG04VSGBngftDiQrF6dZDNk4vebpsEKl\nqsYrKeV3K2NNBDThvf0ovtbaItyWYO5QXkcm2jcy+XY63je6mSP69r4u4xxA\nAi3deLCpfxsGYR7yBjyGmdZd58n2gjrPEOxqVxCJDV06uT+Fmhteh3G94PuE\n+6aYEi5DH7gAMaPp0ZYd3BcYgRxM8MDT2yxmDGWF4A0BPKE8M5yfi6LCqDjW\ntLciEl6ioUF2vZbutDHMv+zO991gwPk3m0qxRsoZYP6QmnwkjA0byBkcMP+i\ngdmpLFFPjUDF9dt3RE4M6UrCF5bzNRvYCiE8mVGnFkPiXatOiybWsQ2FGVXW\n2CII\r\n=cEiO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGK6e03+md8CUEp2iRvf2O4H9rdg7nf2Lljx2Qa8ps4AiEA4Cj2LxTeBqTSwNrpiS4IPESU2L0iwL/FBGOHpP0Txpc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0_1637128052519_0.7213769566544692"},"_hasShrinkwrap":false},"1.65.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f35c8a166a2d56242e7efa005865124a4d29ed47","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Pf++6JA3qCX/Wj51c3zCPesgIzM1LJMQf69h3e78H5Src9fLUEYZJID251CAnI5hXeWSM9Cxva6RVysqYPCboA==","shasum":"d46a9d8b44b6ebfe16d321a4fe716fee560c714e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0.tgz","fileCount":804,"unpackedSize":1677022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlJeDCRA9TVsSAnZWagAAx6IP/2+YCup3r8YsYiAoKLci\ncTu60sD01mpXwmOsKMHLcqPfuiOk2p2ZMZdjQLLxMZ4m3Oa0Blmt02yrsHUv\nD24UvaYBHJmjTb+SUQSGLpDeZh85Luh/bCg5mqoTt1QXQDejI9rb/iSshSRS\nlbCK2wZfzgdB2YnzbwrFRpodQchPINbvb0pehZXa+23Fa2SSOJKMyKK0fdZz\ns9SPxxfLDlLHTsGJ+59enFR+T+j3Z7HuuBaSbgD/1Mp9wP4yNbboqCjnQIjR\ntzQJnJZtYBAAhWpT+Pa1jr/65YsUad+5HPvixgGqfFAc166O+6u75FTunVBl\nRANe16GaoWMO/JGHnC7rj6Y9EUzvH1TnJXpozyFDRdcznzUaun0E2Jk1SST4\nNAvWoF7xV05tQfK7FFRDz0DI51Pep2f6L373t+Tct8bdnJkFvt6CCQhy/bXf\nzVrAIRr0RoGm9tM/EYUvxcgQz0HJ1ymUqWDKXzVlg3GqW4OR67HvZ10H2MLY\nx8lcZMjqIrhNvmKULDVIOnuqb44k1pvGjibWUEbhThmYm6YRreHCEGEfOoq6\nk0T9mqvPSVhKEW5nSymAFGINPmrana1lyq/DsZoPjIhBmg089IXuNTAupCdl\n6sqsDrocbyrdHoyc5zwbNoIAkke3QnHwf42/s0HUFspJsJOcBGb7MbxllEbE\ngz54\r\n=Xgg+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyUyv19m8HQ6oXK7Gm4yho0cl+qjab4g1kCI24ky+AhQIhAMH4fjZhSXClcHPVn58Z+wNFIvgSdVkeXl24yra3jQwf"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0_1637128067119_0.3671246052108752"},"_hasShrinkwrap":false},"1.65.0-canary.930.a720ac680e99e05e66f4bb0be6fc9fe762628504.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.930.a720ac680e99e05e66f4bb0be6fc9fe762628504.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0","@sberdevices/plasma-sb-utils":"0.35.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a720ac680e99e05e66f4bb0be6fc9fe762628504","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.930.a720ac680e99e05e66f4bb0be6fc9fe762628504.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-T7gGbYvXib1qTee4xdimoZ1QeOP4++t3SJdFUs4276nuFWRAY2xyqiOJzbDxi3cr4zrqPkYzDT9My2PlHRf0CQ==","shasum":"c9f9c834f99ed537e17e226ba62bd2de06bbc672","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.930.a720ac680e99e05e66f4bb0be6fc9fe762628504.0.tgz","fileCount":798,"unpackedSize":1676083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlK2pCRA9TVsSAnZWagAAuuMQAJr20p/ATUXm0jnEcVuj\nYLvr2qVBP89+TBRb7WlKnnJbHXOe6VqH7ed9hHOHDf7zrVCcTOgybJw7Dlnl\nLyGw2+8Hb7TH5y6ZF2UIKpwvF5iJwFDWm9WHuwauOeBNoKBuvHna+OzRUS7r\nJ2pRI3aNGw+wsdUpxRV504Y6EXuroOTBvPc2qTF1/jDV1zxRdrh7iWGmFffK\nRabqHhqi9AaOM4FoauyVpj0S8Y+ZkR76rANrqAhYabeXEOrnP/Bcdc5r6/z8\nPyXrOEMqegV/dqvC+4QEEW/RZo6GhPaTbEsqp7ko0N3FJsTWwu1H/GZHbX7a\nfozTR5BqTd7ugi19R1jApmszhcw4ZsiKykWQrG+jHvb10N2+kuBEi3KWgWJj\nespQy0nDeHDb/VwGoPDjetiYu9ohzK2n6vagqwtLH2Q7NFaH2Pwi+5y9XqL5\n3XidBR9AcRHNd7fA+91xe2XzEV9HonkGY0Gt7CjjeIW/sM7kgA/EVum0XkOy\n2OvmC/3C3TUJYMirAHitUDgvZsHYTN8z8piP3g7SclMSLVYloWJoR7Ptdvhi\n6tY+MhdNs7u9UHkyma2Uj6fzjSxE/PD++OcN4MX4NtWraEQSVsc8hZS9oQFa\n4cXmkJfSGLyBiywYO/nWIsOAPlE5LxCe6MNov3RGZ8R2G3uMbJg8Hb9Kqjrg\nYDPi\r\n=uQAw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOOD2AbPWa3QgrNKYBuJJYaNnAVVhlUeNpRlgX3Lzu8AIgJ2N3vaROxt+tj4iVezxiYNDyCpyRR9WJ3OdsyUpsipM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.930.a720ac680e99e05e66f4bb0be6fc9fe762628504.0_1637133737201_0.6381065966701238"},"_hasShrinkwrap":false},"1.65.0-canary.930.b756f53d10961a9a27c7056fe1731a2d64c7ebf9.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.930.b756f53d10961a9a27c7056fe1731a2d64c7ebf9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0","@sberdevices/plasma-sb-utils":"0.35.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b756f53d10961a9a27c7056fe1731a2d64c7ebf9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.930.b756f53d10961a9a27c7056fe1731a2d64c7ebf9.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-LgVQhH5Qd7sTipj+pHyLUIq0rpuz5zVJ9bPCpeEVEe2H/Cge27nDrI/613ld/JZgdSJu57167IHTpKN+zBcs3w==","shasum":"cefae3f38eba561772c1766e949214654a44141e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.930.b756f53d10961a9a27c7056fe1731a2d64c7ebf9.0.tgz","fileCount":798,"unpackedSize":1675981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlMVnCRA9TVsSAnZWagAAauYP/2dVAc0Cu80K7pRQUZ+p\nTQqw3FNvb/ydgIS7igoI7nzqfIHWnLocT5LBnee6nR9DO6OPqiJUjNN45zaH\ndyUT3YO+dqOv+tUPyy1Ez7b+htCCEhHODZ5QGfeuOGsGloYdDFYHb5KFr0W5\n7fJzXbgAXvrNPCJCU9JpefgF2kgJIrd0Mtd/NYtdd3qXadd0Ougqw0qZItas\nFgD26DY97cU/s/igR3RtbPWARxOKZLoMdlwX4PZprTW+KXgK/bE3Y9Sd1L4I\nNAxUSaJwcWp39GvbJHIvn+zZzxdSy0LQ+WAzhsagqBQefVzJ7rD03exS3kFy\n575Mpcr9HzrBMe5RcrQ5xrgb0Wpj9yOaZM4azpu/NKVcDWoXd7k3p7vbY1Oe\nfrP+f4IYbm/BtOmg9ywt58nTVFgKPlr627C4j3yLVKpD8aX9elcrGmdPLJf3\nTqbSHCH1cY3XOp7JRE76frGLpV46SEbiAjw97MeSjWQ2je3xZEjnnNDpbcEC\n/oBQ8KbbaATvqu1b91fSln9K1a1Rd9R+wGdAn6Q5AC2OE96LhupfF5M4e1Ua\nX9w+PslmHDZwMnvE+o4F9u4w7eqWH/1WmZNUqU5nG2of6gVGGSYWxv5NWT7o\nIWQg+cg9idG3O438tS4CHOxHWQog4273CYupAUEJ4UTQQFk+g0ZfIYIB0KCv\nBdnr\r\n=ft+F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxD8PGntyTXeZS297sxlBvDiWZl/a1sFAiWcQ6Q99YgAIgcX/izA8r1E5A7iTzXAM6Zzh0gOgnmElsFQo9Zh9cA1I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.930.b756f53d10961a9a27c7056fe1731a2d64c7ebf9.0_1637139815788_0.4979231890882829"},"_hasShrinkwrap":false},"1.65.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"24b83a45baba188afab27d64128d2f46bff247ae","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-L3eZ9p44YJDnYSv9156YeDE4CjC56wY5Ad/ETZJFNQT5xF8eUcPBuqk9nEGh6i+AqRc0mylVJSEaddItWNNsHA==","shasum":"ab442906ce769b2a9ed85800b179bfe8c2304be7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0.tgz","fileCount":810,"unpackedSize":1683469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlNXFCRA9TVsSAnZWagAAVvEP/3x0lvZQ+GCs6+j39UFJ\nk7j9XUtGc6GMSj0xdZfY0vx0vlFWRUN1IHoIwUFVPd0lYzP2qR/CdjB2lcDr\nh7HwO7nnJAYqLZYKHIGI2ZSE5WKWN5wyYwUo++zrUH4ghESsILRvNgsix+4o\n6JGpUVjqE/WTeZcHhxNFWp4ySGRX3qZew2hk+BV1rY/9i9Dj51WZAHExgsW8\nMR05HNo7an2J5RKhmtn7aSoudgzc4wT4RCU2E8PQM9VLh1or3Vq8PFlkB4Zt\nw4H69jPTLxYCPznrMLn8a2Zb3FA0EWz8dNA4a5QTfSskp16oQAwAt4Fb8uvu\n5wTz2LkcPvdHU9i6rVUFJEQTEi1frzoqttbWD8jIhHsuZAeV2ODmc2/hf+2q\nnFMvigzSoR7HBRCQRix87EInqpYbkkDGPg7DCQj/t03Iys1YAywUsBGp7qKg\nxoFHBfd1IFaUzolHyli4rr1kNOx0U9Uhwl5WsRrzEm5jFE7r/jwnL6UPjX8O\nq40Lf64BOTKy5CgFVp6kD243K9nwWT36vfFqqsczZjxOuuWu+IdcZf7D1VtN\njJbn2/JmYgRoQGLNdn2GG3lbgSRs2gQsikDEZSc/tTyPLCzRDGkvHOiiG0cu\nQ/yWqQCTrg/1ssNpSGdsRrSw2qvveWFkZqQRa8CTRyF3oOwyZMmN7TZ787DF\neBib\r\n=aDdS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0h+ZCY78OQ7GEPJkETxgcxH0e2ytGFQi80QFhyE2A7AIgfBb6AQNAJolV7yVVEK764Ro90Lx3Iur2J5cRb9X9iTo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0_1637144004741_0.49499577846016374"},"_hasShrinkwrap":false},"1.65.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ad2ee60de250ac8f22d64d782bac728300a01018","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-iRR862T9Q/NlE/EMngoYOrjz68Mo9E6sAJ7i80ejDXaS4PTOsvLdfn88QBzAknszmWjWFoaHhUbFvucXdFqpcA==","shasum":"be17e10bacc774957a2f30384fe7bc9efda7133f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0.tgz","fileCount":810,"unpackedSize":1683469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlNXNCRA9TVsSAnZWagAANAwP/3apDOqo9gv12fEoBfFC\noihe/OaMUIirUwpmrK/Xp7jno8rnVm3LrcWWmguX2rbSUyEeY4J3HGhiS66f\nfcGvk/TaUYdwFYKCRpfZ+ooL5efDqHeX2tcsOKmdHAbxnr915LZIUdc0OyXp\nKrdHYZUsI4RkyFjN57LxZSZd0O35tauy7yNNE5eymwpFtnvIU8s+gZgYD86J\nfKOt7GBd0cBJUZW718fVPRqqVCTXyf2eL0B17z3y0TAPWXkw7BmFvBCGc+E8\nbW87h74OpaesiN9Ysx3LsVoI/Mbf6eeRKOXFQqXjiPLo7AiwINQ/MgdMycuN\nMSuae2WDKsADvlis+BInwFsFHLmamm3ONcYc/aluCMfpNG88bYa/EhzQKlTn\nIlvnCYOZQQK8VUV9b4UBsxQPPTefSAweljg3KBi5w7JKTmqsWXjPCcU/HTgk\nohE8yRBUFqW22Mi4GEdwMs7bqRR7SSmNsSEcQftmp8n1lNHZqw77NZSv0Llb\nYzCyHwHDAJUNcI5wsmLrGxdyGT7rahRaodgyZyjy+0PM3+RuymglAAC8s9/n\n4PmhtClcAT1f8sLteyWI8n2vXgo/UIqxz6Cm9zPEFuRc+ILCxcTLhMaCemyx\nl9+WvJuUszbNSkRM/d+a+K6OSku/0E3ONhhPpinYC+noai+IDbchkGAyJmZb\n6BxK\r\n=kcr4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMooX5+bnBmBGPro0HUfl64U+X+iP1ZDTUip3qIx3b2gIgD5EfAChjjfoT+gCHhxxZsiLZZREqaOdfFk9GK+sZuRI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0_1637144013458_0.8624877969537541"},"_hasShrinkwrap":false},"1.65.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0d8bf15ff4dcfdc0fd83449a9077c2786c044552","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-KjFaK8bi027GMUGBFZQeI+C0BxlfgkSICyJ2I7yOFf7kr5NWQnNK/NhL8GfdkBad3EQGJ2JZDo38vTUz9ZUDZg==","shasum":"0d0b65d7bd11bd08aa35b6323b6fb5f703a8c500","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0.tgz","fileCount":804,"unpackedSize":1672932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlRh0CRA9TVsSAnZWagAAFdoP/3NHIsS2aF8DcVYJ1CwN\nOPuUyZwg7hE4z+2PFLyYCNJTCpaRDxGpxakBnVtJuqLhQC11NRaWFK6pwBkU\nnmNpCvQMVB1lRcsbADdnlqmZL8maCmoW8GiDJNjAJCA3YbHoeEaH+4sS+AKd\n7HreCnz4TvgE24eIvOZWHn4bju7cV3Fi4fr+KNMgDHQpxsONAg6+IJpebVG4\njkExDL60hjdwNxnGYt/i4bXn3k1yFoxHlCdJcAidmibsXJMSAqwMSTp1cABh\n5hFfmbMLsoPTpVtOH/jOtLKHplv00ZxaN0JNc8p1h+Lmo0B3VgMO30xLpezE\nieuVDnFownAt2JUk0yV6s5U2qaC9t9T8bfnI7QIDlN5kqvZTfPsQfoopIhuR\nQXpSx0P5oSajeFuvufZxuBGvpG0Bfcgk5KYrKw8roeDQQDeNa1Uo61Kj68kk\nLWn5UuEkUWPlrSlQ0lpOmSvLih280fWaQBxvK4o/4nfjpZ5wmjMFQBNcxrP6\n6ZJpd5nNARFff7lGvo00MSVJgoaj1RnG2ICZCS3OrermFDEr+Y6/JNXi+KV3\nr5zu8quDb3nnlYLGDvl1xIjJ+128D/XHiG3kujcSGJN6VnGVfwQuzG8juKkP\nxvPzUZFcMADvBQTSzLFTCysJDTnyoNFo7QNZUnTWzUegxi5lED3Rkto1fdLX\na3zK\r\n=hnVM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAixdwstr+sKZvFrHTa9VXzN+5qyjtjfSFccFdLxxEGgIhAMiIMqiATAsb4j1ozyMw18aJJOgRwJ2Lb8qMrdbsTEx4"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0_1637161076810_0.31410193819276655"},"_hasShrinkwrap":false},"1.64.1-canary.934.c10f6055f2a043ca2e29016cb2cf5f21e8fc9e28.0":{"name":"@sberdevices/plasma-ui","version":"1.64.1-canary.934.c10f6055f2a043ca2e29016cb2cf5f21e8fc9e28.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0","@sberdevices/plasma-sb-utils":"0.35.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c10f6055f2a043ca2e29016cb2cf5f21e8fc9e28","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.1-canary.934.c10f6055f2a043ca2e29016cb2cf5f21e8fc9e28.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Yf7lS6y0pxIotcuGoPM9IzYabbH/VNe5bxvt72Oqhw7FO2vd0WKy3VLVYN+rjc3Q0nHxjd6JZbVQ+Iq7RD0AAg==","shasum":"7110c960dd022cfc0af7068306d141247b0dbc6d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.1-canary.934.c10f6055f2a043ca2e29016cb2cf5f21e8fc9e28.0.tgz","fileCount":798,"unpackedSize":1678459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlgLfCRA9TVsSAnZWagAAtDsP/AoBP3cxMVBcs1FnVBEs\nETar1jagcSr9GGgPyHhi/VnRIOLjXV+DesYuco/+xm0Tl449n19BBYvAajSH\n4rRmVPmxdYPJWetcbDWLn8dH7XP0A8Du3XZIOeCOObsZjd477UbM40JXKlFH\n/j5vZOUzjetz+XDgypMt7HTr1hkbrVr9oe+WIeBpYLfwBYa1hRdNmN4CdSeI\nNNCLcbGbXJ+gcZ6B8bzTjee5l20tzxOpYo/xcsmHXVF0PqpOBse+r5y8cqs4\nIaCrEvKymJGICQFoiAvknCujRECyTJx3vdzjZHNlrUfK1GDbqrxJDE4hqP9j\nzsyT6QuTWtR8XI1qmrPXirBeE/C5uOQ5pnXFKJhqQeBb/CTwJTF1oVr6SFJF\niIZU1Mzsz4EZdvVlyeT99FAHkO+bIjqKOUNGAVvnYVI9w/U6iGg8YLLfSlNG\nfYWkW4sjUFiH8VtVWc5NGY0M93epd/6w00/PbxD3UePRCXc2XVCo6nezZyK8\nlf9jP6G0BuBXyQmTj5UC+LZAB9ViQ0PP9yr/y3DLVrrFsC4rQ4dLaTJv3WUv\nIx58L1qqPl68EthHzszdngT6m4ju+pWtuUpafV+CiAg1lNfw74Z4JHZKEoW4\nrG1cxV4emHA1dR7PcQN1VYG9yiwjIepT8btuPAD6eTMyP74IjM8M4T6UTDhy\nM6sW\r\n=8T0l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQN26y5FOEE4WTnOnA68ay59Jklz/ejheKNNATDbPwtAiBp3Odp+xDjtWTrcPMkFbgDZO3AMBhUprGYaiBrQ0f7Dw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.1-canary.934.c10f6055f2a043ca2e29016cb2cf5f21e8fc9e28.0_1637221087340_0.8973493071202958"},"_hasShrinkwrap":false},"1.64.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0":{"name":"@sberdevices/plasma-ui","version":"1.64.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0","@sberdevices/plasma-icons":"1.52.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0","@sberdevices/plasma-sb-utils":"0.35.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"abe7d877f2ddb53db9513ad34175ea0950d223db","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-MUJZgLzr6DA6O07rOtHqUtVDQu9DsFdPQxbupYhvPINyl8LiQLfZwIAoWC5+f7ejn9YVpmnQlbmxGQ8Is1hv6A==","shasum":"8398847c205a202a899ddb2d09f1be35f9f69955","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0.tgz","fileCount":798,"unpackedSize":1672987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlhzHCRA9TVsSAnZWagAAGYsP/iHuvl8BDNTwrLdhyU1p\niuirfosHaYT0HPiTAGvON2leevgK3nMdXDytKnHS5bZTpk5hT++bkeA+/ynS\nBAd/5gDMQs56BubXpw8dBVbWfOZREbx4aFxeOA4uVS/76tyRYANIWNOyfYal\naDkThNBOWnabJLgJja3NY5kdliHpMmVT0f4Hw5lwIgGLwkBqC9VisTZWEzCE\nbDg1EtBmwUk/s1wSNjhp8W3DUqt3DmyIGqTcCJfvEhFT7rrcDmUy5N0NXhQP\nhg++oWrv6FuG/5xaXPUWAGV2lzKzeOn6Mat9es3lsm7E/0DyxOM6vKLzzom3\nBODjPnJkAcQyvs2cKxXtCxEcLmmcHCyRMPeLWzGR7lZx6mIfw0jUqrc/rZv2\nHETjY/1lm2JCWNlOO9lR+E+4R3O5cL5Y5uIWDXY3Z2dbI1tMukoTHta5JrjQ\nykjJSJFntCUppSfTKAK1C7hW6FVNaJNRGZasVofe0Tqp1/iIAPrhDgiQM4zN\nbWUDAc0xDaYha5GS/GDlVe6hvmK/tEN7HKi4i2Q36vNVkPgmSFZMUZzuRFZX\n7T8CyAooCIju/j/8FsGD8dkf61weCvNcV8+7+y1V4+Njo8tP8EwvkzHIgT5o\nDCngwvfK1yLue7VDfwHLNL2Bg2yQVowWzjBvOsu1Vd3ou+7B0AFp4KKdwk/z\nJV+3\r\n=bPiP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfV/f5TCwJn5wDmzDW5WtddGSrUO2Hk+pnW9VLFaSPwAiATyicTfAwJ84VWklSGazCjffqtUs1A1eTOq92xQQ2PhA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0_1637227719480_0.7307577323804504"},"_hasShrinkwrap":false},"1.65.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-yQdPAlaEJzcXDyexn6b2LdFf5UttgAUbFuaLNb5mW+fw6f2kIpNrBSu2yfa4PPLY6VKQp7dD4YEWvbVZT/5PCQ==","shasum":"e343890437bb189bea0bc7aeca9f17873f731268","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0.tgz","fileCount":798,"unpackedSize":1672933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhli1eCRA9TVsSAnZWagAAkAgP/iNwlgrInSF/ixDIfY9Q\nW6b+RBw8aJ2dLrEo4xvbu8ltsJY6L1gnZ/++YrgxlagS5g7I0PiilnBdpLRX\nLH/Cy/VhKIe1py7DGwGcRbOmALse9zIQi6QgHne/fDjlmzHAgkGRq7FMbd/r\nAC/956E7Gg0NsTXaVnM3Jz5vadyuP95A2KJkFZhYGjDXzzL0D9iWqUctiSb8\nELiqYU6PNWBYnrVRVeAQPpveUbcCdYvnMGeRIQCJrs7bFXkkc+LH6lCpQC9Z\ndtib9jCUyy/jl1gepuoL03Oyitpwx867JFBE7yUeSjmDXy06bm8wWVgHHYv5\nkD8bsv58MWBP40avJ7zl/mKPDFxWM12VnBJZCkQ2rzAVFoPM1tjX4x5YEH26\nMmaG0DNj97ckqRM3yZHZ4K9bYgjkSskupXzzRWHgL5q+j/9Hi3fM/fDW5n6Z\nX2Au1eXWexkxANGharH4Oq/WvT2JOaZYryJjIEdNREtX90lP9SdccKgZb6aa\nCRZ6azfmXGCOAyoEg8+cc+To5w463oBWVPCO+v/wp9lr58S1OrIJyyisA3jR\nSMZrdlQ9tipfqUG0ajlp09JL7SH+jJ+ahWyXM/M+qPvvC0d2Dsz0/qS0CYnn\ndO00pyw2AIdN/qCjeLxIvlIYzE9liOoeHpHwFQzsyBeTnh+dvuRrVcJ6hi2P\nxHZA\r\n=szIX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYQtog5wMz2ukk6P26d12Sw7kZT3eSLcpAhMuXdbM8EAIgWVXGzTSEzJ0liWs6dWncSGYnBA0VaR972VrnK9Yl63E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0_1637231966240_0.6325755829108068"},"_hasShrinkwrap":false},"1.65.0-canary.930.fc23aeee4a650bf7d78871c02de8dcec6b7da1be.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.930.fc23aeee4a650bf7d78871c02de8dcec6b7da1be.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.0","@sberdevices/plasma-sb-utils":"0.35.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fc23aeee4a650bf7d78871c02de8dcec6b7da1be","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.930.fc23aeee4a650bf7d78871c02de8dcec6b7da1be.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-f9lQvXxzXHK4YV0fNuG8cHtlj8VOqX0v3KvGmvQWnhxSV4YyucHBxUOTt+I/vfYb9tIdeMgtaAcKAM6RI6EIsQ==","shasum":"a1fe7e0531d37292421c2180d86a4286cc3037f2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.930.fc23aeee4a650bf7d78871c02de8dcec6b7da1be.0.tgz","fileCount":798,"unpackedSize":1676652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhli+ZCRA9TVsSAnZWagAAgxIP/jkUCxVlPfmbllRl8V/s\n5ckkya8TnTlnwreIIElDbHl717sVqdpKztcyhBGQj2Dsq93ZtZY0tSzhimVf\nEHjlbC++/wJ/wNW9v9DubX2xPu537s2DqD+rUtlL5jN87Spfp3LVjIeHzDGP\nh6EtjR1s1uve+pELpx5+qzyc8SI/yH60IkQeAS5rxNNqLzVYXt816525WIll\nevzbnU/cNDR0QP+CLEleZdf+2OnzgjxMdZGeMYbRuBwmm/N3+vbwY7T9NNfU\nxejlIXyzMbS8hgJNFResAU9c8/QRYWrfJzfiDORJehSKgVObftN1Z0OVbGet\nw9kcMMXLWB0XwS/rKp9IkO6ES2nTYYY5mUvsT2nH2EZakulSq7LLv1y5XeHj\naxdiF0+DoHpmLe1f37aBX29Gk2iur/n1YBfSVhRrodMAh/5qme4pBJMkeRsa\nxPHh5V1AOb1SeWYaT4iiIT8SfNbKbvy8WTlOPhZIDIm2mbBG9/ZAyUdwOgGK\nu4LirDXpeZYM3oAiQ/8kKcdfBiwg7XT6Q8kMl6yXLANylDeFhwhDoz+Q+itZ\n8lRel96/3I0MVD7VfOMrZsXuQy/sYaD4ZDoNffogswuNkqeM9LIkVemw/MGC\nEmePIGI1vV1ngclJbSf5B722Y/P6BaBtC2x8XOhArKEQdL5Wq7+sMueHBWiH\ntDNJ\r\n=QAEn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6l5ds9yw6UJdMIGT7HUVF5hfzRXkfjqOAc682RB10jAiEAt++JAOeyGLoLRlDhB799k4ymUD0EUR4Aj0SS6zOgg9Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.930.fc23aeee4a650bf7d78871c02de8dcec6b7da1be.0_1637232537099_0.2842083853180304"},"_hasShrinkwrap":false},"1.65.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0","@sberdevices/plasma-sb-utils":"0.36.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5da1a1ac02a44c82150e89b2aba7d87bb09a1af3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-cIVfANqyyk8TTl00ho5mpHJiOjFH5cJdNcjkXr/7TgqGrQl8/khbAzQDwO9PHKz7BdmcV9EoUSGr6X23S2ASUg==","shasum":"f9bc3af835c24fc84c8c8c5d1e23d9fac8a963f0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0.tgz","fileCount":798,"unpackedSize":1672933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhljCCCRA9TVsSAnZWagAA104P/2gO2KPg4w9nDuNWeM4V\n63/Ll2wl5S4H3n6bVqpNZPoTEC231napUdr1zkD4MT/Dadzr5lcvNdDIGeGY\nEJbYQ2JWJVJRW5jAzr0Jn38HHDJ6bxpayQi+v3mwCySmtseU2piVQrCensjQ\n6aBN2kTOvikj+BMG/5ze42w/dbtS0qs48WWP7L2Ifyi1E+6XnnyQ4/3CjRv4\nKLQ+S6Wa58na1vTMW2cgIKlFm52qf0sHYnC9HP7zy1lwzhT6/cd15/G+Xfkr\n94TUlpfofXWKSk9Co4+2aCrBybIrGUDebj74goqhNDpmScp2lUPOlNv1/Up4\nfn8t+qeDKnCiOO7R6Vy1+nVrXToGHBaBiwzBc9MRKC11+ilCWk4YlSBTMQcw\nvu6ejuoCZnV4bhJf4EpMbPIB8PNAQJdA3RBphlZw72KBLX+cDRSSpE8Ltmyy\nLjwaC/Io8XqlAPeaQPFn9D2lxMTF+4ARHhnp6XNvs8RVk9N/yH1uNH+Ki/7e\nyvL+OfjlAhRCY3//RT99itvhHhH9gAl+hNJe85noWiGuM1zbV990sM151Mtj\nzBd4LBf/TgveltmKCNL1yGyU02Ww+TJo401sZVE+79iyLY4vyKeDejJVs3s7\nkqXvJ/2goPb7IaFFTvvNuKsL99QYH7GvTJJVphPKAhT8/B3tDKGGMTf5CGen\nmeYy\r\n=vo1s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuR3qA1irlYCJaCUcLCHDsDghcZmD14Wj4JTHz+XIacgIhANnKf+znecZRAF2XlXMtUwhoUX1tQOttQThsRJUfcGZf"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0_1637232769962_0.998565503678279"},"_hasShrinkwrap":false},"1.65.0":{"name":"@sberdevices/plasma-ui","version":"1.65.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.53.0","@sberdevices/plasma-sb-utils":"0.36.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"635a2b8d29585a689478fb9d5f57ddf7e566ae2a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-TlVx2tT3zF4XRlFhD7aMWWusAD3FSK4ydizhvVpObr8RGV87nITMuhaDbd6+cHBstV9Q1TaOYbUsEOfKzEuEhQ==","shasum":"803f5d46a1319a9cfd40c3e8a9b34ebb654f4990","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.0.tgz","fileCount":798,"unpackedSize":1672966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlklVCRA9TVsSAnZWagAAuSUP/0DCS5hq8Fm0sY4ZaEGR\nqsSobu11JG9qgHR4uANW+4o8+LKBIeffP2yo942dfxPw0by1XrEoxEpuBkNu\nExEYXkG9J672BlR0Q2tHtJL+q7nnfUTM4zojjJ8Szzjkasx0vIIuts0XeaKk\nmtn8fZnDxv9q3PBQ+IY86A7wW1QZuwU9FLr0k2XSvFMX31SscQVHXhgq4l6Z\ne19xMMhFirW7938/4Nj817Tq4Q/O7qy7BbcQP+vF6JOr2w7jscDQJYbEU0e1\nNGdwfpnc664EF+yktotIPBRmhC333f8qovRX4cp4mbWpk8PU6ffYOruVGVyA\n+rJOp3jqkEEfTOZlmwlSmOEXk59tO6OkBx2pmRBgY/uF5WMWqb37A+Eu91/4\nBFoi8OynKPp5BWdGs3+CocPaFI79dto/d1xxTMoWCMnSk3bhFokKvOg3VHGw\n/Md+sl6RH667EVP2qm6nd/hSgYz8Sc16iNVgzyl7VpYR9uN/2YrrXerGq7aA\nmruFWCuR9hXQJRSUcCVtHn0kmRUPykmzh+azXZDvrvDu18zCTwKGL8cjWxkO\nfw+htUZ1nliUmtDbOutK5PQOZNlvo7d1xO3dMKKAMfOQvzc92q99qCGSBce5\nXxbmzbUo8sZJGXWq08gd04MstD2/gdpxMBJNnp3P113TDA+/XAJ++iL6dYl4\ncE0k\r\n=gaCj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAih1dwj+sNRgHloRDAbRNjePpOoO4CT0JNbCD1VUY7LAiBBCahp06VEdZ+UpafdpsCWhDTyWz3s7jcKWoU374IiXw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.0_1637239125259_0.4761154332173141"},"_hasShrinkwrap":false},"1.64.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0":{"name":"@sberdevices/plasma-ui","version":"1.64.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0","@sberdevices/plasma-sb-utils":"0.35.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-tr+v6gzpvNVXeDpxEhH+5tsMi87Zou3LrVwM9gzvU8OtMHYP7hQN1tBSuAZShNrdfOGMhsNF+utf+7mqGaTIfQ==","shasum":"0b98384a0ed8cec0bf9cba5fa614175fecded2ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0.tgz","fileCount":798,"unpackedSize":1672933,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC29PjUojmx5PP6kvh7kJfs0L7tvQZEC7tR3vMrqkqkKAIhANotgOysCCglctK96ARgSKkb17VTrBqlLknlLwJ+hUog"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0_1637239287576_0.028910792627167448"},"_hasShrinkwrap":false},"1.64.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0":{"name":"@sberdevices/plasma-ui","version":"1.64.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.36.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.52.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0","@sberdevices/plasma-sb-utils":"0.35.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5d479bbe59fef3082ab5ed243ee369581a24835a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.64.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-diy6/MNMLv2dSoOmAdZup8Hakv3as/s1BTJmJxc1v1oh1rcifssU2aaiJy+yPnWZD0DJ1xEqN0OMRB6E/EOTkw==","shasum":"d999c61657162662f126ff3399d55e260c055925","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.64.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0.tgz","fileCount":798,"unpackedSize":1672933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlkufCRA9TVsSAnZWagAAWwsP/3IEQZJo0LR1HBg19J+8\njFzuemKcpAXsXILffRMSpQTZfs+2LXUg2GbMxo2wEF/Nf98fqhMApAIxkq8x\nCIjWHBdya+U4vs+bzs3Zx2GHDMCKN3M2T9G/8e+57OpcbKKKakVbG2E62VWq\nDRYYZMvwyMNOgqf3qvtJBUpE/cTtcJNvdkMMSia4Y4Pv2pn0fFdixxEGTAyi\noUnqR2lJUgfQO98gXENlbmXH/MftpTfywko47u5FDStLrO8Dx/juNkHCotH7\nMsZuU9/OSGtsRBzF4Gt2rl7RqofZGdw47PIuDlyLocjJmw03HCJ+kyEJOA7y\n5MQncI4W3FOP/SI5ZsIeRnr/rMUZZY/p21CUgycHyYpxPcDleiH/l2goAgnz\nEnrs7YskNzblVEjqOmRSQWXDa8ttWGTjkd5LfzBuKYL7yFfLmvdE+dqRTBCr\nfym5WUWozt3O2ZtqbH2YJoJ6lq4V1MiZDR/knmrMboF8494MvRuckdvsvnye\nrb1GWzSM+JQBPtFHLqrgiaxV7L1wFfpjCAfJmNi9bLdQ1TPsupEPX0Y7Y1XW\nxb3hryAeOMjGHF1tPYZ3rQGpwW1SxCvyCWiXPda3TThB7Dx4iBHwDhuKrHyx\nwddkFYCNmhyNfdAteRNKQxjhsc4GwuhIBHvq69/C+HDwzhLPj+rdUEEXLe2q\nbo9r\r\n=5CFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrGwbuHET9L7e9eT4CwfwXP1MuUPu+UulHbHQ4Tb/jqAIgRbc9eXQeUuQQNeEP+8UEG/YaEJ0tIEsSZen7VXt1mW4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.64.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0_1637239711522_0.11052754796264685"},"_hasShrinkwrap":false},"1.65.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0":{"name":"@sberdevices/plasma-ui","version":"1.65.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0","@sberdevices/plasma-icons":"1.53.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0","@sberdevices/plasma-sb-utils":"0.36.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"241708dd1525963a7a979b39ca87a8274ba73503","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Y5771d0XfTwgjmUXEN/VEgT5Kbpgi7rixuwsn0hdiatGGKj25tAt85j3MhfYEhIdLn9gcCa5y/cAZnD/qjcKMw==","shasum":"aa71ef9295dba95489862bf9e6bea35fc29ee7f2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0.tgz","fileCount":798,"unpackedSize":1673236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl51uCRA9TVsSAnZWagAADg4P/00XO8RJ85p1AezfTZ9o\nwfAqbgMZwFUMRCRcWQwVAYJOtjQwm3F3ie3u/HfpCLK1By32+ZiOvQ2n8yle\nuNix1ZVgH2OXPu5adE6i0bSdFnpi2/7WbBXCawyN2vTFNkLKzYi/4NRhPvCM\nOBsyxFjZa+PqRH4A1MCM91DSSZNxjk0hkXoGJgh8rjp5HTNRrM+FcieqtUvb\nqvqsNrQl+BwYMGt7ETKPJzt755CO275+ZoOBcWoq8YCBFC+XnyrTWYrKEF9C\n9bkN1bD2MQL+8zO6Xptf2MbhpXQ5r1v4q1zJm9YefNvQpe+rbp9UT09nsPSI\nWjC66jJ04rQf6/Msog6Etw59IdtFBlowqwi5WO8eQOVNrQrZKgFUCZTTYlCp\niSKbMv3FSG5W/nNlNpBPZbJPIq4SE5jAmvmgX3XveEtFU8XezvXD8mnYZ9h1\nL2Yo5d+8n3nI86Rxqw6urCfL+2j9MINArmS4m6qSnttjacYLNQmRu2oW8MHV\n637PlH18jnemEKatEzKicWcIosRYqiQMEIj60lfY2q4V9riUiU75VgN1HW5I\nqOjuPsmTI7xnHQmhp/ol7WXJcpxt4No8zgqVjUb5TbvkR/AhsIDQWJErV99H\nXQwZCVL888TbVSiVFXvmq4mH0vub92m2kP2NvQEYlCaZphPF75yFQxmeaD7O\nZjCE\r\n=wnzC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICD7EA5ViOlD1nB5uLWKLusqc2S5vJKJEAZNPkQ0z6L2AiBEnAvVU7PQIVwVVkcEbJs1n0Q5rFzuk39JO/gwPKLF7w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0_1637326190202_0.03914251025764415"},"_hasShrinkwrap":false},"1.66.0-canary.919.3516630b9296ab917e3e26b0f7012141f9402077.0":{"name":"@sberdevices/plasma-ui","version":"1.66.0-canary.919.3516630b9296ab917e3e26b0f7012141f9402077.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.54.0-canary.919.3516630b9296ab917e3e26b0f7012141f9402077.0","@sberdevices/plasma-sb-utils":"0.36.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3516630b9296ab917e3e26b0f7012141f9402077","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.66.0-canary.919.3516630b9296ab917e3e26b0f7012141f9402077.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-EoWcvkzpEYIpZPRn1bUKtp776ocQm4OlwfaiJiGlCn0/fx5gHkSrcIYFQ4EfpxSAkCNxxg00KNADiJeYdinK7w==","shasum":"e4977d59ebef7b0b9d13f25ce51218ed0b852aac","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.66.0-canary.919.3516630b9296ab917e3e26b0f7012141f9402077.0.tgz","fileCount":798,"unpackedSize":1673074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl6ERCRA9TVsSAnZWagAAcqEP+QBq2w1nsBUBi5OPPRuH\nYNXzGrIq8cR0IO8NFdzvDclWpEt7hWUKUyZXb6Kj9S+Q1KK6hFmUMjiDoawJ\n5tf1466vgAaoHt6N8/r9YvINpatoz/LwTB4ocuj688j9W+tnRZrIe3J0vWB9\n5/ncIA8tePuEF8CE43IYB8oBhwHT8h5H4m6d79kIaPfguTZzOwKSvmjpz3Bb\nf8QDHcMNZXbG1LijgI7Loc84QqO6bBoQtTRUC9rLrxHFrYHmuQU2cutS3SYc\n4yIr3L/qTWUFvhQ2798OdrsIvnzaQOK45uO6wG1FMsRMxSimVYdZqV8su44f\nsfqen6mslvXHsUQ+WnnV4frxVsWLbh9FHqhpYMVFoKUSCrqndGvDFynKb6/Z\niDkepC0WbaXMg84quNLAq+R28/qwQuyMhZSI2jpF9rve70OQtjdNARxyaY3V\nQF/GxQj1tPi1tJNkCasOL0yptAk9JmFERjz/WbYHj+C0fz9O0UP+YUGvV5l/\njd5if26KFpOXYIptQ4lpzrdP4iaotMn1jww0MbY5pqw6yeUWCTXYQNpLSsMp\nS47c55WiuIU2QjDgIJGwd7lOw9z+pWl1doaAZ7y8h0dJHdgA1JFO0XyXz1cz\ntG+0brQmBb3RyVEcc28qr/4m5v77Mu3VYbmukM3KKwXDkgZiYuV0Kd6P4xOP\noYMW\r\n=IoCg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDibeRR1A4XwmQCjY5djQaFgj/XGYtM/9nBZ6HHRqsXywIhALRZdQR9DxXF748XESpDZe/QvZ1cUAnWS/aKVkGIIFAt"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.66.0-canary.919.3516630b9296ab917e3e26b0f7012141f9402077.0_1637327121622_0.4278592650551507"},"_hasShrinkwrap":false},"1.65.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0":{"name":"@sberdevices/plasma-ui","version":"1.65.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0","@sberdevices/plasma-icons":"1.53.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0","@sberdevices/plasma-sb-utils":"0.36.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d612f22448704c3dfdabe5f38ba533b99c25d421","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.65.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-7IjPL5DIRcyz7/5ITShdsspLuK3/iInnf28R8S1UYuSM30bvYPUyPZ3HR/zn/1ZAdaCyHqyKwMywwr/M84EjFw==","shasum":"009f1bf902364c39c3f62453ca5991f1ae4f9314","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.65.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0.tgz","fileCount":798,"unpackedSize":1673236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl8VtCRA9TVsSAnZWagAAOMEP/RJ11BpoFYwMPDwCDb0q\ngY31WQvkgT2oAu+G0RxXjVUwIhLfm3rPBBKa8LhEVEQmgfxCeVLSPhEWHSlz\noGggqGZL9MjGvn45hdH9+CcwOHWVtsQeqY2Q1WNu1UJRw6Ed0ceUuI+qyACJ\nn6LPlt7cVRRWOi5falX73lpJRResJccZ36IMa1oLkSb7O6Vkn0Syz8l5+SkU\nmnzNQlfVKA3wCeOXoYi1Ic0gBL5rSSqD2/svp+gp2ycLtmEgzBmOSi0l+hQB\nSYn+i438doeCE3qWwRB2fyzk9RrwNuNEV/sDkCqlWs3DpeGSGmNJ77Y+MExQ\n28hRpwTRr+PiPmeWeHkRPWJMkec6q1C8DtTA3RfT86+O9NhDpt5W7RkTqHIM\nS8OuYI2RzMoFRQIJPvv30/55ESQ2fRuPvT9bUNLhJsXhseHTc+cWmgAO4WMg\nDiA1qZ1pe9cnFCqyGsh1yXjcmeEeDsCAr1tuVZ2ujOeCw+YuX03O2Igkezqh\n047Ujoih5y+ghwOBSYC4nXWNfarnvV8qPqZ/eGYmmf04+6v0Dk2sDZgRPXu1\nHa58TaikGQoON3MF7AIu3OOlMDioP4opaKrEZLX841Zrj4DEv0abCxjbqIHo\nuM5BU4HjVI0nHyvITtw0xym39wtW+cGEgOOzWbQC2NOMF0DAkiXmr9Nim0bk\nlE2n\r\n=h0Et\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDt8W3+HwMoQf/qgifWYAwetLXkavsjnSTegDhJiJgM0AiAPRoQJTdKj9qRKHSw9Ruz3+3IqEPvypnbktrHsW3Q3+A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.65.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0_1637336429466_0.366914392679202"},"_hasShrinkwrap":false},"1.66.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0":{"name":"@sberdevices/plasma-ui","version":"1.66.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.54.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0","@sberdevices/plasma-sb-utils":"0.37.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fbb489ef2e28161e565bf7a2c1c65515dd3d165c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.66.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-d9o2dyTebslfS7cgtO4kTuZ168D9dyUDgZvwJg6Q/1w0btilcuWcYBfAHbK22nj07p01vu+08XqB8pRTNwHdOw==","shasum":"046cb95b68a090ed63b821d74f520440db07b66d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.66.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0.tgz","fileCount":798,"unpackedSize":1673182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9AKCRA9TVsSAnZWagAAtKoQAIfNRmmkWsWiGqGwAdD8\n6VPD2efrkK6jhIVq725sYNl38AkWae5xa9/yO8o/RvxP08N2tYULaV8CQStx\ncJCRHuw3mGJbayj/091j9zlSZUmDXe+CW6DboXG/5VqIUPveq+sAo1NFcJFn\n/eX822YKGP5ZJ2pot9275wMPonpiDT2dgNzhD7aa+vBrKvR6HpiJC/P2qB0K\nmz5fEYWFDxhZOxupbZ9nFrzuIW1/8MW2WX7imsLupAb5e1Sibl/VizGPyTJa\nSa/8GeLjzFz1QRvqTCCTEOZ6wn/NRtQ8kMwoUhjHQKvKHm2h+cA0J4XunXQM\nEyswXA/w/4kYlt0Azle7xPu/ZzbZexazbVAgyLPqlW4cU56VSWDsBYHuPb2m\n3/ycryiaGWi5e5Z8+c8Noy4AaEZ1HUZV8V3KKOgBGZyVxSc3uOBaSDAlVVzk\n3/SmN0nlIII00tyNnQdr5bT5jMh/A8f+3YWDBDCvsarDeKg7bY7jPCgrSma5\nzgsWp0dvQne8l1w2ovlJBRexFW3371CCyYKTPXDsfT83z3XDRgwM/S6s2ukb\n27frrUwdUcDW+2IwTVPWpiycsEJFhGqkISyLjGHJCQZFXmVIrcdAjph6P4yi\nv6i+0MljsL5h2rMaKapTj9OQhjFC04iLA4yxf0xXtBhl4hX0nIXsoDpOWQEG\nhRQx\r\n=EoMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaKWQhyu0RkEYd4PsTWl88qFxk1t/d2IvAhimbmggg+AIgaccgP0ni9m0kcehOVhda3rZdhthTCuXS3xcCS1i4vkI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.66.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0_1637339146276_0.5135884828132735"},"_hasShrinkwrap":false},"1.66.0-canary.919.963ad92621e1a89f57cd1536ee8b43bf55f3051b.0":{"name":"@sberdevices/plasma-ui","version":"1.66.0-canary.919.963ad92621e1a89f57cd1536ee8b43bf55f3051b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.54.0-canary.919.963ad92621e1a89f57cd1536ee8b43bf55f3051b.0","@sberdevices/plasma-sb-utils":"0.36.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"963ad92621e1a89f57cd1536ee8b43bf55f3051b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.66.0-canary.919.963ad92621e1a89f57cd1536ee8b43bf55f3051b.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-qXKpjjreYghJGyD2ixlLiY7Ztaol8tvWlIVX3k2rF0IH3oyb0oSUOpY3w21GJoCTWxVYum0BccabahKbngqHuQ==","shasum":"c421cb9b2656ac529fdaa81948823d6644409343","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.66.0-canary.919.963ad92621e1a89f57cd1536ee8b43bf55f3051b.0.tgz","fileCount":798,"unpackedSize":1673074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmynNCRA9TVsSAnZWagAAdx4P/2iDNVpLB5DfJiwypsgD\ntbhll6szHPyV3qCxCcmHRK66ef3g+YQQhjDtlD3gdKCmVMCNW8mRKmltQGvO\nFR2PGrWzhD8nLxKaE7nzUdU7ktB8mdMTtkOk1hYIKoevlr4GrvyZ/VNZnjha\nsufyOoBT4LHBCkFeFfr+ynLtvRq5YwlsSyTA54Z4O4VY6J/LxpJm0MfplmO3\n4a5ybRruv3gN3YXBPxvPbNCkHAOqxnRtWNuEzdpOPzlIE3fqwsta3v10yf8k\nISz66KntaMlHvYzHGrnvGADvsvcEj1WDdLwpo7Sl94dqEqFdr/Hz0l1zfhh2\n2SOMbMnkYWUQe26YUiBa7mbBrEqZamgk3cydZxshJy75gee2U3vPGq48txUI\nF37Wst2H0FMJmanCHAHX1TGJNYePQdiT1H4bcD00F38wsmBml4KGg5JCUZL1\n1SPb0baRBs8Fs0Otm1pFjuyJjCM9yE9IDbCpJVKyz31RAngkiKWMlIkWSADL\n6Uqq9nr9p6MA5+Gid7zLDxCI3HZh4EIV97hjhaSM3tpVODVI8OKr03Xq+MuT\nLnznCaDHcL5M6NV7yE3lP3nzeIMSadQeq8Fd5Ncizg+qwEAoRfCQTUf7GXTg\nTBK1ovRtFvDWfE7aTYyHFgKMIQyPBLy7vL4e94aaia9X9q+EPYEm45w6PiaU\n1tRL\r\n=TOmJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX4saQ/Monop/GMliEaWiJj0LWQXRPZ20cg9FFQ/NmzQIgPbd0ucTS+Ttb123k/i7UKTpvKvudbTgGguSuwTKnv9Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.66.0-canary.919.963ad92621e1a89f57cd1536ee8b43bf55f3051b.0_1637558733340_0.5181501007113589"},"_hasShrinkwrap":false},"1.66.0":{"name":"@sberdevices/plasma-ui","version":"1.66.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.37.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.54.0","@sberdevices/plasma-sb-utils":"0.36.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9ee34d6027edd536352b73bdaf32f1a6105be55","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.66.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-CPf5UR+UQ6776dZMSnc1ErsihLYtsFYYs7S++qB4te5eZsYARgHI2cSS/Ijv6bmZaL0tChG9lqhGS9gx8hQ/qQ==","shasum":"94104406e4586d2e40d2c93c50a1c374059cd514","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.66.0.tgz","fileCount":798,"unpackedSize":1672966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9a8Ag58SwqqpNUzQ31XMVPeWz6RVUHqJWw5RVIq9ftAiAoz6vgLgqdUK4zqC8Nq5DUNB4dbRrL1AFgxQDxUdosyQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.66.0_1637560680264_0.3061729713324004"},"_hasShrinkwrap":false},"1.67.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0":{"name":"@sberdevices/plasma-ui","version":"1.67.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0","@sberdevices/plasma-sb-utils":"0.37.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2bf658aaa122680ae09244326cb31b8c6c290017","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-CWHL9VBJwFgzIgmsVsdVwVe1YD9imAV7SrV5J6F6RIxaQRmReouxMGCbQ2GplxN+RHus6wYsygaxZUJT/vCyIg==","shasum":"1683308915652bca177cd9dd776d68a60cb3b7d6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0.tgz","fileCount":804,"unpackedSize":1673181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm6xeCRA9TVsSAnZWagAAkSAQAICN4+IvfRqM5XII3pFz\nXwKKfPBGVSEtXyV4gxQq98V9bmYcvGc0klrFFXbVdg2SWSDni62JGjiI/JOt\nnvZNvjDmaNsy2y2PTsXlC8o1RyICSvwemo/MRUnhafjOJtCoBvTf2bIe84r8\nTW+DfdthC7l8SLdRo1c7ZzLBouzyfiEoYvgn2pw2y3vd+61fyIjHL1BN9/j6\nF7c/gMyYbz3aQii/RoGcHbPehHzVe16KIh8OWgAQ1DTDTkcE9vkASTmeCKyr\nefETf8rCz/JxlH5JBETI647ypETC7rNDHHrJMARVm/DY4buyla7cc9F6ndbx\nYj/7LT9nDO2oo1XTb98ebLSFd2wYq/x113Ww5oXunWdeJxf0+YPFsGw44q52\ntEGp2BKlAxEr5BdK8cpi+raOrICDKRHiuOan9aTl1vN21VPJyp4vxK0tiw1e\nPrev8OTGu9Et0Yp+OBGNb4nhKHpZ/IgseVu+6mb27UhX2DR5l2QdQm+xXbyl\nocBDmwNYVfuiiQZCrvGCOowIwwHgTv6lwa0ZRhb/ibakLz9tWt8SXzSzm22R\ncDtjhXD8vqOEP+Gd29GGgi0Y91QOtiisQGd4+EbKp6SMW7stEuZ8MmrIF7nF\nMuIcM4AqjAtY8hkCOAzjP0kZKAgumD+uf1VVI+aEIOpk0n/XiJRX3cgeh/bz\nf/EK\r\n=OTh8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnMJak+FSTQ8x/sqL0KK8tXhyfv3VaYeultqvqdZ1+9AiEAq+Bq1z3P/dclVg00OXQygfLNTfWHw1ubiSvOQEOIjoQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0_1637592158446_0.7348434310643452"},"_hasShrinkwrap":false},"1.67.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0":{"name":"@sberdevices/plasma-ui","version":"1.67.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0","@sberdevices/plasma-sb-utils":"0.37.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"459a775fc50f680d8a0ab993db96255dffadfee7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-lTp5KWgmadLE/goGNsHZ8KHAmRK+aCwJZ9EEufrhsuGOVEWpiNAXVUE7D7VuzK3owhT0Ly7tkE2hBmZtcBekaw==","shasum":"fc71cd748a88916ef00ef581bb7088d82cfea6c2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0.tgz","fileCount":804,"unpackedSize":1675412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm62iCRA9TVsSAnZWagAAhg4P+gO4mkuR/59nBCt5849I\nNoDRKjmfX1926rCLrAvAO9Aubf9p8xDiulaz8WGXQvK/WswvyH7Dcw+6aPNe\nSYrPMmtU/6UHHWy+5KoAdy+EPn4Y5LM8WsJBhfQ7/eX0ms6ER9l9iRxqxy1m\nl7lqvX0NKs7WHqMlRrkwspKkirX/TlXX3pPeWzIEDN1FI2+VEOXxp/I3xGIk\n0kIaTgIWHfYzncOtN2yxuOo1AxjPRykjc01KbOXufHDTFSg1tL49zMNRuZvc\nh9768cWaswtXtp3Kd3zPeoYZq/s4DZBGYEEI3Id5BqRVBDcelGvJeJO+lHXF\ngYFVrCbq3SiYFFxNoyXoAW+8XAcgM56oKgAH6GYOV2IDxm7K/JLBmdaNR27L\nRv95L3sF1vQP2ry3CY2IL+c3CNKvanyVkgvLiRB6mREP97l86FJXXOHd0h9A\nMYVITg/vlDv82mormGI0aJURny9Jl3K1fxCXwm1uVGtzsuPw1+8C37BMestv\nmZEGq+TrTgp9JYJbu0xa27qS/FYgV8Bvcufd0M1Ag3kXqZXqqGk65Wnj4kSu\ncf3fiq6quoqcc2ych5EUxONmbn4ugHTxzJe/RUwEoG0/klv53uhI2O4VprJO\nAYyeazaBlAipQvHXXDwWZ28nBGDqyHpXN1OFHWgAg0IGoeMcV25vA7pK/zdf\nyCra\r\n=vGgU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzByXs5woWQQTcmG44BDo/eZVYdAewNqczO8XuEiJW4wIgSC99YndWrBktqWO+Ju4c8gpI5UOMhgwBWRnS5s+jy0U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0_1637592482621_0.4451357236424469"},"_hasShrinkwrap":false},"1.67.0":{"name":"@sberdevices/plasma-ui","version":"1.67.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.0","@sberdevices/plasma-sb-utils":"0.37.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"85c411c1c72e89ec4ab941d10ddb0dd845be3d6d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-/k27z5U+YO05ikU1gdMrrbIzxDa1SpFEIsa71toqRXnYc7hTll7QRZY1ieYKDMD0+tGLLgwtOjNw97SXFIh+RA==","shasum":"7e64bc51e6a75b5e8e1e1b061e7cf5c1ec309a51","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.0.tgz","fileCount":804,"unpackedSize":1673429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm7brCRA9TVsSAnZWagAA/bMP/1AscvWsPbVoTfXvIVgH\na4wZLBQUA/u7twZA3WzDxnhqT7f4/BM42G72v6H19tkMutEIHs0sP/FVpyl0\nPl6kVeQAM2LoM3rUJoWpS9oe/7OFQFS+Bm5lZudsfmao07upG7YLT3Se99Kt\nRW5QK/UWMBSWuDLB6AzWQzxMN8gf9OgtsT9O/Grp67zBnrsdrQrBiKbc9JtY\nFIZyTkFSRs+x1bj0IgWC4KlVMwZWwJ2c8X3mNQY9QLtosqr7hYQoKON83/z2\nb/82PqaB1FgvukvSj0tepQ6Zd/WX0e7WM1ee4wtdQMRInecvIDjoB3vd5f6M\nVn5+96tnv9wIslT508W92IR/2HlO+52JyFm0J/laTIVLs/ypol3PZz9bGE+w\nsozHpq3G2YBmPyspXLFHrKxLvos5ILYb/Gd2gW5nCspppI4JzyfMiD4QdRhy\n2paXIdCOHEE80Ka6bY9mrPMqFWqtZrRAeekKBVn33E3zZRcYS15e0aB3bDOP\nsADsfWhIbyLqiZ7YynwZ5Q6Ksqt/5VFyQPTYeDwF8zIXnOI7nIElSIUlAR16\nLDhl1R/WtBkEQ/5Ep9VqRt0Y9xtQb2+MhnahnqUaEFUe/ecV39Z4ZUYEjRbh\nUctbuROi5YcY1BNe80/V/gr3xsSXSsi6m2HmgQAsnaJ6hB3cb0ksVlQR+aEr\na7tH\r\n=fPH/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBYmjTqf/5/MkGf3qGY9Kqd0R4o59LB7Ik4nz0NRajf2AiAd9pXLxJ21qPDSRA+mBSOl9xp7umLpbxTrrocCK5TLNQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.0_1637594858777_0.08690449091389407"},"_hasShrinkwrap":false},"1.68.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.56.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3d41a9fb13087d4b850ba1eb2302f9dd96d91b43","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-A9VnBSnKRCh+j1drBYTIfYROIdtAubRuYZHGwnkYclIuJ5EL7XgqY7PtlZghUrjiIUQdNqhLo8uv4QGmpSvtGA==","shasum":"d2193ba5ea82ed983ff46bdc718fabd2b652fde9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0.tgz","fileCount":816,"unpackedSize":1684537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnKcnCRA9TVsSAnZWagAA/HoP/16byvT3XxaY8dcFxcfY\nFLCD43tIB94Z3A17uixrBJGRQjHCWB7qDrqRZfnfrwufZdkd/fUYt/w3l+Ce\nkMfKMRWHMRYRJDFNE+p1JJZ5Ez1e+NKqIKhpB0gOZ2xJ1gtR90hTob2mvbPw\ncHq0VCsMnFSg5JyHlxqwOA7cMfVnLISryfDRlR3s4dUKJz5XnrIv6J0O6ZZO\njLrRqawNJZM//JFUO9WWsf0CgKoDIcQilO2ZX1w7e/sSGUywOGuPctk9zm7u\nI8SSUjQrajmtV169s6HsQzjrMsjFhDe0wEoEiYzJrNmRNXcZCwj2ymhGiiqC\nuLj+UBUokDcKo1en1b3GVyUtfjVKK16WrJoCLglZsOYv9JjbGlOduUUno4sZ\nzvN0dR8Fa9C8mTVgExIFBD1mOhHzuKtpzRpJ9jNYiY0irQ3d5Ae2+tXrRlzM\n3mjvLvLFZj14dbw38WvawEEsvggbVnvzv+MInOYuoXaP7WO/4xIYDUrbMwUd\nyRWUEEh04DVm4kURaEvjOdSwN2cPbfCwE2JGGKJvBlTRP+leIRR5UFzLAHjF\n+XhC4/Z1HhqkACT4CeRq35Lon+bDTuH/mBfulDilDc/j9XbcJ9OqAy91LbPJ\nYJjjBa/NNLqJgH6KqLDQYmGJF1bePfXENUOLl+XwbtZykzIZMbzBZr0uhG8P\nCb7x\r\n=7mF4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3+WqvB5hN2BRz6yRKbUz3j0c7EpQijMiQ3L5fbV9RbAiBbwMDTofzn9t/Xi2eGRZhTchkfc2LM/SDg7rVMMpw9Aw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0_1637656359136_0.7558680885769251"},"_hasShrinkwrap":false},"1.67.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0":{"name":"@sberdevices/plasma-ui","version":"1.67.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0","@sberdevices/plasma-sb-utils":"0.37.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-iKoeOPuTSOUogHmYL8drfXwP4obw/iTp/q8HE7kGBK84m91EVydSZRBvI9/ViezS8hKnPRjxlyu+yOQdRoDZgQ==","shasum":"ff4ebed566466c1f025d6ca84ba0004d7cc2dc43","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0.tgz","fileCount":804,"unpackedSize":1673645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnK7VCRA9TVsSAnZWagAAm4MP/jBzufA6x2LTG+ad1p+d\nU+uHfIhsLY0t21F7yosCSiVOOeSVN+kRg2fLAQVFxNjanB6CeGFQOnOG4lEZ\nw7fsEtgDIcQXkoBefO1sqpgifBeZsJIhlgGS+A0O1ZPqUMYbK9IWtZVNZ9WS\nwOSVv1P7KiYL4w+PNkMLiwNs8JG+x7ikZrgxggU5KwHeMUKvWINydgYBVeeU\nqQaVO3ub2cw0XL0g3thBK1bezGemuGFROa0R4fcM9qp/R3cQHP63ny9gWG7L\nTnaRTLokwqhuPP/waeeB3rzm6qv0i3antCD8dCx5ewQelCwkPR52vwrzlfgy\n4gMP+WlC7loJD5cOSPBVB+zPxmO0xvTZxqxhcZh+ry9RosOTisLKYNLEGAL2\nPfOcBbkhrX0SSYkAOXxW6jUT0JRuhicsSfTqS+WZJzyQ3/Ybil+77+OW0uIA\nD0dS+Ey5mmx81PVIvhzBZBdUwy8++IV+f2WzoXHGJ4QYqY/Wy1DggRKKMa6Y\nZ0y5P7wONOcZZT03riO5zOkkCU4ncvtVx2/gYja8qDuPaubVCsYGvWyhFFje\nDdsgB2W3EExu7iWEXE3hZDiflZoNBtIkxmb06I8tIDl99q4QJb4W4eup0R5M\n3MJaPQKp0U035AdNaOr2sUy313vD5dxzUliI1QEVSOlMlg9qVM9FSeY04bhm\nlqr4\r\n=vPEK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoh/V+N2JiJ4Cgnq/1eg0J1HIxGsot+yHfKTTd108ZnAiAviecrhEFyGTbSi+CZqpaIey31eyQLHaYo4hhVU6iuSg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0_1637658325365_0.9168518922044437"},"_hasShrinkwrap":false},"1.68.0-canary.955.57c81cf11e8593032f787fb51817428e7f7c5b46.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.955.57c81cf11e8593032f787fb51817428e7f7c5b46.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.0","@sberdevices/plasma-sb-utils":"0.37.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"57c81cf11e8593032f787fb51817428e7f7c5b46","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.955.57c81cf11e8593032f787fb51817428e7f7c5b46.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-xIfi3Lg0Yd9YOkibzO15KEBZb6bwGrPJyNcmCOsbPFMTaXB1GHRMWdlfrCyfkKkgWyCrwI0lOsNyicu+8L6uyw==","shasum":"4b14ceb29648b412601073b1bd631f54bb2100ef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.955.57c81cf11e8593032f787fb51817428e7f7c5b46.0.tgz","fileCount":804,"unpackedSize":1674111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn2SiCRA9TVsSAnZWagAArpcP/i9FVQ2ymUl0oq/y+PGs\nBEdHSIs9yWUvhkwytYx0JlZVrSsdXl8LSj8Uftwh93BbzQzAf9M1GLTsFGKh\nKJYjxSgUs12ChYm124Rqu/+OiqVmcZmhL/FDmDA+PDNtNZ7CQ501lSw35gNZ\nYITbTJHnvbIcTuJcVYeNcIq8GFk1gspkP2ivxuNqnKG43WC0bAQ7EhTdSUlu\nAxureZ0bn7WuZ2TNca3y2yNhX7WD13WC21xK9UVyiNqUkLMks2ObdMjKXnwA\nq9vKomvmBdZalrb7FtHVgktV2B5z7i9jJ8ufA2Sl6RFCk3g/9M5YtcdGWlEy\nr/kTy3yiISJUK1F9V3ywkIpSmvg+vxTFiE+kgJejzYG+vjikNHYKoRIAOZ04\nbvlFLGKG45GiVHe7NDfTAxEGsA+jtAk14yK8FEfAu4pEEXiT6jJk/z4ekXBI\nABvY8fPWRK0SI9Sr/XLkomVv7Abu1Z/i63QEVyOOolbvPEQErO3Kys3337yo\n/POqA3B0U8DCGKaM8+QCBozb3AtWF87il5YBqHwXMr1fw81/1P49uNYxwXe3\nGFmY6MkouhbqYQFgtFHYf7P9GpTv/F4X10Pwt1+3WyUJJRsEk7oJXDE5p3Aq\nV/3fR78P9g9wRTs8yAE+FCl9lvhC5QrccA3A6CDuS9wsCRvqnkYMVtOnQErB\nV771\r\n=EVlo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfXd64xxPsgXwFsTvwxIwqVklWXRNdfjBxao8y7QdF2AiBlRp9b7KSp/KrfGRnptYYGK2oH95E+QQt7aBo2qMW2rA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.955.57c81cf11e8593032f787fb51817428e7f7c5b46.0_1637835938232_0.3737705379419247"},"_hasShrinkwrap":false},"1.68.0-canary.955.3bb3ba81550d7790066cc9dc629f271bdbd0e14a.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.955.3bb3ba81550d7790066cc9dc629f271bdbd0e14a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.0","@sberdevices/plasma-sb-utils":"0.37.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3bb3ba81550d7790066cc9dc629f271bdbd0e14a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.955.3bb3ba81550d7790066cc9dc629f271bdbd0e14a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-UiZJ6Ef+mgz20LTqsbJ/reKUTQu3nu6ncJ9WDoC2MloStH5rZrG5QpoOszrTWidDHU/N5F2MREA4BzuHxY3BIw==","shasum":"c00a3ec9c0eec17696bcdaa4dee2e3cb6f0ca74f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.955.3bb3ba81550d7790066cc9dc629f271bdbd0e14a.0.tgz","fileCount":804,"unpackedSize":1674133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn3T7CRA9TVsSAnZWagAAXusQAIzDxWz5gq5T9KImwHwv\nq5GQyvjs1U/fiXelFZQD1Aa8DT14EML0MjNBHVwJFIEaQpf954LnVDYX/jrE\nt8TiIMBfWcWkj8MWHoWkYJj1WcaBH3u10h9Vkq+3GeO9LJ94YYHUYKv2/t0j\n9yuhamIWLGoSlIvhv1wwt7/FMKIzfYd+inc9IkjCISv6hx1zIGZOsKpXqG/j\nD8FiexP9qGn2IKyJkvjxcYCpAVZWNwnh3msrXLPUZHnO5WqaHCKkYUT5/+pF\njU4SWfUNhp4EkS0YfCEWW+qv84BY+47Q2gBpVpBO5Gx76tm+JkPBzqKHWTSP\nfPoCK56+3tcHlatELATK+mAAZureZndz51JwIdVk30WmuM0UDhhlqKNCmtqb\nMrntlkS0SjeMKkYxHMrTlyvthvqvfWG59EOxgCmWZ7Ass+35p/fTfsrFsBH5\nyI+EoZ1fhWF3vW7+RUtbyXR/KTW02KrFqsYrHWLlIVlDJe7FzeQFKlY7H+Nk\nnMBOFgmRG92/vFYd8H2GI3xei6vliMD3i5W7W00vIG9KrfRmIcf9waKhX+ZW\nOz+PxD9kJfhDg8o8cTNB9kzUCz5hjdRV9y0UHxpjkK+0tc9jyIHNplUYX1gn\n8zrqOs/ww2b5+2TqJgCvztFnNVFbXNuC2vQy/xMZG9A/NISPNkuGvKbQfLGn\n6rxU\r\n=izfC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhBSqQ9VRW816Os0PEN3rOGlu4KLmKTC9HlmVsNkhLdAiEA9HRoOIWMKGrRI0gMLTDW2OvHM3gQtBvcu1x8beEFZUg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.955.3bb3ba81550d7790066cc9dc629f271bdbd0e14a.0_1637840123124_0.42105220389110953"},"_hasShrinkwrap":false},"1.68.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.56.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b82c29b8964b8f076f96f91a6d560eb53085049b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-PdJSVoBxelBkzdMbJyqosbWJ99Io+CgL0QRQqSFJMH8oRZcFKO2wbbpUmMZ3PlJ0UfC8HIAutJChrwCnjCmbIw==","shasum":"ee4b72b8c6ae224c475fd7669e1e3d9944c8a57a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0.tgz","fileCount":816,"unpackedSize":1687195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn5eTCRA9TVsSAnZWagAA1OgP/iEqo0X1+5EoHyBvx7UU\nCY1iv5ONOtUiK0swEtBQVqAmr0t8N9swJVA5OXgSjmNxadHABe42zLAaSKno\nKty7z/2H7zBPtTtzZj2QgTPmELEIqN0jmweuHHzMUe/J0Ys0HzABhKAeRl1l\nxPL/nBFvIU36asnxnOH28z6TpouE9ut45KRAHbog6roaMU9Ze733moJlYHWv\nF2JI09gKoe5CQqfVYSarhRF1uyd36BCeV25uCLMOVniR5Jxv0FCvMUYpxBs1\n7Cr8i6j6NaZNh3QgTSeL65IhVlJeTxlL/jPNF64bxW9F1Wo4xfO2OEdI1dFA\nt2lUKMVG0Qf4E1VWuWlVyPVOFbfi09SS1tK6Ha5YIuuOyQ4MtaviEvnQt8qD\nHaJD00uQHtVZSZcr7xBEB9d7BBtkEN7PhH8O7HSx6I80Cqd1yhct2wGKsN1x\n5oyzUORdscgDaGXnAEmV+bUN89udmlFxhTmvoyCouJPLmuplt7XMBPEi1tp+\ndxhAlcYcTBNHi2oiP1o65nNFMVvCVomzWocERgKMv80nsXRJkKUGiavstIXS\nc16Gf4PWKeOQO+X2ZT2Qdp8edW3mNARbNiwCYyV0Ng1N/B9ZKmDb+IGfSqcj\npDiH7fxTnWLRc8WHTZWr3DkoQKH0SurcIAs/FCHYzZiOG3ONqWiIw7eurQXJ\n9l0u\r\n=HOyK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1H4XmI67ltwOxHm92hJB2OhL2nLDLmiyITkvTdl5elAiEAv3N0+dUHnHigAeuflOkGIoNsBrOz+bdkauQA+9HT46A="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0_1637848978846_0.30750234791340825"},"_hasShrinkwrap":false},"1.68.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.56.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bc31d65660c57e9e065449d706adf88c9b2438e4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-78O2GcXrwEfJ1jjNgaCc25ZSnlNUZmIh31MI6q7gmKuNfWk+9q89tI7It9ESVKaKhcgYuoOkvDtyL8d8slgNQw==","shasum":"33d6bf60be04cb70c7de298a6a31094802600feb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0.tgz","fileCount":816,"unpackedSize":1687195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn5wiCRA9TVsSAnZWagAAuksP/ilbZHjSByIE2mVcOdi8\n5KI0BnkhEVJsxksid6kAo5fef8Ku7FpV30Mdd375p/a80K0yfrEgq9HPepfy\n3Ik60lxjAvQpoooKt54uuvjmfOATrhwN0lfHfmzgCJpR5ZTS5R34SCEbuF6p\nbPDf/z+BfFboREknIeOyQ5qU2x+uaLfEKn7ANrsu4almxKUet+ItRisw3+Lv\nFflGpEgTcnFlmdYZ/0EK2PpDxjnRbFRl8ZFnkrnFWz6IffRZoKGLIjlLeUL5\nR26M2aeC2xXdkk/q1G54TlC1GYg/u3q3v5duderU6iS6E8EyEkbN6Ec7QzCZ\npfwSLEFWREQdGvp6wuclds5LiPYMk45o/Edz05UJQPJNrRkYvRed56MN5Y5G\nMhJ4/jKj20lrTQg4sXBaPQbaDmp/vRD2eOP+pzLSCsd46m48xVenyg2Tv47y\nMVMYM72F7kkwjAKEmJyJECB7t0O2820VTUW9LTReZqYIfNCcKiKcR3xA1NII\nI2B76hTLKDSJuh2f/zlnw1X4a0y66hJPQdMilmhy8Ew5FQj+7hrdIojab2/l\nSxfG4gBQI+rbpdmwzAqI+fOmqoSfCzR6y//IcTOT1hYjVVYNZxG8c6ymYU9n\npblKICwqAxs8bwleHioUyJZlfgImS0xSBOfLYtzKJzduEm4PMX7GhphoBpN4\nV/ya\r\n=mIdC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFrzhL78w0LgLY9QizPwRV6NNRd0Ns7/vAdOWMCsHfqOAiEAoyQgJzk8+fnIkNZvWawpNieUDXpJdy/nOiULha1xDFo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0_1637850146585_0.024237933371479725"},"_hasShrinkwrap":false},"1.68.0-canary.676.df436809988040a845854d76df375b842eea2be7.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.676.df436809988040a845854d76df375b842eea2be7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.676.df436809988040a845854d76df375b842eea2be7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.56.0-canary.676.df436809988040a845854d76df375b842eea2be7.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.676.df436809988040a845854d76df375b842eea2be7.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"df436809988040a845854d76df375b842eea2be7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.676.df436809988040a845854d76df375b842eea2be7.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-SQA0v3SlAojrLLsUUoU3esm6zxLf5yn8UzFqLhCdntroU5fLcaOJqGBQw9PjCZrKsy9HDjEJ2upOFIJHn3aYCg==","shasum":"4710a5a09533aed074d8a6aee5ceb64b46584a3b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.676.df436809988040a845854d76df375b842eea2be7.0.tgz","fileCount":816,"unpackedSize":1687195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn632CRA9TVsSAnZWagAA6jQP/2FtJVK8HHy6pQly5kqG\nbOawcFvtsVnF1IVFr5CpYWX21MRyxVyHqVAAVN6tmXK0IgR5n7gLZr76fRu4\np39egbbmIhcCEMQD100sAiupMHYw8CgVBFm2QXYqHvg3X8ALNbpF9Pn85gDv\nN7aYniaeo0Q8BKirqvDaneW5FiYrMHlHGaplZqsDClVRVp5PuYEobiQPHmA1\nJtYFebbk4APoYjlFd18uicKcJqF72Swl4EK9J4VxlAJYnHRMBYdRY6I7QsUX\nuWlh7cfILukiH7GV6l2T8jH+JZLirbu4S7mGtr9y4ZiyTqbJ6UhgokpI0D4l\nAy/B8ObClSOFq0LQif0M+zJto/78/ZAFaa6c7Y+xNhNYgEiegdtr8c1IeSQq\nBtfaRTb+e8BbUumtNlZ4Kotb2GfiNO0bRjAG+2q7BIvOqCAf8wZLuju+U9rk\nYHFl44foOHvXrwUn/0ehGqg8RZw82nh3xuMNSn2MVwJk49nVr1UeNKZuFCuR\nZF0SkHhP+JJzYWlCHb6/Zey9EWZ5L5Qf+lnXfbghu2btaTk1hBdlgluGeG5S\nsSJ/w8RkId+Gp0kizeL6xAqyAS/eILPgrJwJL87IXugQe5gwNkme3onF5jeA\nTKdi0Mh8whE3RJyZD8bVnok33JeYlDyEp031jtQijbeFkfsr5zNEJjnVUFCa\nWQeX\r\n=DMOH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3kJqHALA3BVXMvi6bfm9ReZ9+4DTa+O8gIV8AJFUGvAiEA0sK+6YQ5W3KHJB8OMggLTbzPuhFrY+6JyqTTkz9wg6Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.676.df436809988040a845854d76df375b842eea2be7.0_1637854710665_0.6024179785256227"},"_hasShrinkwrap":false},"1.68.0-canary.957.aabf6102e452173b66e5e8fcfc9c7c19e64b7f22.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.957.aabf6102e452173b66e5e8fcfc9c7c19e64b7f22.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.0","@sberdevices/plasma-sb-utils":"0.37.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"aabf6102e452173b66e5e8fcfc9c7c19e64b7f22","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.957.aabf6102e452173b66e5e8fcfc9c7c19e64b7f22.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-PqnHorpcu7p/1CQUCMt5fuUZ5W+frfQpx55rgyv/xRWhhk8n82LvIvO6O2fu3KQZisA6vgB9hWiE0mDIKHKyEA==","shasum":"0a76ecc629e5c100a08173d94b3481d531a3d444","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.957.aabf6102e452173b66e5e8fcfc9c7c19e64b7f22.0.tgz","fileCount":804,"unpackedSize":1685888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoN0bCRA9TVsSAnZWagAAYs4QAInOXHr3Mr9NiWQdJgPD\na02yIs02IOR0CZivc7VM2GLDeZDDZHRMJlait/SP+C3Ysghpps2NFXGzz3xg\nxwtjG1AM+s35wbc4KNBBniFuym31ptbDMuPwDruo4RCDE/A2jBmlM/DeMIpZ\nsmXuoyG16IlfGsD8GuECt+WBKSonr7Nit5ETachaPCKO7e0boXGHifnEGqPB\nHm4qm6Jnmc128N4AH7r3+aR28CVSjEJkKH6NUpN/7t+/WYBVnah/DIlV7PN3\n8FDUlypykDDYfUCDpyYfzaHcV8e5rYqysf5Efs1/+QGx1cLW9d5wnx+37px7\nvpiE4ZKvErRsXjNkM+PpIVAu096mQDJ1dKSYzbr5C5CLzt2B65Qfo2HI858X\nkK4AwZqWiFORfCKcQ769hzohA0T9KxBxf6DG6OshNWDcMwN7kzdtbnD9kox4\nmVcH7ANRuugsuOrTcYGcawfYIEyoafwiaLHW02jO8t6n/B/qtg/xKWns0MYy\nuwHGLYG0Beoc3z0Fq+jpGixpeNdmu7SOQo0niubQVAv0WEwUaosDE712vW/U\n+ouXqRzZwdtqij4ONc5lU42nB0mm+sQyQ8ZIz7rZVuoE05A8CzypGng/Kn0p\n/5k9bs0IKtK+CxN7Ht7nhXF7vJjMMBuetcVtxhADz5+eYZ3J4jmcUXhbPGTq\nBO7A\r\n=UIGF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICw38wU/j8b9Q54mhI1iHm7HcQCcGiUgsNeGCep31ydKAiA7/wMwqE6QpossjkVQrJV11lh6KrnEaPSLlJXD1w9vQA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.957.aabf6102e452173b66e5e8fcfc9c7c19e64b7f22.0_1637932315171_0.07689529009624585"},"_hasShrinkwrap":false},"1.68.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.56.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Xpqmq8MFEBu5Mlo1JvcSx71z2bt3nvgUOGoewUsv9416A++X/wCJhFJiuc4UIK02GvHf/NetRqs7ooIuq7uTrw==","shasum":"50346a0a3b26f999035f43d1bb6367792f0cae12","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0.tgz","fileCount":816,"unpackedSize":1690621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJho9DzCRA9TVsSAnZWagAA+lMP/2mIDVSaUZaQ1bAjCL78\nq3Y3bur0/M7R3o0tYkWAObrSQAwIaRvAu3nN0rSPpsAFlKg3GQISKcnhvuo1\nsIN97ZoGePshwY2AT1UCG89bNZfp2HVCg6ofqWe68jIhlt3lpLTmTgzXpNtP\n+ay0A9cAk05fCUfCALON6iDJMYW85wvJ2sq/mz2dka2s81tJ+ORNgCAjKI9S\n6coNbmqdDHvqxDC4Bf8lJtZ6jWU6Xs4YzqUJ/oSZeNbm7ZoWqTi8FxA6Ortt\nPClAyNjHNvqRjrmQGiME8z192gcBDYShY51EFcyWRi5qViLKmh2GdGb9Sq8v\nvbizqd3aZ/4Cuj7SzML4LXwg1dW2AXCT/fAFY2C8hsPvhX8BTpA6hA5Tq0yy\nds2xrGlp416rfyJWxhhIrv47rdG471lsrE6+XnP6AnORIHIwXhUxq3d/cmMM\nz0VNcqO+/KB+n9Gxamp5mcu/raPX9AWCWQUYAbVZ2klCMwNrFsO/wlCp5rAQ\n5Jt0JqmsXuGtka8rUT08d04DQan+92EWhMvi0vD+EnhVrZH3cCPYSlCg7Zm9\nXn+ffUBWfte7vrF1yolHQZWCGNXFBSOV3WxBILZx4huClHS44kutTexwDDwj\nXNe3Re/p26IIfoTbEcBT6cll+3wMkeixn+9OhPXxLXFeJaP6XSW0icLrviIa\nd3UW\r\n=BPbh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARp5GpRtwYLQIoUDSkysNL+hG+4kIzNSsoIrUuBmH9cAiEA3RH7pRIX2uqKpdUojLEo3QyOfpHlRpPKVi6jGvi5wOw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0_1638125811388_0.3216785148782899"},"_hasShrinkwrap":false},"1.68.0-canary.957.26c6e8f40973b13e2130ef91933de5d531d31183.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.957.26c6e8f40973b13e2130ef91933de5d531d31183.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.55.0","@sberdevices/plasma-sb-utils":"0.37.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"26c6e8f40973b13e2130ef91933de5d531d31183","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.957.26c6e8f40973b13e2130ef91933de5d531d31183.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-kacY6mkrDRBcoxROzcPsKM2Ndat0xulznUQa9CETCSyvOegVBXCRjr6vrWeY3i/mZ8QCVnpi0YjKcoXuD/bCCg==","shasum":"6fe1d1f3c6cb42e0edc749459d23273cecd1d7ad","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.957.26c6e8f40973b13e2130ef91933de5d531d31183.0.tgz","fileCount":804,"unpackedSize":1685888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpGTOCRA9TVsSAnZWagAAY38P/i5kwk4S2CRmA++rTfOX\nxKy2LEoxwXBNfk7Rlc15qUcXKJNtgYx+tJ8FLI8EfvU2Nhu29cmYkZEKlf75\nVtwLglQRvBsAiwuO0WTKQ5XR/LLBhW1gz3610PB7QinhgMSjaD/jjuPCQDtd\nblrThiFRJwLViqzWGulno20rm28V8nWnA9wRQGl247VYwL2ThESGFZEZevRZ\n2DUx3Qdjx7rDqiQ8u4EHvTZA81puZ85Lu8SyXS7EZFzSAermfE45fdh8X65g\nOOYnHT3O/w438CI5akJHIaQ2+jOlZowzIxKGByi4sA/AyIEO/TBQy5wVJ1zK\nb9PiBm0az25ixwP6bHuIYwNKF1HILa7U5KLOmjJrk98E/BbknnRK+cgHXdIV\n3+BC+Tycy6GRul4fjKmXZgtHHBWXh/P4CTo0jlmh4w42FLRHPlKujAGG2S5G\n6mZ2/xtPnybl2mX4VcdlXbP29iU5pwYzpER3tkRXeTl1KzrFIDFjtTh5Laez\nR6OrsUTndq35lnQbXQaAqxCmrID35J6B5WeOPhFXTzwRrIbuHAMwSIESx6JZ\nbD1dPRm/9jO4LadA3DVVwJkGpxeotbHPrA6VTPEUWuh1A47bnCx8tlYok05A\npluOszHCQavIoIfrQaqmLP2Yk5Uo4AvgBpKrC0zvUvwon5/s5StR/CTuYZ+N\nqv1K\r\n=nJBW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB+58/PkHqwAgzUzRt+vP4oEgbT7JT1wrLVMOsXq7qDgIhAOQtGryw7m75oFQJBOXTETMXUpsBqKrznTlY681yUTG0"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.957.26c6e8f40973b13e2130ef91933de5d531d31183.0_1638163662032_0.1476428499557081"},"_hasShrinkwrap":false},"1.67.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0":{"name":"@sberdevices/plasma-ui","version":"1.67.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0","@sberdevices/plasma-icons":"1.55.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0","@sberdevices/plasma-sb-utils":"0.37.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"043a3d383ac2d65fe6310502e5c36410b427c1bb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-rirqYmRwNe38P+h7Farsw1n0/Z6gJU8E8yQ5t1YmdytKiTxjko5c9zrzXGX5sKUr+fwhTT4t6SaKbAI9XkRHYA==","shasum":"6e35f433664dbe7150fdd7515b484e026db6cccf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0.tgz","fileCount":804,"unpackedSize":1673699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpIiYCRA9TVsSAnZWagAAxIUP/RmMQjnomi1a7OKZ1nD/\nmEPVNkykthKH3Rn96SCeWr+4NfkculVOulXeB9l2aC9+PxpDn8ajzHjGQf6H\nTe2/ZbA2joAk6UI7iFHAML+GkkSKeoMqf3qNQRkxnmf6hInHTWA0bhfR8wxg\niKS+6Bx7XKSnXNj66IpYhueBMZMPb3B13P/h7MCfVyda+ZpynXyduX+CZFxv\ntU8S9oDOfd/gqR5vTZ4ajNSp5fzeAnidsyFKTpSyiHsNC6fSdNOY8E/VCjr0\nzxDRrUAbUQMOvGVzuZEiWW5O0z436y/Rl7u/eojn6UkIneFzg/5nGOfNWBxq\n0R8HbDawc0q5T/8xmKbyQV9a1qEWVzq42E5+xR8pXpf3JIVSS72kh5SOSplt\n8Hr6pYgUlOGyY9BGOovlP4EMkmSw8psC++TF+2fG7EceE05cyExhs/BoDfiX\n9W48kmdn8/JuLDhcsMhxvhO7EJNaz2DM8TMhd030+9nCOUxw0Q6RJc5ihpwu\nK8WlqqPxGxX650l3iH4ZiMkP6W/sGO0mLiXa/4ulSzt0oI3EOX5FZI9U9tBO\nIkOOVuwJiOm4aLwhCZLxI7EhfbvJd68vwICUoOgwQw8pF2uXHZeDwcfGxjvG\nSVuA3PEyE/LmH95rU2oOVDBFDkYOxvZ2ndrt98RPShwb7mqWJlOvyuQXYyMb\nnyIO\r\n=xbUl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLvKvnJlo0uaWBOz+aZTpmzwaRP+DEo9vJ7F3JWKQKIQIgTU+ACH08/OTZy1xUBfCkA93qNZB8lNE43BMQ569vuwk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0_1638172824293_0.26684672250108754"},"_hasShrinkwrap":false},"1.67.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0":{"name":"@sberdevices/plasma-ui","version":"1.67.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0","@sberdevices/plasma-icons":"1.55.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0","@sberdevices/plasma-sb-utils":"0.37.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4ac11b555b3ed480ff7d870e250cd2e6408d2a63","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-ULmeB8Xcl8LyvOeiXX6XKqJhjRyjK7obogp4auESKjCVbjaDk7mKinC5ji5liralaWH4fM6TR7jgkMmXDWX0vg==","shasum":"dfa736a257372171372c9d3c1f7694264de5dc08","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0.tgz","fileCount":804,"unpackedSize":1673699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpJFvCRA9TVsSAnZWagAA8IoP/i7zvhSY0dETwbOZpR6h\nUCxHrSTLXqJWEA7N4ld/P7Hz+rSm8OmbaTvVa+N6w7HSSgOT+K9MPdMROvlf\n5pGwpsziGKR9EtTXcWmqwE/9SQI4gWJJu+83hBhVva891xOM5/LNFBGfGVJR\nQBhT9nJOJv/5RrS0I/bHyfz8zx/l/Yl4WA3/J9Ut6ijrnrPjmmuMC2pif+dK\npGT3+lwq3Les5uiYxhBlhsq4+jidT5crfnr5NiigG9hC8chLxaP34Y62rnP7\n4SORRoq/XGEC0cuL5sjI02bwshv6e4TNLjtJuKWp8xWn3Yzk7AWfpmHk43Na\n+jXr7fkuZFXdQ7tcIRppoAvUThi3gt1h0M9o6CgZwaCzy9t+RwdV4mi1YW7j\nqOEEOvdFEcfods34bhyjZL3ipXkHo8kyTaw2cevbnWu96VxWWXwGGKPP9SN9\nBOns5cozQfq0cqHNktzfpxWETfGehaIUYM3TQhPpd+pYNbWl10v9EglRhhNq\nSoKaVw3g4fWoWx9sWzPuk7ybuY/GIY9/20K1whnG8UBW16C3OO+Lla6ZydzI\ng7mfCydNlc4u5C/jiTTP43ykwN09WETYXksX4MMahhDI9tThMy0hR0bHs+ba\nxBI2Hh1zxZqdHOrmr1gtMSbqu09jMDPiUotUdl0DRrGND6HQ0g+xNzBNyfM1\nh2Vg\r\n=akZD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+9T+LUmjnMg8KtTu8OSeDFG2KXLDnxue8cUfxDw2DmwIhANpdGNCZYzpnrzlWVxg8mlZ6M0lkKVPivo+qe6xhyrpP"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0_1638175087248_0.2698720066639251"},"_hasShrinkwrap":false},"1.68.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.56.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"918f4dd1caa043acb6f2cfca7fef66aeadc800dc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-auI45eF2LuYb3cmiAiql0GG0ZoD7OO0sZf/obW8yIHJ2FewuHFS4KCl0IA+hYkcOH+6Wz3I2gjhsQCnJOnkzSw==","shasum":"743f5893fb8e5776d018ab19056f64a8406b295f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0.tgz","fileCount":814,"unpackedSize":1696207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpJQACRA9TVsSAnZWagAAYbYP/iHAzD3nAHmurxSEK9UR\nK7WYWyZt1cjl8S7SUs30wouEHvwt5+NnOeYT1tOpXWAkWgIAUoYeRHe5XTHN\njAriMZzYxa1V1kcK8PsrDkQCSD8jRA5Qom82JP9OYzQwlNRSaFFi91PvVA3h\nmML2JKzsbSZGCL8SZK1nuBeA2COHwqHpnRznB88igdAGwDLymZHLDzJe5O9s\nyOAcCiJUbvGEku6F2lsuyYV5IjoH5uVOQxQeW6GGP0HWCkB54nmc14ceFqN2\ntsNMnPfuHmK42AjesEUC5KZM7IK7OjKAXZh+9lpoLLklKJjhTgff1Wd2UUlz\nTl9Hz5Cvfbu0OdAvJ7mZvJJPlJoIe5sJSicJ6h+W/N/uzPG7vSuIlJgFdxpm\nIXyIS9cL958nllZfTi8IAE4ml3Rc0lLtmG/SgdGfAf7TvU0/33kE9e7fb8Qm\nah10bPO2Dop7q7M553L2HAbkaU5zd+eqV7CeH/g/DZgeqoG0+GIv6guq8ifK\nKT2h2ThqBjOheaLw8G4NIM0B9cM3FpdTYVTxkj/vjehyvZD33vu9qSwUClnw\nhmQ725dP7cKx1Ur7XXNiv5bAfYL600226osCnoARdCssFdLr8ygZC6YOQnaQ\njXqA3nmiTeCo0O2JXWy7DmQWWToZoFAJeXIiUm+XDOmCqEGSzeveYeIUS2cV\nF5/n\r\n=AHGT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHa4j8TmTSi4Hyec4FDl/0UUVNGtRP8dotD6U6tWgNSmAiBhDJ2d30t5yoyCrUjX/DEaMdBPJTiZRTKo1O1s07i2NQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0_1638175743955_0.8639519698132663"},"_hasShrinkwrap":false},"1.68.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.2","@sberdevices/plasma-icons":"1.56.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"32da22cc772c775c7f8ba284ad0810fcd672f488","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-AJ7xwlecAPh1yFeKvAW9USqpzvKno5qxrGGXe5PZds6mwDkiLyTD+jApuF5RO4ItLNBelqtLiNlDmmcmEm1LDQ==","shasum":"40c3707e30c1387864d61f26249d32dea22a57d9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0.tgz","fileCount":810,"unpackedSize":1678090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpJhACRA9TVsSAnZWagAAnMUQAIjmZBRhcppxgfT7bRiL\na8pAsc32Kai1NuHcZWZhzY/vesuEwV6jvcAePd6Rh3pT3nkrsqnQZ3Q3DSAQ\nQg+MGYJLkMKtq89mjSXuQdfUgHjGUFRQP9JozKpmKO++tZJuOjP3N+rISgjk\n1l1SDQfOYy34dZ4RaVU6sXfOZz8C7WAD7UtNR6OpNFa+4zoGAwDgxISAB6d+\nLxEFZc5JOX4ZMmY4mdCxHNv41Sx84vztpOl0OwzJZnLNoaxSLW2IsfWv2fSQ\nsNULdfcoRGqvBw2pgviRHH+gKGC0SWNkEfyDwJIF6nzVzdy4a4/LCA/KFK4n\nyGoYheYTmD7elwoZTKVsi7q6yLEHwhuVy+C2vLVIijzEIb/n1cdzHlE+I1Az\ngiiC3PzfrxWQNLeVq6TBe7Fd09eAQAcQpq8QwgFTqub/od5+sBMgXY/pH+6a\nSDxwRXbAevXdCFQikLsMDALuF9XyVFdfV1ScVNM33VTJaXw84HQUeXEFHgqi\nrHzpMcpzG6qmknIXXz+1Ax0j67o3yi51T5oPOYcUXlYaMBWc0dOXY9gX7xLV\nlGNc+4HPTNIDUZNgAwzypOIfzXD07OjveaPkycx1CGYns5CvvqH4gL22z6xs\nD3qxGZJ+ugshfPpYmHVbLt5k3HWYS2xlfkEgoCRGcr8Ey7lWA1Tf5BRAJAxA\neJQk\r\n=SVQ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcI9I3J3qP60sizN2YeSHHBxbX3UlV785QriQJhbrhHAiEAuINR2t1GFqN8yGvhPMGEw0aercCjXnE4Ve0BQJyzwAg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0_1638176832128_0.12726039722532123"},"_hasShrinkwrap":false},"1.67.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0":{"name":"@sberdevices/plasma-ui","version":"1.67.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0","@sberdevices/plasma-icons":"1.55.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0","@sberdevices/plasma-sb-utils":"0.37.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-si6A3CEYreGDUS+Ar7CCzzxRq07zNzJ/lfWDe78qDDpRVD8IlPqwRDrz98CJ6h8s4nTDQF0+mfadqRmGPsH0zw==","shasum":"1e235cce7426bb87574f83d696c07da40924a3cd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0.tgz","fileCount":804,"unpackedSize":1673699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpKrMCRA9TVsSAnZWagAARI4P/i+BrnRX21EakDVRDLL3\nof1B5PdV7n1wBK1v2LZunnM9TCWu8V1j18F2ZFlj3df1I5s3ekDpKf3YVhbm\nLj2Eq7rcoIDE9imSscogzSK6N27iQHR6I4VDg+Xbuaf1Kyoz1x3OVMcfuLA2\nmlHG3eFPyojB1sjpzrirn0DSEyNrojB7OpiVaX1J4LanpjgrOMMQwrMqCtY1\nILDnbXs0kXrNna4s4yoyHKv6dJEncwWZrwmxd0eHFKLhL4yT9XcfeVqHaeBx\nCcKdyTskbmjoauidc9xk0xxn1AsfTof4v7OGRRZzLMGDr7jh5JY1T+4Lb0TT\n6uXsCK9gXayumuZC6cpP9p9B2UrpI8WAUPInxYkcTvy1kFarBaooyKKxBW69\nQPq3FW4UxcLbZuktEo5wHdq0GAOtoB9nLB7Tfs83IkHPmleNKAL32pxTHZKV\n/moi8ADVlSyWL8h7rSBeSkDLOJf4tw1zAMuwZy1QaW8riqW4VHXy3QQCpaDb\nsrDYrSzvdbbC9zkA4rQCy9pemLHbWLoGMltjSjaClcuX76i3CFtUHSmtfBbZ\nRXaj00I1qrR3wcxHVGxM6PAaN3HC1NlfvPDt/JQikx6KvtRFc7Kp+gLsPina\njZnftVM8CXnSgfTVn7LNCiSpvsPxe9XxUh9eTx7zbr+UcO2zRgX4njRk3Ar1\nZaOe\r\n=mvsh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqgu8W1TfhWbi2mlPxk9bGsLf4O8sJPPbr2zNYhbnghAIhAJlOuWU1m0uE4Ef4UmosdR8eC9qJscJWIZewoi7rWbYZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0_1638181580146_0.7674934416233001"},"_hasShrinkwrap":false},"1.67.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0":{"name":"@sberdevices/plasma-ui","version":"1.67.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0","@sberdevices/plasma-icons":"1.55.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0","@sberdevices/plasma-sb-utils":"0.37.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7595cc23982c108327a3a70cd5f4641a990bd51e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-gJeCoNmvBxydZezbEG5NTISIBvO3nXrjjVtAh8OqJ6WCCJbjZCgtXzyoyH5IuBTdPrxaH4rw/wyjTHw9KPZl4A==","shasum":"a3032365251ef920f99123a0992f987f88ab2821","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0.tgz","fileCount":804,"unpackedSize":1673699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpK/PCRA9TVsSAnZWagAA0pgP+wd7X5DzSjigsWtjIKqz\nzZKR3M5by8zUpu6sE9E2EeRH81QgXqRcyH3HAFinj2l+WjmnyIS84674DJ2g\nO1FHU/Ip3iADhdD8jsOLrVvZRYN9nGcQQ9OspZYgmZJdOZPzNEwN8Eah3zSD\n6MTLXC5gU9iwORHyLYvAxao9H0AIyFI2+Lv2n9kykEZxqLWu5jWpICvSDhd1\nn+7dky2EzAEIUkSp6mwsg2FBvfJq5BLkbHqGHwhNlt8b6sI0ISzZbZo7n2eX\nHW2CV4zyLUDOs/Idw9KI4kGT3SfIh7O/mP/Vph3NdD59NqWXwJHRdq17dTZg\nSxDk9PlotVIynrn/TZ2xuxG6C5J19EbdrqWiYs/dYy85BmHMoe9mwR1j6S4Q\nw1D5Yv3Uy2YqHzEqqCHQymaq+n6eYuyum2duchUkzwg6S3bZif2EssqZtzm0\nV8CcOXBk4nbq4nIcouQtnV6anI1cN9xCLlMWp9DtGIJzne3raXBEPHvuUWi1\nbQPxRSr6S05GZx7Vhxzg6znTnyjzz5Vg8tnEudkZKU3vYgIHGSTjeU4qDx2+\nFyQ3qpTc+aETu8S5PIo4btc9onz51GceGxQE3nUGpLzJa0FXP74976HQSos4\nEAV3IVhrlnJRu2mpPhEWA+l6B7LCnndJUjywweTjcJeX3PYjNnWpVFbWR6Rn\nVeN4\r\n=ikpO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6fVFYgF3REgmNPaYmv7ZZ3kKXJHujZBl2xkf18JALuAiEAsWp9di+90a1fmhzrup34zwg/wsDkrhkzmFjxc92Gxnc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0_1638182862828_0.15562523857394805"},"_hasShrinkwrap":false},"1.67.1":{"name":"@sberdevices/plasma-ui","version":"1.67.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.1","@sberdevices/plasma-sb-utils":"0.37.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dd92153caab9fb9c06b235c808c4d8154dcbe364","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.1","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-ehgHtPPxDzxcFB9H42JkIAb6n0oylFRZ8bPm5bgpyIICK/JZzqNM5y8K9BDosDWJ//EbrknotjeL8GVL4Ie+hw==","shasum":"d8debde8a09e0b5217949244f6c5ecc9d494999a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.1.tgz","fileCount":804,"unpackedSize":1673429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpL5wCRA9TVsSAnZWagAAGOgQAIEKM75L174+n8qUG9ZW\nbfDd2BsWdv9Hwz7FKyOM+39kawbytsV2BrukZFGXbQ3BYxilogIr1Z7UXZF4\n9HhKFMakvJkVYgwtxAdJJV/eWiPTV79bAzOPZUo51dgZE3xLgOcTnZ6oDf6U\n9LVC8Mf/H155Lfky0C+aolqjjQV9SrEYRkG6ZyMh6d8JRAjwSfKio27OCN5a\nW1O4dfMo0Snp63jbQ729VjvgxxL9aEapO34vzKl/cp/vU8XUODiqaFI0RhwS\nOLn0eA5E6yrENuA69s7sbrUUlb7WPS/4yW+lFs5Q0tR+NKtENDp5p72ZwRH/\n6wtm/MKsqBhtuiEFqL+iooZ7jVXdNgt9/vuWc9wCFDgIhXiqoAiHhDpJdaP7\naeeiXFh+fWszxpcrTeBa9RvNMLvaiutKWGavxPFvcW9xBsHHJs6F8EmiyyZc\nXDognUN3AvyQbaPYjNQRFeK38pKecDARfJrc0Jlgmfdx5dQoWoqjpK67aGRx\nwzL5HiRwTu2Z46/YupTjZTLSONrOhZfkf+i/xFDv3Wc9GjaCdTjwwVdE3Bw+\nn3WduknTgY+k1BDXMQpI4Yd9G2gVb52qdQHYTbmdgRlKGTKUB4UsnnQksian\nrUCInqGAdiZvl6CjJEvP4x2bDAcVBv0weFeGIk3bwPhnCYNK1drKythkcdl8\nLj+u\r\n=/FEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzbQZsWOG/jHoGPKaGXhwm2OZg+OCh76V6byxzIq9K0AiA0QVEskh2apiSSDP5qyU1ySjrBKVNfsSRwv6C20S+JYQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.1_1638186608659_0.48960815372808564"},"_hasShrinkwrap":false},"1.67.2-canary.958.0442e9461f2ef38ffc428cc3eb70cf9f1442fc17.0":{"name":"@sberdevices/plasma-ui","version":"1.67.2-canary.958.0442e9461f2ef38ffc428cc3eb70cf9f1442fc17.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.1","@sberdevices/plasma-sb-utils":"0.37.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0442e9461f2ef38ffc428cc3eb70cf9f1442fc17","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.2-canary.958.0442e9461f2ef38ffc428cc3eb70cf9f1442fc17.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-kJSK22QqzbE9CvmCcmYJIKCO49EkfnjU6AW7fwHINnuuI2/9jxzk8h1pnyK7gnKsuKuBlhizpKQXmPGbvBZGaQ==","shasum":"a494b5e085831374254b1bdd9c6f075d54462e92","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.2-canary.958.0442e9461f2ef38ffc428cc3eb70cf9f1442fc17.0.tgz","fileCount":804,"unpackedSize":1678178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpOdGCRA9TVsSAnZWagAAhu8QAJqBKZyGuUop88eaX7md\nvxfayz4ZVkSI26e1XDln2r3E2RXljf/oa3fjuDcObMa1E0Qx6lwvgDB6qvKB\njMMv4oI5UG2rbTyJzyXhb0rilnMjpujvWKokFPzhLnYZbVf8smIM42pkyXKO\n4BfDMcgXX6yXkdVl/YLi/tuJS9kRef52ZqkswTzYHxpHGhAOO1iCeT0LSjZ4\n5xuQrPITnpGI5c0LCf/vF7cJb5y1CJODVXcGQ3DVxqL7SfJU6X+kzh1BbNYj\n14iIT94VoGlN0BF8UmJWQsPShnC0gl05p+MsuASP42WJolgk1JPQ8glOEq+r\n2kaWQVrq1/FSHr6fH+EBvhg2zgAKvL0yLckryTIlxxONzc1SE++AmQo4BIaS\nVy9ue3zqm11LQyf7mMxz9crT0WHPdRgvd91WKvPnYAovYumrLCcuGwBwvZm+\nGZXwxyKSW9JL6UmLu4p6qywHdfA4Ov+iVLi7tX+qzBDdf2JtGhrcXH914Cdd\nNsyFlAxKOjWbPbixSj9TqTgf3GGc1vsNhv/9wsz5Inz/bnfsTXYiYXTuIIFU\nPD0cfABBCUE0FI4ERvhvCmwX9lALznCaKaVMwbpo4Vh3a3mSqx56wHHRNoxK\n1RDwp49j//x5GW3zPKwx9IoUKSnQ25VeoziQPVqbRayCXltwm4XcLXxl5nS2\nF1fH\r\n=qKOd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwN0DQebUVxP9wA3C+o0w2TF+Da79laY0vufH2mzhkhAIgTOvaG7RxDxikLzPQGrh69VNTapa2pfriN2OtxWoUzSM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.2-canary.958.0442e9461f2ef38ffc428cc3eb70cf9f1442fc17.0_1638197062258_0.5154219705849223"},"_hasShrinkwrap":false},"1.68.0-canary.930.0878aab7d00d478b63ec1f317c600563808c0d93.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.930.0878aab7d00d478b63ec1f317c600563808c0d93.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.1","@sberdevices/plasma-sb-utils":"0.37.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0878aab7d00d478b63ec1f317c600563808c0d93","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.930.0878aab7d00d478b63ec1f317c600563808c0d93.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-SHA7Ts2a5OIKXkDqAR42QAmk8yCZO5vfV0LAnz5NejHEXH3Xa0p3a4g3xcQFFVCtIKR9vYcRX7lPi07gGw/UNA==","shasum":"1715a30d95aa2a25b0be1c07db64ff37f91ab65e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.930.0878aab7d00d478b63ec1f317c600563808c0d93.0.tgz","fileCount":804,"unpackedSize":1677364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpeNRCRA9TVsSAnZWagAAb7oP/jyKl9Ud9kebE1pJlOG+\nRHBmie4E2+w198ZyO6OUyXWOyJOsWLPCxsp141TjOT964m6wlOAOGPMTqR1R\nPvmsLWLr7x5otJNQdB4NISsjD4YzGOGkrwUMPVq+r5dfx/dxTmF46SWaLm1G\n0VZIf2wNZV2FfEIAac95YmOtvcUcIcUD/zFJpnJnb8x7F4hRDLo3DNLZj75h\n06ObesmkpTijRvhVVrjyddlxdV8royCpaFtlcF8e+U22ncBYTYibClvmfvvL\nf5yFDhaU83Yi/W9S0jm0SZ8f8lGPoAFnYLLCxYo4L5hxlhkGG/NugvBK+A4J\n9nWSpT1ANO9deT1I+b39yu+gewq8iLXqIdSzMPVRw+hhVvoFbDIoIK6dyjeC\nyJZzH7ZeoHpPOxTrBqCl2NrQfeHzzBraQB/s6ktTFRRJ6+pujYLxOtf/oJ4b\n7h1z3J60229nhGR2rjQUl+aNWWd1rKXOERyzDWAGVLBiPh+4hk1JpQzrTAS7\nSco/TrGzwuZPiQVCJDVI1SsdPFWdFq+GfYf4ZJnDqbYQQ5zz+XZkIhqrMYE8\nVae5vqVXZ5kkxNV3F1TCTMWUp1NzmQpK+pzeIOYwOaXh6DLw4IMuinU6anka\n81I+bn8zsq+aN2l8r/JjMFypsvROGvW/+tNFp3MY2BLfRd9J/bxzhWzZALQ4\nClVe\r\n=Xges\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD37QUtFxIGIRoa7j6+mM0DFo6gTT9Ib5f7YQswBaA3KgIgYQI0FOSueKwZUVYjk1n2YtsZxTXIM9phG4A5u76DlDE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.930.0878aab7d00d478b63ec1f317c600563808c0d93.0_1638261584785_0.66997970783032"},"_hasShrinkwrap":false},"1.68.0-canary.960.0f1455ada369fd56c166e6bb81a0a9d08fa58df3.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.960.0f1455ada369fd56c166e6bb81a0a9d08fa58df3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.1","@sberdevices/plasma-sb-utils":"0.37.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0f1455ada369fd56c166e6bb81a0a9d08fa58df3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.960.0f1455ada369fd56c166e6bb81a0a9d08fa58df3.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-zRAx2fMvS8BGEckAZIk4pA9Cxfgkx71w+PNAg5sL7baBuRSZgWNuureqP9bmb3gqNndDhIBRuISI85UwxzvYeQ==","shasum":"9c015e6680bfb26d0af1e7a1639923a0923c57e6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.960.0f1455ada369fd56c166e6bb81a0a9d08fa58df3.0.tgz","fileCount":804,"unpackedSize":1679394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpiSQCRA9TVsSAnZWagAAbZ0P/iyAF8VYgj+MHv8wKzkE\ngj2DnlMdonjjJFiwgCGNeJbk9pFqunnfE+JmiQVbKX1JkGAgjfgED4tQJRU5\nLmXA7VxEqSL0RJur1s3dO1GVVeC59SvbjEcVkECXcjRum36pKEIfLV8uPD2h\naEvvlek+ukTTIB9s+506dBEdqyNtWuOzdRQxxAGN1WHgudpGu7ZC9bUwFj9o\nq1Hva0TNRRtWNRDqGjxVm4QzUwgeNU2h6vrPxQJGhAv479Dn1WjCQ44IIrxk\njYvJrMMrUMmbvvHIla4vEJepZQhZIQ9O4kGFRmzVzLhvO122g2AFHBhKdJDF\nOkeSxf8+Qx/vIs0M1qyGZ1UM11ZxN8PxmHiGw56+ehWIqYriC1Nkx4SY113g\nlHIImBGu0IfBaZdtR3OVnH70FESxhTU3Kw3KOANdOo6xA1wCA7piDvGZiclO\noyJQEcnzKjpnGoeWVmH6ahBdjdRiq1K4LK7PGY13cAXaxzbEL+IM4DKi1wA8\nM789L9jhBCDh972PKVOb/2XUW0OHV48rC05RIZNtuebHb7FoImYuvbSLzvfj\nGvxK1NBqrf369h7BF25uAFuTPAC4ubMjBZt3Df1aHkKD8afz4yyoKHrS7bMk\nMsrzlJ+kF8fs76Fsnv18/9EkHkQhMF9yfCfKpvBg/K8D4eV7toF1vtQ+RHXq\n5Mi2\r\n=lTQI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXO/6IAD56m7Ocd0768uF5a1QgNdWyKuo+E4E92ohmJwIgSk/4oohsE7I/9dOCtnx9VTcUOiZZcA6OwxfIscO9ZYE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.960.0f1455ada369fd56c166e6bb81a0a9d08fa58df3.0_1638278288351_0.9950095318277268"},"_hasShrinkwrap":false},"1.68.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0","@sberdevices/plasma-sb-utils":"0.38.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2cb009694b0a79b458237ac57774822ed86aba38","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-tNnPek7I4+T8+rtKBvxW474n7mH1I0NYA9vWlADiayQAOp3X3/s6ogujpdXgQ2Y3kk5wT02xX/zUO7jUWdOSOQ==","shasum":"fcd7bb3e4134cd905c45aeb72a2321ee0a26301c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0.tgz","fileCount":810,"unpackedSize":1681971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpkKoCRA9TVsSAnZWagAA6ZcQAI9ZYun4PKZkBCXvmI7m\n5JdNHAL+TW+R7ouhdSjcJZNR2cr9pDTH/tf2L62p+cdgZKJLNkJB4zsI4BLx\nlpBeZ3h1Y/iUzYcUZlKiwUpVvIx34nurZ52vxhN3q88TlL/P58QUtftmwjnk\nrpplaZWPPVOAM8FTTOZ5CAB0Nnkav5Bc4g6HwqhIkY9IYcQA+iGENNZhcR7Z\nTVbbbYLfcVxy0FsQLxDTEolLttCUXjsRQtU85A7gb5ShyfApxmGU7OwFoeuS\nRjTOxBhhSDxjJSzdLtQx04+b5UT3rIKUOYBjA1cK9dErreStbOT9UftarVcw\nL19YQ7t+YmYmqV1U5AMmm62AQQ8823e0eZ91v24jHu2TjM2lXf5ORYGEIlzW\nQ4TuufZHw7SioOt/Gh5jUnigD1BMx/RuUKrGPykXPp+Atbzp/L6JqZ9BvOZ2\nWwHqS7uGxvnU1Fjl3RDHTj93fQb7xdW4AYzAzHirNpWYb/JU5eOkY0BT9cka\nw05gO66X0FIOjzePG8JXfCwLcSOtivJhiz3eNqGSrk2PQ63XyxcMKFxzFKZ0\nXuLjC3/+rDnTCG5CC3GfWaE589L2HVaerSX1eHEgwdV5NWKLTGuufD3PVaa8\n5MaXSpjxY8Ok3hMHYFDNe0t7XFoGKcZDksKpfDWQCr0v7Lehklf2w+e8DR6e\nMCPZ\r\n=S6oG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBBE+tYYyMZgbsHVHqPMWtWkkkRz0zeNLMKojwAxbT9AiEAgEzwb9gVh83dyqi7K/v0t0qXlsPha8N16vL2rvFL7XY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0_1638285992584_0.9198958653384011"},"_hasShrinkwrap":false},"1.67.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0":{"name":"@sberdevices/plasma-ui","version":"1.67.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0","@sberdevices/plasma-sb-utils":"0.37.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"60e1cf4ec1e6efbe0e0d707c46058673ee345ab4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-4m5xxMos8WAbcjFhOL1bh3FK3s/U15lpbhDXINJ88aLqOGCr1ANfO9mTrCjOHv4POr4lRSzXcDsLED8zIzuNzQ==","shasum":"80898d1e4ef2f9a3ce0484690ed400e1503193d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0.tgz","fileCount":804,"unpackedSize":1684651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpxbTCRA9TVsSAnZWagAAK74P/R6DqjgvnNsguM0G9Oj4\nbsSDdFTCLFLeGA+zQGV/jBC3wTLcaUaHEt0+ZOPbm0eMPaeCZMHrUdi0S5te\nM6EY9W2LYqk3/MlndOI0PtYUaKY+eGFKo0g5evlhIFYbf0HrfK9JnwOYhqo/\nNW5+ADgDkMWNpeVTMOLBVIFqG44DcvqP4yQJ9BhufEaytptPXFTYnZioDaX3\nyaBV2nZx8DBGI5L6HcCgXKpGJCmU7GCe/IY0TE2wSE8GCm452iCNWzqZFt2L\n0+cYMOWO3GGMG6Rl37uUHtRbkcMT4hz5jG0JOZEj1TnwMA2s1NiidFT4wTWz\niKFFxK95y2P9ZsybCuJ/FOQvUUuLksTNWXwTrw0Vtj3lqArrYi3m784d3k1A\n4hiwhQzllE+39GVy4J0GUYxrY0VKd/R9w9pnHV2PR2SiVxhEVkqloHd7BeuZ\nxCBXzgN3pFAX+Dm36Z6ihUUeA2KEB1T63Pf/qqoMC0siYL7npK6cuhwdpN/O\nA2d75cp7Zy+islu1pdKxZyC3nINM6S+Vi9Wr8svDNRCG6ZPWD8rgaKb+UCCb\no0D7j9tBX4J22VjE1Wi2oNNc4cjvXJOnf9I3vLSyJX0oNbI1QnfSZlj315Dv\nzyMA578EH8kmNs3qJLMNKuaPR10ov7WuYZDSFx2C+SdyPUUd+lul9en2gWD8\nAGqO\r\n=RiOL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaQ0APitEIrTiprlyaJaJbuMIpc2tS3sm3mZRtSKtZTQIgPk8GsCyn8tSXTv4rClPDLgAUIffhcAs1jzdSPmhFLx0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0_1638340306817_0.7506436370580036"},"_hasShrinkwrap":false},"1.68.0-canary.955.e100287611a45c0b28b4eaa69357ba60a0b2aad4.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0-canary.955.e100287611a45c0b28b4eaa69357ba60a0b2aad4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.1","@sberdevices/plasma-sb-utils":"0.37.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e100287611a45c0b28b4eaa69357ba60a0b2aad4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0-canary.955.e100287611a45c0b28b4eaa69357ba60a0b2aad4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-R9MLNcm793FfpQ7JDkyE6DBrRsla63au1GsWkcHjFqj/Fx3eM3VezajKQ+iCOBlagPBymHY22CYYMw32OnOe3Q==","shasum":"f184f24d0be9708a51df138b90c8921e9898f564","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0-canary.955.e100287611a45c0b28b4eaa69357ba60a0b2aad4.0.tgz","fileCount":804,"unpackedSize":1678014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpxgDCRA9TVsSAnZWagAArq8QAJ6BUlLGpGTgalVfzTaX\n3VmHrkJSexEC1Pl/MwfHMFxj1GdM031AJJnPRWIjK5VUcZ2LGNQtS6dASdxF\nygs20K93cYBT3huIsZWE+IJIDVmOgXdkePcjNhshi0fawzjTSgVBkSnwbgEm\nJd/UeBIPWyxOQ6iopb0fEXKMEC2+Vi+dPBTkCvbNYVFY/dESyq+xEF+O0Fza\nCnpFwf1gLyybuU+gUCgkYDqObTahQL+0Ngzgu49mswCSJ7Q7VXoPno54ijaG\nIiH0rxoaLz+oLIkZR8b3iIvbNomPtRygYR7UbBuUd4CfEBRBgOq00EtS5Z+j\nsq/x1m0cr7AA532NxTJ9NW51wqAX015iTYJkDCk4zA9xgCLPiOFtLTsVE38R\nPkBGaYn6R48AIa/3b1nes+ktvEs9jsHnbMKVj35trCNJHCr0xlQDKOqVdHcQ\najuant0OPqWe0Djt0uO+7pH6vrE84ZOtaQsc5dvxKCxa+HNwbWhFuQsQtFFF\ng8nR3evyU25X0crmJQ2jg5u9KNk7DbpY3ZKmYh6ebspdflI/XZlNTt0xI055\nHiF11SQ2eFfgqSlltzV6sTshI7hoItbPv0i0iKNRc2CFYIucC2LF0GmAD130\n/vZbQtrwjyI3uebt5n51GUbjjBCTAryFEefx4/rUCyhEjiZEoHh0n5eUxSSN\nZ42D\r\n=yn5W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZIEElzHoJCb9sw35QZXuWa0Dk9eniNsG6ADaVQEN7KAiEAu3nwjtBVKpsz6YxGBVvUi5+OxnY5opR3JkDF19cQ0as="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0-canary.955.e100287611a45c0b28b4eaa69357ba60a0b2aad4.0_1638340610959_0.8735991702902284"},"_hasShrinkwrap":false},"1.67.2-canary.934.7ea0cb8d11ca8157f7ad42dcd805ed39add52f0a.0":{"name":"@sberdevices/plasma-ui","version":"1.67.2-canary.934.7ea0cb8d11ca8157f7ad42dcd805ed39add52f0a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.1","@sberdevices/plasma-sb-utils":"0.37.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7ea0cb8d11ca8157f7ad42dcd805ed39add52f0a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.2-canary.934.7ea0cb8d11ca8157f7ad42dcd805ed39add52f0a.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-lfcVukC54MXrmCi2hR7g5IYRO9IcLLe5A8p8D3FIXg5/lIgPe2WAX7LpaohK+JgOuvRr21bvXWUBz4ozv23Qwg==","shasum":"e6053948335a601db9bfefae42f9a4dc72e830ad","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.2-canary.934.7ea0cb8d11ca8157f7ad42dcd805ed39add52f0a.0.tgz","fileCount":804,"unpackedSize":1683052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpxk8CRA9TVsSAnZWagAA0uMP/36i3BFvV0vZlNwOmU5L\nsguf9+L81EOK6mx5bX78HPgw4eo+yYb/avRzkZnh9RgKDJEFjKZlKPfdrXlk\nDToTS49MF4PT4nYoyqnof5tebRe0CJHXJulCtQLaZqA9J9pkY7p8ztswKXW0\n0vwK1UJn0PgDtcsH84j9MDis6OG0yBMj1+w7JsCY5m0PSm5vNRCNLVl6ZQTD\ns/ExMqM9JcnEIPvHx9v9C5v38kdGUgmD8BoTQdFwxYHxyHtbW1b4Hi9OfOOq\nQD1HCr9VxVp504Zw3uaRRvU+0bnSKOooLNgKhOETN+2D5lZ1sX5q/5hNIMhf\nmUu2JEJScRcclEOMfbVX8xxa0YC+2gpz5MO0kzF4BWj0X3yg6anWkkqZjTsn\nMxLDj6sL5bjDVKbiYNx8D+jSUF/lZtpgsaGfdjtI/kDAsZAxFQ8RwfInaas5\nMvTwl1JhhaRMXLZ8TCcafmtiIUDu4WSFf2mVClS41jxmZ4y2c6wUNGth7vBc\nBMmTtEjI6CaLEMaWDgyozo3/jlQpgfqyYSdGmzvKfl0zAMkhcgkhNOoQCtlI\nqSztKcxrhYRFo5hHonBIfBdpPU5lUHqAt+sesPCLenLuXomDs2Z8lCKxAgql\na86NGzdclMGyIUO55o7N3yZ3v4NEwAdbGhyzvKWQT680/4PZMb75qYSiviIM\n8rm9\r\n=+GGY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEnqTR+6tq03+PAUH/98DDpklWOyf0V4310eh8hVzimgIhAPm36TgN/tGGoQE2//bs924pIRUvRGt9at42IjRvbsHH"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.2-canary.934.7ea0cb8d11ca8157f7ad42dcd805ed39add52f0a.0_1638340924005_0.311298233689957"},"_hasShrinkwrap":false},"1.67.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0":{"name":"@sberdevices/plasma-ui","version":"1.67.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.38.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.55.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0","@sberdevices/plasma-sb-utils":"0.37.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7434b0454f4693336b6b9668d7cced41c6214a07","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.67.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-j2LbF2DyYj0wxyrhELSfzLZzzHLXeNohnFLHXb563eXmKVsLVFGrdsckbe9bm1Zp8lAIn5qaaJij4GtfhXN1JQ==","shasum":"363c5d2e2a5e253b7086541938d22a49b7992dd9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.67.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0.tgz","fileCount":804,"unpackedSize":1684651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpyDjCRA9TVsSAnZWagAA6JoP/0HnQTC/7hw09HnQyatv\nle+E4dG2iGAEplBrW210ULBcQpCEkzvtlAW/+cLFtDUFgImzP5OjFRjlRxfJ\nj9+Gc1PbFOU3DjIRYJ7elvCMBV2zDGEkUeQq4AV6xeSajcSWWoHi6YK1IP4T\nTBZdAyndC2v3NewwUPCCLDqma9ywODp1hmKFAq7RQ9/ovv00iD+HbYVKYp05\nUQ4NQmf0+iheQFfDSqsXuulnt7V8WglMcYj2JIpSgr/uit+xe7C2vsyA/IH/\nFwKvk4SwkawvrB2lh+LMQXuBBjUOGP6IfbmljaUbirWvD47vD7pXnmGqRmwR\n0OeoIM0VK/GxA9pDW64k/FQ/QoRq3shxxamsgJZYfVDwK2Ea0tfB7uzAo02O\nYmEVMRgTOzpHHEHUHJd/l9TnTRMYjJe0HnRCNN0NT+SOtLWkL7Y4FgYJh+UI\nm0wgtK/DJisFfC26nmQ/Ubwc/VTMxA3SF/r+IfNRsEwQXQC6VKVM3p5+Kng7\n6u0RrLiPxMak/BoHxG/fDPlybTIgdILXZO3QUrR49wmb7Czc7fsT//2qmRSI\ng6BJ5BLEv1csRqIOXmGIKhnsZB7REzUK2MozXnMxWa/7mKu/IhO6Boi/DHP7\nlD799lmMQIeq+oA8y0SaG4pBdMmvF+608XKXHK1TGF5fo1bGXI+aIZs0riL5\ni78a\r\n=5L4E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvkqlwf92kvZgwamtQpAuBnQXGlWTAKnOHmIINPxhYAQIhAMpjCt5j2fMtk4lP3rLeIgZjjrdbgZKoggWk2GLuAjvV"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.67.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0_1638342883074_0.28117257112315985"},"_hasShrinkwrap":false},"1.68.0":{"name":"@sberdevices/plasma-ui","version":"1.68.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f3143c472ea227eff2faa25284ae50ca731b058f","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-P02Kp1h4G90HqWzNPvwUnMiOdQFPRa6XnYY1zdnqIyfeqPo7MwpafAyOJsIC/kVMu4talZlPqefB/wbK9f9EyQ==","shasum":"06ba542e56a4cfca57560eca529876a9c5f0cc2a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.0.tgz","fileCount":810,"unpackedSize":1682439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpyhFCRA9TVsSAnZWagAAYI4P/0OCDXKpm7vj/CS16Vez\n0gwU85/ln/3+jZDTo5KnJ1IxWzoAMlp2do6+oGSvXd6+5nzC4bXJfIaE0ZLj\n0e5R5zfH7G/zium56lZd92kfIu/gRg1nuuIXcW04Cpat+MF/lObtxv8aCpnW\nP5s7Ntw77HzHkvaepD0U30HH6XsA56r6BLFisnQWH+Yh4ibrHdqZ6J1u8GJ4\nQPdKfULEh7EKauX6XLdB8Q6yWQcu6yduWuu2tp77HO6OG4K4aqxE9lnSCHS+\nfWjJVQzm0uTc+ATeF4l+2sWGsnpravJH1xQ+5ne9nxAZXb/QbfA5z/v7A1/F\nnPuGMTb/u6tdY9EDLJdMEGy7+RPO3DaRy+koQIM+lVbfeiV5UUl+n6s1mSOK\nVQ9IiPlttr9DdZbQCXyrfR0ouWKNVhgaSydDqxqeZDyeGOL0qsTDX+NAgzgs\nxU53SJ7WFWuoyc5uGBjI8TXjoWsZtKaAIv4EaYAVNgZ6MMKc+DlWRgtRFLeo\n3/CDHIzXikGMfYFMMOIu51XtrFiblkLzOquQzCwH40AWstoU/jRY2dpkd2xE\nnNiy0P/RscxClAsdEcuSaQr3EpUx5hX3Zwk9+WT2x6UFj8zYMhd7xyjnEh8v\npGjiD3q9ytx2utprZ3fQX+cL5HoHthzJ0KZpLcu+Ze2EnlIVckXgE6wwzinN\nXxky\r\n=Owxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjgECvT84lM5P8UQoBXdpNBfTiK+sILZ1Igq+v3lZNNQIhAMuXgATQFLI2ozN7j5i2gY82Dbn5rfU/K7Je28DamQl0"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.0_1638344772799_0.5426523681662963"},"_hasShrinkwrap":false},"1.69.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0":{"name":"@sberdevices/plasma-ui","version":"1.69.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.40.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.57.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0","@sberdevices/plasma-sb-utils":"0.39.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f995137a41dd48609e8d4340c7e602d1e4c3265b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-+KXO39CLYGt/RDw/QjlIr26zAlbkfWXJsUQTH5SXXGouSy5cQu4N8g6ZUdibSOub9SVpA9Q8zIkELqQ4NbpJUA==","shasum":"26744f7c4cc083067624780808b914a8e0ef2f13","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0.tgz","fileCount":822,"unpackedSize":1699631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpzC/CRA9TVsSAnZWagAABA8QAKQtZFspzzNj/Cf4XRMi\nzaYgsW6iyP6Phprqxqhh6/Q71NcYPkftfifFeeOd/xDkeL02ZgexCLDRp+kA\nfCmZcXQg6iZMgDru+TsKGJtalHEJzaJwnfs4KFly3Ly4ALFRmxwSc50LWH4K\nMjHjZpEZXFY93y56Gl4L9TvgLMG6bCMj5P+nnUijVxVfON05twt3rfpCv55/\nZWJx8MTPqvwfXjRjsnsa2a3SYZSAv0+1vMrXFtpupjBXEgxA5MmRNXlG7BYG\n2Ck3yJYFwzxX+9Z4KFm7YeMxX7+5BmhD+CMj7tEqtZmsBulvKOnnXd5gqGV3\ni60xOgwXigUZU69EAlZpIDXBMrthNzzJfwuljY4kVUGaTs43nF1C2DvPcNCZ\nNEKtUUZPT5Dzv7dd1ISxy+ahr3Pr8NXi97J2gYocLs/jPETV16TMgEsrX+iF\n2ukbrq3oXw9B+zXqgBhWDUeHA9CgzF7Xsrj18OrB4jOTSrQQcD+crAikKdjD\nKQVhG00RWcxq6F9tG81e2QySlmOBRMkfR/8k6WWNVkA/xt8F99pQq9i0kNaJ\n/q+mSOc2wP/3pZW0peEK4opHbhmKD0o318tXm+OUAos2gMnT9IO+Jqvr8Pue\nWBIn5ie8dHvSsqdpndvT4uSjcElI1c1u8aQXnTqlRMTta1k2r9IKnrR8CnXg\nDGi4\r\n=7+Y+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7TLphoazRYW3H9tp2Gt4ISxypQJuJ1iKC6jP2CgqLPgIhAMwJh8uGBT7F31pbAle9xaRcVKtSsHMxKyjGkjzKkTZC"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0_1638346942822_0.45739072164135797"},"_hasShrinkwrap":false},"1.69.0-canary.964.88f020e0548de34b667842e635e9fa5d8a4a38de.0":{"name":"@sberdevices/plasma-ui","version":"1.69.0-canary.964.88f020e0548de34b667842e635e9fa5d8a4a38de.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"88f020e0548de34b667842e635e9fa5d8a4a38de","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.0-canary.964.88f020e0548de34b667842e635e9fa5d8a4a38de.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-475HQwxdpRIaVWnsm8mPP+MEL+VJy2qyr3fDM1L51f0fWJXZe9VpUm7pOJcNIOYcrt7CayjCdxpvpwzERIHTpw==","shasum":"214f5b4ae218a0baec3b1d0c0332a0d8f8fed6ab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.0-canary.964.88f020e0548de34b667842e635e9fa5d8a4a38de.0.tgz","fileCount":810,"unpackedSize":1684408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp0AmCRA9TVsSAnZWagAA38AP/RlKttXvEkf9WM9a0/km\ngIu7vxH2+LwuQ/1w0aCZC9a1J47VEoLQ4a3JftQ4U78RFly3RC5aN5irxlJ/\nE76Oju9uPvmRYxFTKDepp+FJISwV/8FcB8KrukvInK/0SUDVBFLXGy72g1O4\niN3sXQDpRE6mK6d+6Wi3mkHagkJUaDWL0AKRFg8Yq9/u5AvDxWe6eLVgi+od\nmUSoumuUr3pb+Fm4MGdGq8UZga7uCs4ndfguHKvkx0Ak8rUmMxcso2/R+/M9\nyGoG0u3Edjstfx+OkyhFEVz5Ad/JAp8wDfUjgzndxj5OicZ2KcXMzZ8zdNCR\n3r5cutopiY5JCOWlLKU9CZvrnhWZ+HZokXXhl1WOgWxBylRq3AtTa1Fymz24\np4al3/tXsAa3jEcpEmZcsw06pzBdvwJbhQ6dGGyXqqyYXmaHd4oMVz1255Ia\nE8iICa/eZyBBCJm6K4/ZcE+2UuID7uEINVrVnv35G0uPA/UIHbxT+h4hmlSi\nEYWoAlgKelB2eMY0mZbGk5sMzNMTitz9jPJ6Vc6iXrC1YosMIvPOP+zmY897\nCPy1XZfw9ilyiPSO6tMFJifhRR9U0iFYCvtgAR/yH/PrtKTpq/c7rgyyxMat\n1RAcBMoZG1bFJFLTYl0orh0z3pNktkiD8ePyknxiNKpUlNIzksKdRvfoRRkb\ndFHR\r\n=tZXd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICH8paoRELqLG8D8GGg5IMy2gLViPu0zSdY+XzpqOO0GAiEAhVYUj6eEJUvF7VrUIvAAECsfXkdLMmmB457dmkrwhZ4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.0-canary.964.88f020e0548de34b667842e635e9fa5d8a4a38de.0_1638350886121_0.5578853569156677"},"_hasShrinkwrap":false},"1.68.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0":{"name":"@sberdevices/plasma-ui","version":"1.68.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0","@sberdevices/plasma-sb-utils":"0.38.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b57a3c331043696cb92cbce6088c5728a86bfdd5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-yjH2a7waO7cJRyI3wlKHQNz1nEwVWRACZjoKRH4lBgzmCT/LOpeExQ7ztYfNKqQSRst0bnwQ2bzEtVly7W2k7w==","shasum":"8b096f57547ec7991ee26599ea9c0ce7bf6384bf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0.tgz","fileCount":810,"unpackedSize":1694745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqGRICRA9TVsSAnZWagAAZHYP/0ImYoAkGXsLwDti3P+J\nSjs8TF0NrrfJ6GjwOu3vO0WS8Bfc2mm4gSyeoVvRP/GuQjXyseNvNAd5l30V\ny6m4453FST0V06ln/sCTnrULDtzkNj0mNkTlYoMqjvTl8bYZ+BWSgzY83W95\nvmzFck2cj+QKlzEwnzrIVHLi9WRQ691mCjwQ83oP4FF+gZn+RWnAb7P76W+e\ngyxtliZUSlO0afvTP1XjTxSABINvT6BdCguI5pQQZaPXcyfBNsmYuu6bhIQ9\nc2gGQfsR1q8gdwEznPoE4PFtz0+G5YKreqjGGtlXdQ3LxAWribGQGKyDI3dT\nZ4s+0c5eGPuTPXXty+mWOMdw/kdlowhmZKFI+FlJn0DS1EThOCyZEZF5jK8r\nx8LIbQuNHfyBierjaRH8ftBy/WOCnGvrmf39ojqdhnUA3dfuoH/uVzX0Y/bw\nRQfy3kvFUxxBWiiXk2bYPVPgCu5kBHNQZOUmPypmNT2QsEln+0WNXWaS7sKN\noGVY3bwzYpnL90ooA6M89AYHHFXdRQbikbsVpb6+i0CGYjITtaRu+NTQV6Xh\nXampIJ3OAfE9dUO90JLdDUpVBfAaJZG9COItZ92ye5fIVWsGHsP6lu3sNA5N\njSnxg2wOuLNheGEc8cH6YcT3shOXioir9zCkcGcr4QI3OLq6hZi500LKFBLk\ns2x6\r\n=XzJV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/5x5AYsP7zp3upe8XSFNpbX1MTJxMYAeh/ew3OG6+KAiAAvpd50irhqzeOI3J8Nx5UT8iLXlKNLQ5MA8M80q0UKQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0_1638425672178_0.7313938623598195"},"_hasShrinkwrap":false},"1.69.0-canary.955.6905312ee754764d84fe4bc2ffc9f579d29b9184.0":{"name":"@sberdevices/plasma-ui","version":"1.69.0-canary.955.6905312ee754764d84fe4bc2ffc9f579d29b9184.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6905312ee754764d84fe4bc2ffc9f579d29b9184","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.0-canary.955.6905312ee754764d84fe4bc2ffc9f579d29b9184.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-vXCLA7nq/cZrPPJzu+ux1oIsdVD0TW1nBaNSstF+7X3omGb84TEwWxtajO8QBGM8Nb2MRwI8d7nV4lfZw1jDPA==","shasum":"b1c4130710bf1ff662f1d19f00efbf3f05dfc1d1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.0-canary.955.6905312ee754764d84fe4bc2ffc9f579d29b9184.0.tgz","fileCount":810,"unpackedSize":1683143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqGT/CRA9TVsSAnZWagAAK2UP/1Pw6JiwJwiu2Cdw29a8\nWWe0Hnyjy+8V3YKqK4SlGYbc5/bmTqWayFzG4ph+CLJJO8LSzGxbPeozxf91\ndfouPKBA3yIpcsbu0pZcLRBqXDRsgaBUHRU/YbLTZq1+7OnvdMJVJSjSmjV5\nz+I/0pDgvrQiFmzjdEqbDzS/84k5i6yr53hMsi+T0cCav3JTNyrOKDJo+M6l\n+MwI6yychtnAwHvwTJ1aGolrhFccn2qFzLkAm+M0uRwx/7M/QdGnSVmVnlUj\nH2xGhTC2QT7qTfFDCrpxWeP2Oime2OoXKO2n0Q/IWdwmYptbDBU/DlNn08JQ\nJIqg6isf+aBQ+jqcRQKNCgInm/cFpo85tnahxk5dIiCPga2agM2a+luAHvEW\nnQri97hH+dAFsy2Eakm95hs6pTpDuksZVaAk9Evp5bIHZH0AARuUB/pGP6Hy\nhNGQSLh6g70bCv3JnLNPNEZW4m6JHxdfrHZ8M3aXvO8/y9F79NOOJDN1WCGM\nlQufCUnx5qGKV6jP0K2/OiadXXOqQKkFwtcg1nKricU7SfEc3r2O4MBeJt2r\nNXzKLLepW3kTBP/tI87PBwafmqht8YWrdXKNcHgkCQJBwRFhiE52tH9+y/hH\nf2hTM3kOMXBVc7Xk0FVuKyfGCA6moPz735/onMQut4zacnILOfMubzJznsPp\n/Mn2\r\n=pZ8R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMLIeN8j+kQ+ZPLMsjFpiCClHCi4EynK49wR1gyWaKXgIhAORgiY1JMOJkc/YIfmxksPUp57Hy6+puwoCatZFbLHqg"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.0-canary.955.6905312ee754764d84fe4bc2ffc9f579d29b9184.0_1638425855398_0.5688503860721668"},"_hasShrinkwrap":false},"1.68.1-canary.934.bd06ae95e681359a8ba52c3d0edd23cc21888a59.0":{"name":"@sberdevices/plasma-ui","version":"1.68.1-canary.934.bd06ae95e681359a8ba52c3d0edd23cc21888a59.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bd06ae95e681359a8ba52c3d0edd23cc21888a59","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.68.1-canary.934.bd06ae95e681359a8ba52c3d0edd23cc21888a59.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-D+peV3k4zWNELbXy/t2SzmYEbnBISHhAJoLhce0Eeeq7tbsR+XI31kEh5kINp3meEGvCSDF9HltUUaf6daPlKQ==","shasum":"e4f375c422680823cba1bdd56e674ebe72bf8b34","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.68.1-canary.934.bd06ae95e681359a8ba52c3d0edd23cc21888a59.0.tgz","fileCount":810,"unpackedSize":1688181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqGwRCRA9TVsSAnZWagAANaIP/RdwdtRrfJR3M6XZtH2G\nDxce/MtWtECAPjRfFbtFB7yXCWchs0mojsYd87ZEelezgSjjxnZPnNiCTBiI\nciAP/Mrhok9ULO4sCDobMuuRN0GwBNAlvfcHNLI+MerUXLly35svBlDpvmBL\nalpV/cIqQUImS39Towb3R85Q1GD/wzf1Nyfl9DrcDcg0hH7IhdGa/RBVyay0\njNwPDmWlc6A66wWJikVzVupS6s/FVfhh7EKFxB923BEXV0QMi/2fW3UcrulT\nPvzWMob4WlDRihn1qACqbxGTEmFkrtze+9zk0VFjptbVy6m5JO5kvgG849k3\n3+xRB/yUIa0/ULREVyk1BuFw87Y8BBqSKMRDvp4YfquA4keTJ63poZT3EkaI\n6FfExBi9+CxRhKm78ZeJiGs7JKqMfZ2TtJUUxnvgCRS6D/IQe/MvrwlFlHOv\n5eeoK1iFHZHhajPBnvMoHQjIs1msdg7GTR8Y7YLa5VzIbEQqoX7DLC+C3TIw\nTF85eLWP/IGqHo1sY6RD2jcgsR19Xh/HLA2reov8cDLdxiIsSiaOrh0s6wG+\nS6mxkC0cbjxPl7PdvHCIO4m01sLriadgHV9LAOw/Xf07q42RYOfmMyYZN7e5\niBQtKTMhK1DIgG2sR+OBB6NeV9+fv8Lab8eN6bZH6uhphNxSigYNsF3kdlWH\nl76t\r\n=1PUB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPRus1EIUVNPCryolU5RzJH59yq3xg4u3XpHKo9+Ga2gIgA/gGAyJAYHnENcNGQJ2jDeR3Easu54z7mRaXHNzpTLg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.68.1-canary.934.bd06ae95e681359a8ba52c3d0edd23cc21888a59.0_1638427665429_0.8823589071584901"},"_hasShrinkwrap":false},"1.69.0":{"name":"@sberdevices/plasma-ui","version":"1.69.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d98a9b0e89e6078141a6840e3b0eba703e8d2575","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-SzBMQc/tytcr9BmMtC03WYwm+o6rPO+sQkIPEt1b0fsEUqbhm/R/M4Dl0HdQ8CiQU47LZXnDkg/Tw3lNdTpqLQ==","shasum":"93bde25a26cd27e2253c64d06c10096150ef3e05","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.0.tgz","fileCount":810,"unpackedSize":1683427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqHZSCRA9TVsSAnZWagAAMtgP/ismv/Uzb6iVIoV6HRTr\nLHbg/atNJ8zCnAozqh8tBatFMvi0h2PqwK4CJUgoRr2fPotn9y/h8HXihT+E\nMPq/xzxKbDfUB8DdFj+SsiWWDncio+HslhD/zfCx2iG1JrEge+IU7dARuHyo\nlxbfckBDZ0tlBaPjvWRr+L7IcdQAdW8HgO2zHt8ST2RfwzbRHNDdtKczOHAj\nrhvngMSVFZ6XZwKA3n72nV7a2otnpqJi1twNslu6OuHqXUBx7HgYGBNR399e\noRPKgKn4v8Zwf2JsIzS2AWhlYFPYDcN2G0jcUKtunHDH1o9XEVDTEJ9D6Vge\nc91k2sqcUbXNRIVuC67fYc8gdQjzoHDeUtaYBCnU7X/yrWIUnQMz1LwNocf7\npSNHMV3S89EdMTaC5jHRemmaa1N9MsX2xotT7osH/g0ykYutYVoojYeJ6ODu\nA8SHdA6nuTTr7j4cm/Z/TljgGCBb2GZWk4VYr69e0Vxb2cActPyF8ervSiTI\n8lOAExf+VJuKmb4xqipHttJwkyEYMEe0szBJpAvrvhMqh1+rIGkV3SrlE1Ci\noykwrz46ZLQse2xDT1yFPwTAhC2PrYL4Nma4S0JpkD+Z995zwp5ciHsXkhQr\nx6KPg4iFUDGR5y2jUXzrQwlURtKB/gQbPxg1OgmhapDO3zeDebRe4e9hzQDe\ndfz+\r\n=0r7B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAqog199pP9vQVH17T+X0MeQ8Hs7dOiVju+TuAwxSBAAIhAOI60zVzoqdR7NJArC5Yt77qNUOEl0a3wOs/yMB3FY+X"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.0_1638430290407_0.1321231885247831"},"_hasShrinkwrap":false},"1.69.1-canary.934.5fced32107aae34ba59f9a449a77deb18be157af.0":{"name":"@sberdevices/plasma-ui","version":"1.69.1-canary.934.5fced32107aae34ba59f9a449a77deb18be157af.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5fced32107aae34ba59f9a449a77deb18be157af","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.1-canary.934.5fced32107aae34ba59f9a449a77deb18be157af.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-j8eBeaOtQd3TZwoRsHpGZJ31oKRrhtco0ux49JnYFrMpeyJIkysO5Xu/CPHgVVzw3u5lqKSyIzplpzK1FIUl3w==","shasum":"1baf66c26c18ee01bef2c74af137ab5b5baaf58a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.1-canary.934.5fced32107aae34ba59f9a449a77deb18be157af.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqJGGCRA9TVsSAnZWagAAMewP/3qWIsYf5HloSp7qqj8i\nvMyB2C0EkMWmrzd7HIqbTEWedKhI1r5GLv0Cr0pUUlVuzXC2aAcbd/8AUp/s\nkJFyxHo0dbPi1sGwWHLGsV8iigS7IRBKiijhL1sy3Y/BdhtzzqESDgwENFKL\nMwqwFxS5Mn5CAtQmHmMtYAK1puKhnhJWJPWhoQYe4H7WPHWQi4FmewVd3Rcz\nDPT1A0z+8k/Y/saXhF9lfwymmYDqh/6iKdqUhTc8/aIEckiUVWVpYYiCb+WF\nKzpTUr1oPekt7eiq8EDeVoZeaAc3Nd4YA06p4GvF58lrf6yr4S9QwQQZye4A\nbBXomwx8gd1iC/u2aySDtO9CnJY1bBDvtZJG9/yBUuf5UUwDfjo4vrsSddS6\nB2QO8EHnuZL0RNH1tPDy+5U5jB+PuNKutS8JSvA8XSwh+tmgmkxd70EUt9q8\nDzVpf9Abr7wAaSP98ZwTZjpocadS8248pJWVagFci827ANrO97TcnDILc4bS\nOE4MTaFddsCknYhGwk/JcZEziAqQD61ZBJCv/p+xcrwj4iD/ELoFggC14ZMU\nDrvz+i95VN9Xh0+z3a6UpXPQiMCJ5+vqxIq70jZtsTMftzT1YfR0Nb9t4UU3\n7dWz0pEPsO9kukd5VJpQgG0o6n0+zjMN0D/ym4rOkhLtTEPv5CxuBTnBPNNQ\nx9xX\r\n=cdno\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyFxeXvqfDIWxOsLMjsUOKeA+XsC0RETfaVno1OgPPZAIgLYJZhG+R9I0ONo9zBD/zH4j4J3b4jKSjMCLlBmPgbBs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.1-canary.934.5fced32107aae34ba59f9a449a77deb18be157af.0_1638437253982_0.07564613668617048"},"_hasShrinkwrap":false},"1.69.1-canary.934.9616bf7fb7593eb6c2efc88fadda67f3228f4752.0":{"name":"@sberdevices/plasma-ui","version":"1.69.1-canary.934.9616bf7fb7593eb6c2efc88fadda67f3228f4752.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9616bf7fb7593eb6c2efc88fadda67f3228f4752","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.1-canary.934.9616bf7fb7593eb6c2efc88fadda67f3228f4752.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-3UMMufKMve+rxl66xG9GysmjbOGWaf/tciZsnSAQXspeFNRzXN0Uo4hdR2XIpkjcQDMrvK1aLMvT+QEgXfEJlw==","shasum":"2d01291272c03c9028455c459b6d46b2cfc5aa4f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.1-canary.934.9616bf7fb7593eb6c2efc88fadda67f3228f4752.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqJIvCRA9TVsSAnZWagAAtTMP/185zTjZBS0Jbl73l3UF\nTp7FJsSECoYU9/nNHxpxzghK7bGCN+9eYSg0YzoD6L3GXwWUToJMsPKjbSXF\newKTsV+NSBeiDHjyX4NWJcYmoh8fSBp/ICsGCYOXhFZ73I/vpjn4AQt4vq06\nRwuUihXajeokWXd6geBX5hH7ZvIfo7HKCF1My2KIJDIPJxBkKg+ceRrifeN4\ntfVoXYE0GCRqt0oYeAYqIwehdTPVkc26yZp3V6Banl2ROnJr/cfxvhlWu7qK\n6+RMEyLb2E9cLvz9z4Sc8NgULbBdqCn116EEGA4+B69/hGzf8jsLARIZchhW\nPXTPNg7YrrRWEiZ404vBcGoyHX5NfJ59qwqsmltF/CoBiPjB7k2qFTf1Evax\nqa5b+KHDIrgYqouo6v+n7bmspXcfyw0f97lsu4pN9l/c2EOx/tzeysWL3hS0\nV7dxa9E2vuxFmqDwEymAjC7yd05R3xjUeuhBjNKAQ4J5Ihrzmb10UFaUoY1/\nJd+mg4qd9ANw8N81pYzeaiXSNvhJOhDt3hWUddQbM7RVS+fs4o815LMs2bP8\nBa1TR7iGcqITEm60VuKV3mBEEASDVUNOBxEH6P4FGHpE4J37rQ8PvMUKhv0E\nRwuMkwZ/k8pZl85zklP+eXGifrm5Gi9fiI/tlqIiU+n4f/f54lwiGDtIIs7j\nXyIz\r\n=7Ofw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsILGS83w6+BdjzqP/vSRDaFZfci49bmDbxAjMHXQ7SAiEAl72t+TzyR232CNruhxD4Wk78uv9oYDdDWZ95JIwoEmw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.1-canary.934.9616bf7fb7593eb6c2efc88fadda67f3228f4752.0_1638437423471_0.18468732831856616"},"_hasShrinkwrap":false},"1.69.1-canary.934.e38bc3b56262dfb4bd0ce9a789688a6e2c4a680b.0":{"name":"@sberdevices/plasma-ui","version":"1.69.1-canary.934.e38bc3b56262dfb4bd0ce9a789688a6e2c4a680b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e38bc3b56262dfb4bd0ce9a789688a6e2c4a680b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.1-canary.934.e38bc3b56262dfb4bd0ce9a789688a6e2c4a680b.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-MEKZnbOeLdubEy/CEfGuJEX4pSupW9+wo+ZfENkWfpjkZTyrg8R/lmyA5QwzWmLvtJMNH5FwPRnFQpFnJPgK3g==","shasum":"822a81b40a76366c754e3e65205401a578c6c8d1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.1-canary.934.e38bc3b56262dfb4bd0ce9a789688a6e2c4a680b.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqKHWCRA9TVsSAnZWagAAMyAQAJM2tq98DMMBqxwE28Kh\n5r4WQbn6anp+XEUiIXtPFdLz0BQjW3fSEVF87REfxBeLEV4+L/GfqH6O5pEw\nIHXkR9Fc4XS2BoVXaDFh+nd+an20qFJIxkLQoDg1iQXeIzTjQlESTiOb441c\ntY0jfuo/jy5BWGJRSDWh8hRwGZIS4VlqlGBBuhQO57fRUJfwYRtGRoI7w3+7\nLR2kn1F1T1K83fOmcDbq86vjnwnviC87Mdtenc6BBJU7KzqigUG60IXiXLrX\nXyTQa1zjDTmbvnS1pUk+T+2VVv6bUCJM2MH1P5JcZ2hlkoOUG9H0E5mEOYM5\nDtc8q83mQND1eB4Yz7wWHwvFh2PVn+pGOi1L/LEvZ22gi5a2BkrhesTcH6iO\n28qhg20T8cQOAmj6CmHt4LJFTQ3yfArKGrVx2z8G4UdzPHWtRftxzKT4B9hO\nWGkFkTqb5oAPxW/09zeKk6nDv7hsOk7wcj6miCEo8LfyHIFx84CbIipEo14G\nqBDHdz3rkFO7u6p8xHoM949MzTaj/jIG47V6XKiWEub5E1eGU5VRQPSlNo5t\n/XTnC4lkI2477NKtbw7LcTMDNEgZA05OpsCkQcMhimbSuYYmvc94BYbxFqRw\nmJWGRsxtpBvv6m6Kca4jsAMDcmZLIRJJEg7D9QpmBxx2hBPLlH4mCzKbRDsy\nwsdB\r\n=9uZw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUzFJHGOEeVYAycVS2+QazTyJl4YIr2q8lbCgUP1eKSAiEAyNgXaZDkHss/1RmIUxzANCj5NB6hSgqwK/1VeaztUpA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.1-canary.934.e38bc3b56262dfb4bd0ce9a789688a6e2c4a680b.0_1638441430149_0.6153078249047668"},"_hasShrinkwrap":false},"1.70.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0":{"name":"@sberdevices/plasma-ui","version":"1.70.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.40.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.57.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0","@sberdevices/plasma-sb-utils":"0.39.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bd26b4cdb588b04c17964073f3f37cac6798658e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-aaMbtCHkE9E9xdSixciC6A5J4E9d1JljHZPQgui3ZcJnnooozIkeZqBvtj+EkxYoE4phnxora+VJTCjtq9YGBA==","shasum":"bf1b20d4d606b65ade44252d73c920c077c06a0a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0.tgz","fileCount":820,"unpackedSize":1711441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMYTCRA9TVsSAnZWagAAddcP/27hWqR3F+Pupv9YTaJE\nEdJMeyTZMmHWKEIwnzAd15e5FnUnmKNg2B1xeQnLaw6bzWLCYiuCUuUKbDFW\nfVkBEkVeRaFfnKX4nA+ijDCEb356gVCIbVt7CZPvy/Eq9sj2BJ9igZUEoZ/H\n4VxA8L6aM9/dvyBktmhRTChEk/7gEbZetXCIXkzgPf533vyMTLj2uoU87JpQ\n019fmQpEFOe8DxN6HnggAlBkCjoxglEMq4wAOTJfFWIH9A/nsqXc1ACuSmnJ\nc6xPCseZ9wI1omU/DxwWQ4/GLo522TtDam9Yy2QAnwt94BxKlPFVQu+GvMfk\niGqyKWPVFkodPeHgxEOIm5QCBqLDKNmG22rMjuZmdtodQiUNNn0cetd+rb5l\n+eZ6PSizGJf4PoU7MdTHsN3rkX8wxeSmUgsjVc+c1Y45SGTRj/1/BhPM/KR9\nYmA5oXDAEmcrnf9qfVuUnErZWuHLu5+VE7U7Pg/jm0imaj6qLQycQeIJlO8i\nx+39VEOBoEuewQ1l0wNb/BpzRsXEwmMBaiU2q4oWftJa3A/7moKT1p/oqbuF\ng3AuI/y5ZpnO3kcXU4rd8f7JBfkO1wBgqtRBs5ikRCEQ2dlUIosUy8QqgAlh\nOvmhFaf4+LT4Vq6ngqMQ7cPGMxPZ64DB682YOxVrx8GKjs4PA+Wl/NLzWz2o\nTDMw\r\n=cLUS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjeYZnoDGDnt8NXEsnl1pnxcAycJTBgGv1EIbTRHvapwIgaoUXWuwt5QLPBlLV19g/d4pfvYPHg+dTsf9QEwOHVCk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0_1638450706931_0.16016105974619665"},"_hasShrinkwrap":false},"1.70.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0":{"name":"@sberdevices/plasma-ui","version":"1.70.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.40.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.57.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0","@sberdevices/plasma-sb-utils":"0.39.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f94c18eb80a568c819ea9852a54e34d29323e52b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-xf+QZojak8nqRbV1I6f/lM6gx+OHY56hAcnpSS4MDM1EBx+11vp9mcqIcHYFB/SUdgviVfID0iKlSjElIqHgyA==","shasum":"f2583ae7b56121df01bac65029f30835d526f020","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0.tgz","fileCount":820,"unpackedSize":1711441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMrKCRA9TVsSAnZWagAA1aMQAJCXj9E9moVMXqVaIiwM\nXfOVu0nKBjulowzMy2uEzkVF3ANni+ejIIG5NCE3QHjZyZ7VJJlUIt0XWMUH\nQBSRcGoZ93OTTVp24PcD8Sc0ju1UhAFTRywTyb56AMuZfCYmsNGmTGA8W0hP\ngdm+CLDppCMvtLscWxFn1nkF+uslhbZBJ48J5I/RclefYRX7oJk25/eP2E8u\nWKRNVRHqRCjPTbQib7nbHmCUs5FUMiCG21fktAaN+WB/d9cPhIxb2b/yMCmt\nLc7+E85Npt39QuHSviEhiIUiolN8lz7/l3UcwfAXAsquwpsFhCYYUcRUHkaz\n1Raw5yMJ7HAS1t2/a+7hMOz4qhdk/ONymWsOxfKCm34pP+hPzJhdcG/LQgw4\nrKLG0VayE0Dr/CP6sbAGUWypf5N0BjH+y8Qq78KGUZ2laMkILqCZHk45RSLg\nvPV6YlNAWNluChKRjNl4LiUtllgrZUpOlcssHRmUODmWZrkddp4zyJQF9MJO\ni8F7iZvQ591ZkRaEBYer4LGNYxsEU9itBuyAhnaot8xz5HK8ueheUw0tUGrU\ncXJRKEVB/mKwrCn1gP5BkeRwjczhOnOr0pxRWUqUqpBf3fV/Snq7wHRKL/y+\nfoOUg3YJdixESP6vZxcCqpI/0bc37Lc+qwGsweYQsr6S6CalBI1koYiqYe+b\n0EIb\r\n=xMJx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBWpO2oSRb+gSWRBS3Mtt1ldDF3huXWAi3H/tlHW9WfAIhAKffKp3ImuLBXlk34FR+Qe/YDELH8i+pdXjJXMLIlqG7"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0_1638451914401_0.2937715885458785"},"_hasShrinkwrap":false},"1.69.1-canary.967.c6488203ae544e49386f06c347515268bd19c683.0":{"name":"@sberdevices/plasma-ui","version":"1.69.1-canary.967.c6488203ae544e49386f06c347515268bd19c683.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c6488203ae544e49386f06c347515268bd19c683","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.1-canary.967.c6488203ae544e49386f06c347515268bd19c683.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-3OLYwSX2e/FCvj8jwEuyJjbrBYIfHmWGfgMewEgD53xcH8T4rp97+MVpwmJpRoikBUmHSvSYyN7AEaOWzPeN6w==","shasum":"7c5ef9d463c1baece55bde21b0e6cb65f4fdb6b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.1-canary.967.c6488203ae544e49386f06c347515268bd19c683.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqNGACRA9TVsSAnZWagAAATwQAJVZHStc+DZkrIdRE3Dx\nKhsQ4ZLYLwLROKEMr/oFaWMSoZvWtUIxEGdyel79yt+EhvraLAvHyhRgUrzY\nvLMMifi5KafI5W4u7q5WgpLg0n8ztPp8BNsIkc1lok3P/TffSUzFe+Zegsoa\nMMPOyH8CPp8ni1KbFum/0VpAulmavwQL4k1flgy6J0bT69OtMZbnVpvjlHVY\n68OCb4spGObAgfEMn2fTX4R+e9xVAhvartXHXGIh+AWzpAAQMWWVeefELJDr\nM0At6Xh7m8DtpwojKlsqoZiNIvQcIu6vA+36TmpfVod6lnzhAuKVKgo2aHnj\nAyb2+OlrjLArOdtxj55FoVaoJ/eKa/88W9rTV7WespUbbW2Px2npXCg8lYSu\nmL506q1QbQ8aZVzuFovzB9RcyRP/eaVreoAkrnDP7cEl4KQ8VRZok9UJ6tMO\nFNXrrV7obAoA18EEwJoVOzrMjUcQQRg6JvI3KhBb/s3SRqEUqkck78ZtBwSG\nKsR7A/4eO0TmC56o0sN5SXemSw7wOJLvh4fkeP1bct99p8S2cDSjW6e8fBy3\n8KnX+UC8uSglBM83Zcj3n5ywfi5eoy6EUFIBfEkOoSZkBfxmBAAN+uuFgeNt\nZvq5MuEfwETWLFJr7D64u8r8TuzUUPwXzOr7BHIzp8fCq7kR/U/Acu9KgOba\n6af+\r\n=AJmu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRDWcYYEfRXQ5BQzZi7uoyJiSqFGp+QKQkRrkE5qfgyAIgVkpKBL48uqUb0usb4af2uESLUHK7JlCWAbkC8Gv9CB8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.1-canary.967.c6488203ae544e49386f06c347515268bd19c683.0_1638453632508_0.13453710341884273"},"_hasShrinkwrap":false},"1.70.0-canary.963.ecf6b6ba591c773c016c8b70c9d41599f37dfe33.0":{"name":"@sberdevices/plasma-ui","version":"1.70.0-canary.963.ecf6b6ba591c773c016c8b70c9d41599f37dfe33.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ecf6b6ba591c773c016c8b70c9d41599f37dfe33","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.0-canary.963.ecf6b6ba591c773c016c8b70c9d41599f37dfe33.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-4OyYqOnENvCHwOMwhmOzogLpe69TK1w5Ox3mc5/Ornb/UWJJvn8YHXN0tPhsCQwQWU882lttShs8Sp97+KfHWw==","shasum":"b730d6629231b5122a8ad853af9fcad89bba2deb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.0-canary.963.ecf6b6ba591c773c016c8b70c9d41599f37dfe33.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqN0tCRA9TVsSAnZWagAApWIP/iLpXM6N4En8w+/Vniec\nIFC3ixqXk6rjcVPTL8fMcc58aihW10Ol0h2hiYIWzjScdgvXGE/q2kBF5Grx\nmsLhOZ+BVtSuva592tMibfxfFSh2nEtNFtwvabMZEO5+jnpUXihHZMXYI/yV\ne6oomNdsmboS1qKdUUBGfSwS0ybT8BpHqvtW3Jb1EdCiHbYZyp1zZ6Ldwivc\nkcgAnmB7oU8qUSKE1HOOoCXnjZUAdjhUK0xwDeREwYGJq9Dj65q/OvpG2JpI\n8B7Lzz5+NouP3K81QQn4bRo2audmSimcVcJZqGSmVpTmUVdU4WWwA15uZpIg\ny37qZHOEgv+6zbnkMsSV4ewYgYIQ8VnmL09AmZ24FZw6qcQbpGt8BwO0jX+0\nDUOSX3Nbg6AL+yoI4KaDaeG+XMxpX747oIf9Dtc9Mc2aqpozZVdWZRfhSyh9\nNb8ZWsCC5AsxjWzakkruIhZYZF9MpV6Y8M+D70EL09YCANt9nLxl/pLcGjAE\nPx1Nqgrb/qXgiXBFRDIs6wRNOmVRmFOYhCIYZrMNmfk08drrgzwbH5Tsz7YW\nUkVgJheYD41wi5m+IVcYTr/Bzq1XE5ISkc2+2pIVPmBQFNBhNkVaTTG7l/MW\nJmv0jqCqrV2kcY4PIoirVsU5PwbF32kGhPm+YwyBDA07OIvNRTOklODXs+cv\ndw7k\r\n=9LDC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWA/O1CtT8tDEuIvaeWWmRy4CxWbDzNSIlcojU4btA9wIgUjXXDxDmKQsm1ULWAJxdZ59dA0h00otJiE21AmUSh/M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.0-canary.963.ecf6b6ba591c773c016c8b70c9d41599f37dfe33.0_1638456621701_0.09503256985230779"},"_hasShrinkwrap":false},"1.69.1-canary.966.8771157b0d82c4e3dc9fd26760fbbcbea1615737.0":{"name":"@sberdevices/plasma-ui","version":"1.69.1-canary.966.8771157b0d82c4e3dc9fd26760fbbcbea1615737.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8771157b0d82c4e3dc9fd26760fbbcbea1615737","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.1-canary.966.8771157b0d82c4e3dc9fd26760fbbcbea1615737.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-MCRn33Lj8pMWnxKrDsn1s47FbRXRv9rHm0YcCXaDd+vyWQzSFBrQDi5qJidaSLhEtEh69NIdVC994ijJ8QyFLw==","shasum":"7969aecae421172b471dcb150d8189527626f73b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.1-canary.966.8771157b0d82c4e3dc9fd26760fbbcbea1615737.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqN4BCRA9TVsSAnZWagAA5MEP/3O51ZWkPvsXlIj8RYSJ\nwo2iUoYxiadQy3PCxUA5/4SRcJDj0FdBBf/9Zf8xQXvWmAs8AjjXvxMLQlLX\nD5atD/sSVKgg8qdJVjNA/KPiH3/10c3t7EgIWcT5H972WjflI+1MEDT3nhIJ\n8oXeq0FFtBEXIkmAD9eWD/j+AEXjAmv2hbwIc+C9D/1Rp09YnLKNcAN0munr\n3OhnUIcFzt2uI2PwYXbkebLXMhrJOlJloZFpQq8G1jOcNaxnHkfJxIN2ySv/\nG0OLMDz27DbpWht6ercyA18jYyB0Wx31r7zOmDTjfcDVVeoB8eTvPmGHM+g5\n7wDKRdZRj5mFYEATjUv6vHplqF0iO5srUIXYemXGo12+dcYhwD4Nes3K5Y+d\nZzNoWqo2J/4IRbNodMrVZ7KYI9naFa1Y91PjndZ+q6+Ah+4uO300rFe23Yrg\nMmpUseIGpeQgOXSTVMzbqiZmmKyhM+X1ic9gKnm7F5x6n2d7bFK+uh+XVrRk\nVqhl6czdJaFmGXBEzGp0axQK/kdk35A2km6qG1Yro5n//y6K4563nE+J7Pjl\nxmmm+EAsT8fBBg7wvszTmvLgCGh+eV1mhdRjMNBqubBc4H+yawwDYAPI80wK\nmfuiSewYiQO0aOe+9pTNxy4es7x7bJL74khtjpSLm0elXSv59vPYMfKZfU1w\nv2xk\r\n=3dtZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnPfB4ggt5ckdoBybaLtV9VHqTak0DRKMJ+P6fVBzriQIhAPIwS0PtY9Cx1LSAEpn1wwCXfivash+vReomULS7Ov4T"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.1-canary.966.8771157b0d82c4e3dc9fd26760fbbcbea1615737.0_1638456833764_0.6388589177637174"},"_hasShrinkwrap":false},"1.69.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0":{"name":"@sberdevices/plasma-ui","version":"1.69.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0","@sberdevices/plasma-sb-utils":"0.38.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0e7e96873317c5208ce16f36aa190061ccc2e216","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-FMMAdEK25t9WVV+ARl2oYu6xgMQnQ0yurTVTMrVTeWdUx0NCVxC70XDnVcy9WUamVNv/zhsaa9AuU64zv3HdqA==","shasum":"a840a065beed66bd718808ace1aa98f1df81faef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0.tgz","fileCount":810,"unpackedSize":1700969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqY8dCRA9TVsSAnZWagAAJc0P/3nEALHzDYgCJcTQFRfE\nY5fKPAR5sGpJisivdMlE/UYGjTihD2Wic+x4ita8uj4BX0WzNh4lH4ijhTXo\nV/23Pj+WGuql5cGohUSgdQwaFUbdTF/daiHvXP0p7fKYSvwxv8poSg1ohV4B\nCyJ8cgEU6qnn49NQZYF+G0HCAKttRLY3OiD8DouyeXkKbV+fmwhWCVuPW7YS\nm1Utwsm+efsUSi+x0LguD0l9sqJ5uAJ2izu2JVh4iugQhUsLDaGcWPl7O6Dh\nUQJXeL9BZjOE8tckp48xuc5OPFAdAc/M8cnhu//H4TieIj+/CsE7vT620RIS\n4ZRscJGPUBcV2QgDWvpDyVTQbYA3qePYBCEVQmzkmJPMYuuW4rLODg0dMcja\nvG+lysiDcULlWwzYwnr4eH/gprrz5+oMXxn2563k8azo9WeEakvATQVvzM9p\neSKfd9yBsBJ1JM+0Ti5ZCVYwqowaT8oSoU9mkXryCTgN8YzosSOImhQ901Ah\nqJm0wiXRTvucbr4osjW/X5Mv5Evbx8usValgFKFwdFX6cx6tLxqG+jBCRHu7\n1maTZDgt8BD6kMk9D9SwgY7xFFeWS0XftNdfl7qVyvtq6H9P/kmxI/v5PEwM\njxzYDJ77aH7BANGE+CrW10dTqgWIxvVXypHCM/d2EQIC5inmFZIcYbiD9+R7\nrULU\r\n=jRUr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/pqoLmgC43keUBN12a3/IxNFIZ+606Wht422wr3d4MAiAwNL8DT2v+goedj5YUUZlBv3ThoeswuQGVd9Pd4sSlRw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0_1638502173108_0.6430512430764408"},"_hasShrinkwrap":false},"1.70.0-canary.943.7e97113d97caf79a5b13de569db2d07f15a8b5b0.0":{"name":"@sberdevices/plasma-ui","version":"1.70.0-canary.943.7e97113d97caf79a5b13de569db2d07f15a8b5b0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7e97113d97caf79a5b13de569db2d07f15a8b5b0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.0-canary.943.7e97113d97caf79a5b13de569db2d07f15a8b5b0.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-9FnjRzmRNGEa2xMazZg46eeGjB7FGlbLAWD78a0OAIb5Y+SUkGURrZf2gtEO4Fee/V4Za4AtwoFs3YDZHMkGiA==","shasum":"88f5b4d6d9d446f2da46b8da6141de872e1d4c15","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.0-canary.943.7e97113d97caf79a5b13de569db2d07f15a8b5b0.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqcrWCRA9TVsSAnZWagAAPCcP+QAYNlID2Z2QcmW2wWX3\naq3yn7XUHATxBbqdfr6zspHY6NhcvvA/k7zAcVxztKKDCTVaBM6kKBAtOD+L\nvilsep9WIia5yH4LVNFtfq1GDYO9UGrZPyvuL+sF5pAkIlbbgw1/S4bX+GuN\nmjToxZzpTqb34H+E3Q/w2T0zAW6Gsg4SI/TpglbQj3AJT/M3BX/CZdMjV6te\nig+4+dlLEGcK3iNplEBTDHX6iD6O3UmffdqSE/ZMt9EgQnbyqwPxQ9z/gc6w\nkqIT7POXr19unnqrPa4bV5lqJ9SpPYJ9qbZuX5t0gzMTdJZuTtellquGdeut\nwOK4xaiIEj+ySjBUyv5TE8SmFN79+DAmbuqkpgYnZFZ01D91XSYK7ApJWJop\nR9JUH6FdL82H365FHq/35IG15axYqaERwZgGjZcoz3FduiJ3OvVJub4aYdnr\nz9+VUXGRNv5+wzysr4f4Sj8CdmK/VBPSDHADYh4JbGNJAQIMFZfHWre9wT21\nZaSjL0fzYvMHDxvIlDCqB/Aa8HYOLBZUgMtkx3iPGc0kFNtJPXJFMoIqrLd+\n4DZyUo1LqO0FuNg7mtfTJj7fnIJxTOq2ol7luH/nV2eyHHBPgSq7me0SijdP\ncX9XxfUUUCFLn8aCSTuUiwMCs+pjVE55e/L1aOeSgRVIIkCykRD48jq2IWVU\nnPQb\r\n=rUPT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGMCubt0a+8/qUZdY9oYHrtJgymSzcml+fdfewrZYNeAiEA1K/oZoxLOKbcMWVsyTC1OLl5qpherwGTGoaPhNBLdJw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.0-canary.943.7e97113d97caf79a5b13de569db2d07f15a8b5b0.0_1638517461948_0.33661332639745134"},"_hasShrinkwrap":false},"1.69.1-canary.966.720ecbba5498cd34e2f33ecf369489002d08bfcc.0":{"name":"@sberdevices/plasma-ui","version":"1.69.1-canary.966.720ecbba5498cd34e2f33ecf369489002d08bfcc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"720ecbba5498cd34e2f33ecf369489002d08bfcc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.69.1-canary.966.720ecbba5498cd34e2f33ecf369489002d08bfcc.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-N+oI4TJkc1GkSE8+avLuVZ5Ti2QzTTG7I3Z+vFmOdHOvsgxc+PUiqKe+7Tra3tNu1mXcdEmjNeq+rTyBzTFH0Q==","shasum":"071860c971e7cdd9b3b556d83050fbfd6b4a07a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.69.1-canary.966.720ecbba5498cd34e2f33ecf369489002d08bfcc.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqeA/CRA9TVsSAnZWagAAoOYQAJxs7onyOuPSIBkYXwaK\nx0uka8FHuOoxwwoWQcLe8Jlo4v9RcCR7ARr+r3LahXDsPuf+zl8cTyZwvm8F\njPuL7crc9+udXVH6aUzomAMbpbnmjASJMrwI7qY6TrFyB5468FhRYI8/8z0z\nQoq2bU/ylQtFD5fNJpiLcqMzhqdp+ixBwcBcV++EUuKLOG4+FFQxxCtzuoCx\nzagwx8hyxiKSzYRq5kGEmzhPhgJ1SOs/QdTbLk8TF1fpCgFI2jFEohIdph+v\nyWn+2T5lls7XyNLRVqpPFQjjXH8exNALLZmAF98h1gNMnA7a5sdr5iVpo9zs\nzzpnKgc5lYEw++RAwdMhss1pTjI+JXtwz8M8Skpq6cuFKhYTweAa9EhQ9g7/\nRKhIYqqQzjBx3GR1JTGWY9H/HbqF/sRKQHvkXEAhgR+IhNsHrDDtmOYWNEVT\npKfxnU0294xbi6mB9blD0XWOhj4cnyKT3UrbKxBLVzkUUuW02G84yxXCzaAd\nAQlp/B8B4h1zDLCa0dydiUyCIO2zFt/kkYOzcXn2uUr0BxbOOVyuHZsilAvv\nc4pM6X/KaRDSZOPHnnW0yxP3B8kdyOHvBinJRXPRqHA6nmRJogPcZOzhVUCZ\noPk9JfFvS8ZUYZI6/711s8qf5C5d4wuPZ47fyxcowf23didFC13bDC2q7MMQ\nNaDm\r\n=szGc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArlpsv9kBqQ4Z8JRIAnVNcVuoG8O4og2mjSfchHFbVgAiBAQD5J1A9cJuu1bPoeP3gnyrT4m2cpyVo9wMm6OzSwMQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.69.1-canary.966.720ecbba5498cd34e2f33ecf369489002d08bfcc.0_1638522943480_0.9326647585711447"},"_hasShrinkwrap":false},"1.70.0-canary.947.2a0c7098d63c6ad23cca298d0621bfe7f86dfd76.0":{"name":"@sberdevices/plasma-ui","version":"1.70.0-canary.947.2a0c7098d63c6ad23cca298d0621bfe7f86dfd76.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.56.0","@sberdevices/plasma-sb-utils":"0.38.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2a0c7098d63c6ad23cca298d0621bfe7f86dfd76","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.0-canary.947.2a0c7098d63c6ad23cca298d0621bfe7f86dfd76.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-JOQNt5FQNlxul/hF2lJLpNAi4f8WKbkmwhr1lLFe4esQhAc3LI/ZFKi6qv1lQbNOPEOeZEZiM7+htNA9OOTfcQ==","shasum":"f9a291f0df87c54649488d2eb6bc162332c020fd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.0-canary.947.2a0c7098d63c6ad23cca298d0621bfe7f86dfd76.0.tgz","fileCount":810,"unpackedSize":1688717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqfDUCRA9TVsSAnZWagAApocP/2nhnHD1WO3qFdOUwH5A\nzgYyeFNgFE9bYuhPzl3Wvq7NEKFG9Od5W2VfehWXP5xjIAUZxwnDUrXb0Mu+\nKQ35oSZCed9zG6hjPLHIBG6x+mN8hy+z2eIi72Oq7MYyk670Uu0cRr02k7P5\nObAOl7nfvnPYhxGWdrT2Reb2WJNicVAxbzq/oxAMckzNCi6CLQK4PrpTqqb/\ng/fLF9UuGkCA2rXEnA4BjylTXwMgokBz4siA+ngXW4K3AsduhIExRjFPjKhN\nOWQiug625Z8R6yEsFeFxvoqrZBtErVviYQNv8fLk+L1bWiDAL99pGs6faMmA\nHDcsWhaHqB+Fo1zawe2MW57p9CHgmcTWOcoQehP5iSdY/6VbA47ovw2mDqO3\nU7DMcCDJ1BpoBwylFeiEgIyZNjluneZiRABhUips2M0/RDHE2MtIxoxNPyLy\nLPWk/ky2sQ/eX3JEJyukuHZeJXPEuUqnPy0EgiPtI3WMOGmrQmo5ado2fIpI\nrLPUWotGH6BMEDcI5NrhQEu8HV3ZWXDYbitFemxeuX7jCtYS5dbvXC9sZ9/t\n7JHN8P8Xi39BchfVFKza86iq25OhYKyGsN0d8yI1OX4GHjWSFJrZfCCzYR11\nHHmWA+Ph6zlvChVBYxKXffkg3tQDKHTXSxGUVMYDSdH2aCSnMNyEh4n0kQn9\nQ9aY\r\n=+rJX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8hm3fvyp/av4h5gY5hRz3TwZb9s3TExOR6J6ygS/gDAIhAKnMPFgAXI0Wzra3ZzTeLXzK0FOXpvKJbHigun47iWXF"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.0-canary.947.2a0c7098d63c6ad23cca298d0621bfe7f86dfd76.0_1638527188120_0.45393461624493736"},"_hasShrinkwrap":false},"1.70.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0":{"name":"@sberdevices/plasma-ui","version":"1.70.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.40.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.57.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0","@sberdevices/plasma-sb-utils":"0.39.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dbae3196634f9474a2f61a41d25f20bcfa8bfc1b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-U02WmeShDUQRxlAJQxzmIU4CktleawJH2Tw0b2vBo7xHQcunoOmDXgJoyQF/MgdhuG8X+d+BYuo7A4H5GbQ1KA==","shasum":"e54c4c9b98292edc19de0d39ecb4116b952201ac","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0.tgz","fileCount":820,"unpackedSize":1711441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqfTUCRA9TVsSAnZWagAAqYUP/RfUfojnYOjlDe5F2Mgd\nPcmpooIWK1+6VJHubs33OqQ/0XorURu4jy5nKUbbKOx/gkC/gc89bD9AhUyH\nf8Jd1TKeXBN68RfsOqeUrV28zybY+P8eQOy4E/SbP1EcZZTSn5Bg2MVDRseB\nMTcsGXeG8hAYARD0Nlwnmc7r8Bay7LWokSPtC3U3rYdoQtEPGAnXUOh4sdJr\nltxQaaaEqoc0F5zDyhy43GyyivGWD004EtPYiJziHQFJ7XMI5Qqm2zihx6Ly\nsbmnOvAFO5iFtzJLjmqkmPktCWDIPDicPUTjVo56uWys6jbg9AZ4vFV7ftPs\n652zSy8p7DoAzk2MiM5/mFpxTYK7uYRjWnIb3PIxVLwZD4ay1WzyVJZkBqmN\nVgH8hqqGqrIVtFpymLBcKTDmMBQQNi+qL7hylHEpo1QKhkmq18l5WA+SWjil\nW4tbsNzAFEouqtYjX9z/7JuUUocNrizveV66GQGP+hkDWXBNXDPWUmpDibsn\n3BfhfJ6gYcXmkKjrFWru1+5SWylSCOh3NR10gdUQlU8hDqJgllXSpBdQTXgu\nwbdG6sGwZNueeiov6/XEP5tsaHxmz2Lw5tN0y4s5fUT+wc0HMCup4KixA2zQ\nfaPJ1gtE/SFMhtpR/8CRgIVyW3iGvfP89UjwgWYxz3dx8PnM3IZr21StXQjE\n3L2f\r\n=g+4P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbXDQc+cl4DfAZstF6GenSdD6QXs8UhbqZDv+3BJ8SYAIhAIYi3ljSwzHChjOf9xzAlkzxBADZqIP5xfM5Ga2WiLAr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0_1638528212091_0.4574663875902065"},"_hasShrinkwrap":false},"1.70.0":{"name":"@sberdevices/plasma-ui","version":"1.70.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.40.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.57.0","@sberdevices/plasma-sb-utils":"0.39.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f4f32f709dc3b64347a19aa44aac496799075d4a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-UiKhfgIKeUIzCwyR8vC6eWpUCbBHOScsSSTwPUmTltcwoG4axxF7GM6mnQTNTcSfzZ3gd0MBrauLCyJ0Qbp5QA==","shasum":"43dd42d852211a945541b7cecd75f86a2e9a9f48","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.0.tgz","fileCount":820,"unpackedSize":1712143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqfm8CRA9TVsSAnZWagAAgQYP/jX7OfjY9fXcy9O+5bNn\nnK8Gnw4Pu2kWMukik1PHCuVZP8U0jO0hj6vIW6Tsz8oQOTA49FzDNdqRkvqX\nFuW7GWfygAnzdG2r+aJ57sJ3HGc1CNv9xYBm7LWgRTRm++x647ThbsD5FYRP\nRIA2o/1zpraNwH23LIvOqCFNAKmMLVRVG+I8TteeUqwfRw4vATOBRhEcBJgP\nZXL5SQ10bLuDVMtD06CsdTU2KRTa8+Dvr6qPZPehBe/e4r3hTdJ13lIFWmTB\nRKBYyfnXN+toboqzKbf20inu+3jyOBX3tphINYdoFJ079jDbJS8Fe8nqZt9g\nAlRDP+X9uVbPKXU8madG81mdlS1C3sNsc+iDL5HuUM2235cg9viP02EAcZA/\nokLuhLaArq7A8A08DUIA8/2l5RrbvmKlaGb9kdOjLD/h/al3Hscanpnq0sWZ\nmyRptdxbKw99b9Xl28LU9lN1k7Jjd3fwrGC9lw496NxAIUMPqZiAF4XUYV7D\nL5J0+qKR+ORRLxjxz99VjdHk/eJtk8KcZ4jDLgyFkLAqWQUbCjAkiY8B6+S8\n0SceWtDQ8E4MzFqa1kbeODVr7IrvRrUKIdmr4J3qH/W6TVSYLPgNQ5PyybDl\nobhWGFjOepCDucnqOzId4JfW6U+Tc1YL+wzPvucESM/xkNSXQA4TazC2Z6aU\nIw9m\r\n=2F8g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfnixgKIJ/XxKC3TwUKVjEHRcuD6IBbFr4OohYMrltsAiEA7OaDIrSw2kpWIw/UtiiBVSYAUP4bt3G3FV0T0Y4IF+Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.0_1638529468071_0.6970146782921864"},"_hasShrinkwrap":false},"1.70.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0":{"name":"@sberdevices/plasma-ui","version":"1.70.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.40.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.57.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0","@sberdevices/plasma-sb-utils":"0.39.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dedb44722a822880ec8ec5a7e85646787897ded1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.70.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-s1zJpSNhPNtl+Ih3DzFfJuon17H/e2KLQeqZRyqwb0YRa9y0rOKLT/XREV/fJ/8d5G1OWZGx/A+pUrkxH28TxA==","shasum":"98bba26508e02780aed2e25fbe46488350807273","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.70.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0.tgz","fileCount":820,"unpackedSize":1724449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrZ4ICRA9TVsSAnZWagAAf9YQAIiqwg5lLM7KwQoOhGHv\n3qFgbMisl5uZujiF4l7A8nWPbEkTRzevbWIXjMeVaUafHpaITE+fRn4U5z3o\nfRvKuPa/8rTmxZbnJPsBGX7YGMsMc7iaz4x5OkFB5Bv27P5iCqSBCJ0qOn8v\nvaalepjO2a1fsCeQv2/hyeXhr0aOhfyZ51fWvdxKDaCeSCTXA5Fxra3Q5PDJ\nELBebbS0xKsyB4BykrqYzh4QGJetyRcAduUmTKsuKvtbiSXjlhvQp37ClTPg\n7gsrQpWRZ6A2ovvTirM2EyYgjOxqIjWA6qjmOAYzBKpIgWfkWnWV8YZdGCAf\nHwkR+FO6R68XT/HWhY2gyz9kUjHspfKoql86ZzKt4tqKKgvc7k2FKgW+P96X\nH/UwI3qsBZ1970B7+9+o93ZXaLlpjhpzeTgUdVSmbdagOrlxBSwC/I70IBd5\nIojI42SWUPpRJ0q00WFZthIDMxK5WhRSby/+G41DGPWGjgQ+p2Jg0HWH0Gfz\nZl55GACy3J+iUheKmuOoZDu//Eg06IhAMwTqKGZay5dM0I954U+IAlFkCZCk\nJtErK1LZMWLUu8tqDM+2HHeb7uiG5y5Fj2sIDKFr+X+DlD3td+S9dwvX9ztS\nohm80ML8aKRlU/7EE6TnOC8m/TrWomeluKGoBzCQr/VwU1fZzlCtQYsCyOLf\necZg\r\n=GDN6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATGNX43dHMB5C2lQeySgfU1tyesPvwWS5kKBhUElniJAiBCC4KkDOg/ZhiyKAY70UMB5pdwXfkPoOFuxUbhOSu4TQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.70.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0_1638768135761_0.6655162047494732"},"_hasShrinkwrap":false},"1.71.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0":{"name":"@sberdevices/plasma-ui","version":"1.71.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0","@sberdevices/plasma-sb-utils":"0.40.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-QI0KVB3clC380lDWRTgqmMkvg4FMUS7M+jG86/aFqFat2e4RR2IWE+byl0exsNcbfoaAgLcGqulSybImuwC/XA==","shasum":"2d86bac50a6021b3bd1c32ddce83043e1f74960b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0.tgz","fileCount":820,"unpackedSize":1712359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhre/wCRA9TVsSAnZWagAA6bMP/3krY8HJMoPlINyBlofa\n87r2PlK7Y8xB2wfvOXCxI7VIGFwmDYslqDPwqRcRWsRKBfscTJzVlI1+DaRa\n9IMLKA9BPCQ4STjJI1ePYya8bVWYjyLN9XSNXEZtdESYEhKje+Sc6guhzZMe\nj3rX4EO51fzsCKqTHsggoRUjT+LEJLDO1ynEM3JJHsK2wGSqj/n1d5U5u/28\nYZBG/jyDc2471u9gfQZExvuLbmVVhblMc7CldOeUWmH2ZRSuFNOgOK+T+NG2\nqFYn+7ZM1XYjDXXxhnIf/SebU4d/jxQyOXXJ6pQQ+HilawbHyMrvL3k1tMp7\n3H+J7JzW/ez9RfjqFFIIgK0EgV69SSxzgd1ty6OKYFWHHnlVpYW9UNYu8BYb\npYsP/6nPW0ezRxCdlJT5JP/iNzBCmNGZWdQ0/HlyyTpKcFY47ChCz9ZBXGZe\nxjQWWTsfz2n/9f5O6UjJmijo0X3nCogyyeW3AsriwWY7NLuFVyeak/Ge9lvn\nsuRfZTPldtUHYsN0S1o75zsZIEJmAOX/v2nWKszOsHbBn8/KQysjLOtMNLj+\ns9NypSLklsYtrAVYGw7WXWyUdbge+iDv1V0GNLi/05qyoqgf4ovA9qcuNJVu\nxcR1OdElJgjpvJ0xFdbNP7iJmmtamQ19LZxVUT81vm7YKUeg26QZnQXaHKJl\nnvdC\r\n=/qxr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWjNrWt/dAr8j1ohNLLgQ80Sc7iga1l+5WGR28Pbh/4QIhAKztCWMCB28+/XtQbY5RqjpqS5gHjqoO20obDFoyYtVH"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0_1638789104734_0.3376601314760501"},"_hasShrinkwrap":false},"1.71.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0":{"name":"@sberdevices/plasma-ui","version":"1.71.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0","@sberdevices/plasma-sb-utils":"0.40.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"287385fde8614acb4c2fbc7ef5cd1db420c51b7d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-sD77KLGIqh56xyYTU5NQWQE5Niu0lzmpFS3fHhxMu0iMxz5ETn5z+KVjYsdDgAJCC5crSRNryJT6GV+liMlNUg==","shasum":"8f6992a501de6ae2e0125c79c74795af37f0ed8b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0.tgz","fileCount":820,"unpackedSize":1712359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrvDLCRA9TVsSAnZWagAABgYP/Rl0TfjSloMIJSRVbKpn\nhrS27Zo71MMRjL6KwmBpMNDNDoeDsoW3XzBbtMmQIQ0PqCFC7/e9u2fYNZeK\n9m4PQgH5KihX8H0CVwTxAg2wi/fFQefn7ovXXUg8UtI7kpkEJVC7gkouaR8d\nRK5AFRtlchlC93iXYRnP8tQVsPU+qvtFkERma5Ln/5SL9zv4CJIWKSP5CiK4\nIZQr3l4o20gO2juvYQTofR2PJUYe5Iil1uRUiX50Lb5V3ZwhbMqmevdJiAM7\nGyJq59+8//tGLCCzBao4UmHpaxTm1B9Vv024hLsoA/R+6tjwt7Q+w5H/Dh0J\nwDsILqVWS7xCzkjoBxRQR1afnJgE3gRR/5jtlKbP1868P53OetFS3Y+6nGQT\nSM5K+vrgQU+TD8Wz4SocUt4ImuT7PPw7oGRnsMZDFhTMoejLOnVe8yNozm3T\nYx5T8KmLhPAkk1rGazYyDyXQvbgOrAJnyaWxVMMICYqNpHD3D2wumLHvRYd3\nbLKSGlivG+VP7qGR49nZdOB0cRLgCjfxUA6d7dS2nXRYE15+xKXLbw1WTf9P\nlbl3IGAaKJnCVvC3Yeve05piglBeTE5zofLH0HkkL4HDc0inUyfx+jbdm9+G\nkwbGowAMfiR5A/RON01riwd9xPco65dSfjn6T2MMsUn94Cqea6ZNzRJ5AExD\n+uCU\r\n=gNY+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfGyu2LDwfj9v1/nG3TUxB15GOPZej/3Kq2x7qSLQDogIhAPQniZfsXwNSQn3Bj4K/+XSJ+aD9kqAqHNgXIp0t95xc"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0_1638854859745_0.6501302745442976"},"_hasShrinkwrap":false},"1.71.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0":{"name":"@sberdevices/plasma-ui","version":"1.71.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0","@sberdevices/plasma-sb-utils":"0.40.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-SqQUQjAy3EmswoyctsWmjhevPFh6oE1o1v+iHZggm77/ULY+mxsbSIo3nZnryMKJxvX5dpwMw2vcKSWkKQmlww==","shasum":"d73f757e131ceedf19275dec419d74715f6c81c7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0.tgz","fileCount":832,"unpackedSize":1729335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1jkCRA9TVsSAnZWagAAz+UP/A7V9DXYwVda6Eb3ohZp\nkvyg3t3bs5muvR9tMBrraQzuyT2OepUHXGT0PU76IWje6UdePpqNxYipAwFc\nzWx0sum0wfkH6krJU9LLihPapJXC4Ur/+1lI50qCk2P8HWJs/uSWOwjpBYHj\nrInCNP22WEX2C/k5LG09/zkiR7nBcrXsYiltWNT7LDcL0VHwsi6rm9M3RAHC\nr4qLraW2yMz0667tkQoxth0tX2oRqEv7fZ7Vi5+QJdKABKX033pyDXasbwMx\niH89Nl7NREczrtuA6dWzCOtu1NhYxR3at5VcpqCcVuueXU0dEAXQ/zAZHCHj\nDFxcs/7qLsBmlXtwsq1tn37rEMiSW07ia4C/qZs5/JA5cfcSg4dtNkar8XWG\nXxBgiAo9PbmOWbLQPAFu00OGJbwSHhZtyEqAY5OFwIqB7HHpEJYPTsoEC7av\n5lI8F1lEGWiEpavn9kmbEVycE3Zix5Nlur9/Aqs0F6KzE03aQJJv8jP+r6+V\nnmhwf3XCYq+WAn6i1x8sHHLJlJsHz9SFGZufY3vZIkmIPsVMtZOSpD4hYAwR\niJQTQzy2IhScGi10durlhigr/MoX7H95iJoOAqSiDI4hAPcTzW8EyoTyoFlo\nfaW34O9nF8U7IG30hSmysdjsIcsegRa9Bv338X9t9VjDDaFBQJdsCaPAOZ4U\nI9kB\r\n=FIe5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEokO1wmPzJYIC7zAvI9dsD9/Wnlx10eJn4pKVZBsVzgIhAL3NLVfPFZQNkVsVKi22/9ZRKQWVP/qcKf9UHXDVxTsE"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0_1638881508594_0.42081836074867374"},"_hasShrinkwrap":false},"1.71.0":{"name":"@sberdevices/plasma-ui","version":"1.71.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.0","@sberdevices/plasma-sb-utils":"0.40.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9b5113cf98b2a3ba36a149ae7ea3625ca8ea0b22","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-jhZSgMNM1LRn3n2mV8WpflKbC5CCz3OonsmzgSVgzqCaNQsAQin7FUDGirHh5DYX24PO28f2ivSDpOoqiD4k7g==","shasum":"87e636c876a333d903d54645d809d85e591446a5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.0.tgz","fileCount":832,"unpackedSize":1729571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr2BuCRA9TVsSAnZWagAAH4kQAIBKZOHlUBVAy5//Jpa2\nvdFQE5gFCls43VqNDNlBnA809E7slFf1igFcLfqC3hwOqRL44Tg98L9Fmaog\n0VRDJXfxV9nQgJlr8H0Je+ad5s79IUFEY/5E+qfg82snXbS+yMAduJhEa0Pu\nC5OZE5G2aq7JUTvgtWmTnCRnZQqBQSn6bZs2Vh8Z/nVLcdrhSoqsuD2q4cO/\n07molfwBn6t+jYhGty0vMAyVAZ+6JJBvkATJsejRbNe/0gbPr6Pj5Nv3pXWu\nrv0ZdVbk3iBiD0z9wzItS6PUXeHlweqdP8w5WOP0xQBmkoD/G/D0OkhPdcii\n8HtdjhAmA+86cXg7R1RGFVa0l7zsomYBPLyuM2Ch0/1PXp5RnM6wYrYWeLqu\nr05HNiqydVHT+pih0Vzr2oyAeEFkBdSebsgbbtzWRXH25LkbVRIoNCrP48kU\nKA1CFr8MSbuvBySIBlDBXwPTm+gAJTlll4vh6wcihhvoktaSRg/PROEkyfFz\nN6T2fwMynN3TFZig/tmQ04wl1DIRsSbxZd1c5XUOnwgJfxFNAVO66tQLSXou\nAFSArPBQwM4Pn+nVvKqlMqh+UcOTe3uZjJiBIQPG05QLBEYP3W1unyWn9Lue\n7CYOexJ0THmDzz6Ja/7a4d8a7ulaVrl4DnshkhZfi/2265lON6+pH54p1cN5\nq3+2\r\n=DIZ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgOiok7goBx9sEnXYc+NodMWiMalojiiplrG5VWTItZAiEAw4x2Bt6zfRqE06Zl/U6wJlRs8sNgHg30LvF6K8zg/XI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.0_1638883438125_0.4063728301584191"},"_hasShrinkwrap":false},"1.72.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"63191402991735ae235a9c1da136b76985bb055e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-i0fcl1ueokZwH4oyWxclor+g6Q1PePHCDaGj/VTFn4tywmWJ+T3UkB1A9nac2x5HyiGLo66rFiubHaBrQRKdMA==","shasum":"b411468b81cf0e793cb25953aaff41b5895b8364","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0.tgz","fileCount":832,"unpackedSize":1730746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsHi6CRA9TVsSAnZWagAAHZsP/07M7QRmyQ3FJEtuh4AM\nfYWb+bqAierJVIn2OEAOSTXdd48VSNL4MDwFQLUa/7pxzJndKO9SYxKfiztd\nEiT8m19zIOUYBq4pGnJGsfg6mOT05vwMP5eGVuNZ/wk2G6EgKj8emQR3mZWU\nGrZylAQXYfxg4su5EkyPpJ4H3VRKAPK92icwn58/mIcckFvz3XlEoGYJUeIJ\nznnK/+JNqZtBsYCzgoK6MRs3G2B7OEl7n4nNOaIpjFS4mXkIs45xQ+Kt4UdV\n9ewMrq0puwqE88LAEcFIx6qulzyGRMSUpAX8YOBMdMgGmZ1E1a4cJdv4hdwm\n56v3sF7y5DNxsY1oX9yER/neZnXztxx0azlWYEpfv/ar209cDMSP99gQZ6hl\njva2IwiTbdIhpRD+jDp2U/3uPSC1U77llakX1zF9OW37ox3hnfD4JEoTi/+q\nx8C+qzou4h6OArDaJz56KKEVDDtX66kKT/ZEIHZtywfcjl9cQx9FGaJU2Yxz\nNXl0RBrnPmR956J19HEQDwz4hWh95XLTDljOUB9NwKjauUYtT06VERHwKAJT\n/inlWxvU0hGh1F2hYiNyg21fX7yxRUv5F4s5RL1RTrHf8aEBo9k16/El8j9A\ntM+yhX3uQ2yr2TFPiZzkJQifVQ8QQ8A0ssDfzsNaqBQVlZwSVqWREybevaJI\n+EoM\r\n=8C8y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp0RTKNG/hyDTKvU7yz6tpjYwBRroIKYVOHWFzpNq5LQIhANcXJYLV/0t9OauM7WH8c35E59h9hxxtRX0Uped0Mn2v"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0_1638955194095_0.1540443540980112"},"_hasShrinkwrap":false},"1.72.0-canary.957.e9ba3d7d3a4f79b70c22bc9ef2b5c4ec15693ad2.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.957.e9ba3d7d3a4f79b70c22bc9ef2b5c4ec15693ad2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.0","@sberdevices/plasma-sb-utils":"0.40.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9ba3d7d3a4f79b70c22bc9ef2b5c4ec15693ad2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.957.e9ba3d7d3a4f79b70c22bc9ef2b5c4ec15693ad2.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-ZEkPglelP89Nq22/jbmpIyq5uyrdt54gT+48OVTMES6Ga/lrvr119rfSsylmsbE+J1beHqhPC3WAZa1Ivc2ymg==","shasum":"604ac7c853fb9073d34d53fbc27e90f56d27b785","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.957.e9ba3d7d3a4f79b70c22bc9ef2b5c4ec15693ad2.0.tgz","fileCount":832,"unpackedSize":1742030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsKXZCRA9TVsSAnZWagAAPCgQAJm7p5GI1swbD7wJgUIc\nXlS3Raa1aw+4oNKLnITKBIl6XYJQSF4MCtdweiyGbRggxKoSdtuOBLn2mop9\nkRxMXz/s/GmXEKu8ng+M/brL12FfYztqF1oEUb5KaeESkp7In4arIaCo1hKv\nmcwxTuHnOH8O+EsPDNc9JrRWskVJlgEQzr8PrgH6+mC0y3nsIjCiyDl8b3pt\nI53M8UoOLKrmk+6bmeQ4PcvwU5/NPeWr7TUdFbjF85UjaEV8B6xuNafw/iYA\nHUM98aXV5gFfK0wwyBP/Hor34qqxIvvhyZ9rnt1TVdTwfjiCRj26YfYPGZMg\n+Mag6CQnIDn2hKobPzMAcx+vgx1r60jpqLUN+K6pe6bbMdaOXrXHLXwy/w0E\ne0/PhoQBGXd3djCOPF4kfqEPVUtCU33cuN/UTXhElqAi02WiGxJjB78VPyUY\nI5lRNEaLbEl3zHbTox1LG1mHTREGepOTkRfQyJmPEWXb5i4eZbNa3BbjhOi2\n5/ygB+UComA7QKXj5jdweLwrQlLdPIrtaE8sJp7ZC1OMZZMemP3BZ2mEQxgK\nGY0AcMj3QBXSxXHCf7TmU4VRHsNj6wolie78Y/fWch3CGlxSJTu+09ONbZcV\ng8UgxjwhyIw6878ZUgA5gZO16bSktlMUykIBcc6RKIlLDcRLMXgQsFi6NgaA\nSoek\r\n=ueOe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASBBxH6tZejfF+tahiGXshBEyIT2CBsy/R0C6RnICTyAiEAy4xejruY/ebeobmNPplkrlmHC6rLKRezAVxks4evCi8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.957.e9ba3d7d3a4f79b70c22bc9ef2b5c4ec15693ad2.0_1638966745256_0.45952229777368925"},"_hasShrinkwrap":false},"1.72.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f38b8b3d7c39a4634b7882231a453ac7ca3c0822","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-89vwO4qVV7cTGCDYpalvuKPty8BUtklNdOc4FDERHhSWNUm48V73sIIB6bWuHW8Jx5/KPrWI2k49VQkyl47E7Q==","shasum":"6a8a1cebb1b1c450e88a99fed01894a9d150e884","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0.tgz","fileCount":830,"unpackedSize":1801805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsKkKCRA9TVsSAnZWagAAtmUQAIjxrMWHVK81DpDJvkJh\naLU18glrQs81lerqvIQshrtpjLtBGYx8p3onsnbYKZz3OetU0txL6MtAN1Nf\nm9BclMPc5KT1EIK+sjwbwiDg0IDst0j3CDUAJeOchSkTMoKrc9UQ00qg3kYC\nHBw/G7EtEpujpzweDuhZ2HRb6S0/4UUr4bHA6w0VY3X44+lFIA9f5iUuxntY\niDQCKc732zMKlRqIB8xJ4auENyulSiIaqtKlMlEvsZaJAsK1ZgftjTJ3o3wr\nOG/vGMzOK2hhak6x6BlZ+VaoebNVktcDXr1LPsYNchT04w58wrUbPqmpyEBd\nxR91jwicTz5+Cdd+FYEhHaYR16POwE2j4ZUxYuwzaMMDfTTkFkZuEaxmnqu1\navS/ezfhVmjwJ4rwoCfUefsLLfjAYY8cTvAyA2IVpXF+QeBnDWvwWij5esrs\ncfunpL4TeiXP+phFCi+GAC0odL9gDG1o9r0iQlJnxWsC2N657Yf0QvRnjX6H\nw6cJdisfrAVsUEZaLwP2gp7t3Rx/+cxsPYmjgcQ3jJ6q+xvwIFnN37L58JB6\nhBReUsGN3NE0u/PmprVhD/12i4w/yyUK6j1PbOz8goMiq+QzO+UN6bpZRLkp\ncwJum4iVQYIuJWeI5uYsJgBHs7WZMZZXfoExsdGLr+eAdYuM2pqqj7OBHftY\nKYTo\r\n=qWMU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnsDW1F9nUXIJBTvmuTkzTD0pmJNVy5lPdOngh+J3VqwIgI7JSAwAoAfQDCT1pEAckeEiha2qfuGdfz4c/BGYl3Dg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0_1638967562315_0.7361447617288179"},"_hasShrinkwrap":false},"1.72.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4a79c810a232f69479c7e7224f3f25d8a6f46e43","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-sPsYNpd0d2aAd1ZWUKFtiV07XrSU8q/PqBd8jV/qhnIMjBetS0tiZ8JT/wd0u1771wLsXO+JTYvq4KJ721J9mQ==","shasum":"9b153da542cb729e6264c5c8718ca302a09fd5bd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0.tgz","fileCount":830,"unpackedSize":1800241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNYACRA9TVsSAnZWagAAZrcP/0SGWlCTtxUUiTI9jlWO\nMsETF019CWYqy3rDDU5jAnZpnKu4SUwhETDzcBseQqWr2j55HB9FCd+a3wnG\nOF7WwzZrGd2G/EcGb+9zG6vjDt7jDpr2h8YYQbQHKGdvegLDpmA3o8HkD6z0\nNCx4ZXBv/YgfqmHAVZaxaJ+gwn1EkTXHjN4pJNuR2//+fcCkUe4Ld452Yf7x\nHEDmH6fzTzXOkcULdpb7TDyWGp+0KEakrGbwXUCeOBC18XQPllZozg9elCzv\nluWAseiTZn5SbmA/E2jgQg6eBeVh+gau5PiUPDc6J90icgoxo6Ce8cBjPs7I\nIHTs9cSMYabPX5FRx0K/X0tCcfSTh8lFR4N8q+bBlXXYtpLGNdHCEOL98Sv+\nXmj9izwSm1aFXTKdljHj5T/KmMLgQhyEwrqkvj6nPMXGnaPCEK3N17aGrKS9\nGKFN1ADarfr1QHMZiGvu8penL8eyDujlhLiYBhxxPkmimqUM6iOB4foqrF7b\nhA9FRcVz42YdO92e1B3YdKnC+kHRKHTZOizRolMPPAlqFvt6kQy204afjXf0\n/haLd3jCglHbiOsskK+CX22D5mamwv11HeFhwhcUH86289BP0iz0JDA1pD9F\nSYOvGfvCMJhB1a7qFUky2ZrHfkUoNIMpRhsY/1x68SrIzCIWiMFDkYfV/xio\nkgwh\r\n=4yG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO8DEvNzu32eYW+cw0g3a/ljKeWWUKT+jDHi+VShIsCQIhAMYd6sAIOH+jkXco3Km0tCxHWQdyYNYVDL+OtdTb2cOh"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0_1638979071881_0.9073281063148269"},"_hasShrinkwrap":false},"1.71.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0":{"name":"@sberdevices/plasma-ui","version":"1.71.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0","@sberdevices/plasma-sb-utils":"0.40.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-kXdpGutglgEmzdcwLaA7AoWuWUXz8fAmKIipoNAVqgjRA8N5T3Bpxif2EFzOHYks6LhZqHOWiqAlOSnOoKI25g==","shasum":"0de45c040fab40125e3b49021d3c811736b15a63","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0.tgz","fileCount":832,"unpackedSize":1741877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsZ4GCRA9TVsSAnZWagAA2AYP/j7kDyS25DccXF/SmP64\nNSBeMrLklzEaUcLRBQcAJObYe/dwedf4rsv4vgy0kuBdcTsDx6hhEC0bZ2jr\neRXEDG0NHdy6flvoJhfGGijt7BUlFdoqKvgRQMO+VqVC3vf+bt6lJ8A1O7h1\nHTLjvbB+fyOcjW3UVtSh1cd/0JXuT99mIDK0MsXi9BB0jZJJPXF5gAVSdzyd\nT64cbjHZ+/EEANiXN3GBFWpB7YoAuQUCaiYkYIJF6aKs9TL7wxfN9qCly+YI\nAObaleyKZzdKPqwkYJX2796SpI6etkJibyYlQXXeVCEpaYQQ5xlqbzliEtCL\ngBmBWfwlMJZL1rsoa0eGelQYBJkInrsWwHxwVuJx79Fw0uc4KwVsVuW+T2m3\nca9sr3bkrpJ+NEMCWhNhqEm3Wb7ULWvngWwk4xK9EflKPE2JOjVTlvOnrHbK\nMckSdOGpEUjZNvHAK6RIgoh1BtKUrsjsqQ6TsaDrJomCCMc8Yd0jRhx7740S\neb0mzckPOBpeg4gHyjxP8e7pIuHAaxt5SnjAiwlnf1vYjJC5TcveFMIpx//W\nURPj8oVShDew9ceCLiFcImVxvMNy62Wy4ZugiOKStelUdk9gekHzxFbUpl0M\nI1cIOywY6UBVt9G9wjbyPfObXkfK0T/tPsYEwt8s4X7+aKPe/GSLwmHWUj56\naDE8\r\n=XKMt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJLUWUM14SScTTxC7jJx14WqSexKL/LTjR18Zq5xlSGAiEAieuapdB/k7PkBhP6jVfKLD1VkyYuWDvcT2x7DrRaVuM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0_1639030278558_0.9217043056560603"},"_hasShrinkwrap":false},"1.72.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5a48abeac598b8c1a242460ba1b99c66155ad884","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-QWGv3Mx8J0pCdK1/HN18b5a+uSHio2sAvGbXfXUKI/sMr24TaenkRHLWszLACH3fE9dxxQCl7fLAYQNqPtxM1g==","shasum":"4bd193ee5cd6206fd2c122e26f5cb656c3b04e23","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0.tgz","fileCount":832,"unpackedSize":1729787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsaenCRA9TVsSAnZWagAAHU8P/3KPmLCfRX5EmBG56xPB\ns3AwZBZrmNRhCXHixOVPvcKAyK9m1A61FrrMOzZx7nYXw2o8IQdU1JN2xOke\nrJUuyU/Z97BzB+MR242OMFk1PxFgGWRBh+5P3ZRCmoCAT7F6sv3vwXeAWs59\nCIbX3JJrCacPyjhCS/XXUpyrYXDLGhyF+77tgFw/GfyVcXSCY8dyfz/9YhVK\ndG32CB/EjMxwL+NtC0/hiIAcWq22PjH9wZ4N8NLL0GrAQnx6LnOzHHDGbHYd\n68KF6nu8+P6GoVL+ZQMeV9x6vH/faoWq7K4e/CsddejwRwZhEb/pWFEJ761q\nzAJUARMA8x3ALXJ7SQxdtDmnNSFvqk/CK/ekPG+vbET9SykyNsEekUpV/MsG\nvg06jzYiw6mK8OefNtdiZF3hushvHbPOyuE2H9R63ebU122yOvZrSu81fE4v\nx7sMH7z/7+86geTg95st4+Qzw0nx1ipGHpSJR+nadEKmzfSot/4Apg4MGeYl\nhEUkiBtleVOCptERG2O0zTAzPF1RrOYKbLfS8msAb0Lc1IgGPt9HEHeq+dAj\nmJ11IVw0s593JT6Mz0862FFYSd8jrpYQXO+VtOdajEHJG1RTNVMTDVy3+jCe\nkyRwkkipAUfQsCDBe8pABedXp9OupeShP5d2dGDo4CWx9Rl58+r5RHJCjrLy\nVlas\r\n=XgOe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhm0w05u3y7jzkDH/mgFmuE4izdafnB7lgqj2tZAZC2AiAiJ6+WxlamXyT02DPF72yZqSbn1cKf5WiqqtYIVlNPTA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0_1639032743401_0.851059562988967"},"_hasShrinkwrap":false},"1.72.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0a39d2745eafbb45273e5303870ea90407135144","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-/1Nrd71b1un0MGesm84BpHHxaYVjV2tOQj6UnX7Xrmh2RsCGiYXQdRPmbir43lTE8PJxpxWJtraieqLq/x070A==","shasum":"56fcd32111624f00d0cc3ca4f2904520a2f95288","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0.tgz","fileCount":830,"unpackedSize":1800141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsffSCRA9TVsSAnZWagAA88AP/iZG49EzoBrZtSrIA/F0\nsuRmByT2H0GArRhprg1H5jX614gH2BQ7AVqzvuk9KTM2telV6Sf29AqU1vdk\nrstOsYPhyRs+DxJhkz0t3k3srbuzeAtrXjdglqqedbY8zIsuOeVhn0zAqjqR\n7Y0e/O47UadSzMNkpVAJUT7HuHcEy9FtNKJbITvY5mHGIFsfpTnfZXd5fzaa\nKEWgP4jqxYh7O9Y8eG8Pqr0SGCvbPRqUD/uLYhekuhGZpPOtrMg5FLFDG8BI\nUKD/MKbDwkJHG10XsKQiM7MnEM6FtSpWmKq3o9uQi+OpLFov+eLWiSifaOki\nY4NHRwMR9pr1l5WTdK0yONuqq7F/wwnqvKxfdPVP9UbjqWi23B49+PjyeKXb\nZvAC7wOxlRGZ13bF5U4FSjVUJ54jW3S0afA/SXbwh2SWFg43+VsNRzSEDWqK\nJUgc89qw9Bb4XeIYYRRnHTAsIXZz1qiwQEeK9UFWpWVz4+kogl4nQApf71gG\nt7loDGkAlkWPVAj1egDhDpk1NnD76rwtij+34g0oBtNIjSfoSJsmB4IcEa4X\nO4XdeqZSxn0Dqb7aLwzcMyPHioWqrnzdVymzYdMSFgjVmJnhsaQQQPyQrONC\nnPLggMI37MUnNP5LE7ZtaTanxdh0OyV/U4/9aYhG4QgU3IWag900uzBGga5u\n8QAa\r\n=GFOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaai7UqwQo6B3rQGV3gAYx27VOpkDsns2UyVgUz3ESKwIhAOUUzVZIHO85qV638aUlvzhkdB7GHsR9D9U+NOfsFqLu"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0_1639053266085_0.4679157588221792"},"_hasShrinkwrap":false},"1.72.0-canary.957.e469ee43fb6982de12085f03bb27983c03e36aa4.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.957.e469ee43fb6982de12085f03bb27983c03e36aa4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.0","@sberdevices/plasma-sb-utils":"0.40.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e469ee43fb6982de12085f03bb27983c03e36aa4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.957.e469ee43fb6982de12085f03bb27983c03e36aa4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-hXIaJgRHnlsmWCB0Shj3ugyi+HLRXp9dfev9RimJ01cbrwc4lox7yph1XW5XL2EIKDZBdFi3Ksw+rNLgpboTCA==","shasum":"e5f96a519053233c1dc7d50a3e672dee18e241bc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.957.e469ee43fb6982de12085f03bb27983c03e36aa4.0.tgz","fileCount":832,"unpackedSize":1745242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfrYCRA9TVsSAnZWagAAfFIQAKNR5s1q9JjkX7/WW8CA\n1Rpb6dRKE1wZF6F3RlXLNbO6sEXC3IjJMfH1P35RClD9x9741o2PYQOfKeev\noZww3gjD6HFUj4EMG70mL+zH4f5aB7iFvN2QTHsiu/grl1zrtq86ZRa3timF\nkkNIuL36RDzHD8qkj+JzvAKcjPanWxIU7d4RtqaXR2seqsaN5a9QZVcYSwiA\noOgy5f5osSnKgDMdaF2MKDFABhP5e/8Yp4uv7pOyi+ZIiWTFvTXT228DvKzE\n0x+nSjtJ1/+Rdxx3nOvJdXUkS2ax/QPqDPCuXkl+agaetRqQPvp7LnlCL09P\ncYPR6lquV/p0tzCZAJbIaVP432IdmYUXe4sQ7RxHEEW/DS+gosMRJz+5eotE\nQdPnwCgfww0heEISwin++2udwyQExs94mEmzfrmEWpoY6Aw3+PtfAk57uDLE\nAn8YshH6P+zw2Urp93V9P1d8lVb1NaH/jxtp2luuV23s8BNLpc6G5EIXIRiG\npkIRGH9+rS5ACjr1pUz8FW69Cx/lDJVr4xq205WXTl9SOW2ULyDHJKdxZNTH\nCoYjGwd2HULSmnbXSjXl8As7VAwdpdFTQm8uib1pERfblEzNGYqpWDqMRIir\npA+5Ysp5lsOwTevA1uyfrMcBGcFhNgt3D24mRZRAnMfZoemgsGUxq27ngRnb\nCs/b\r\n=SKGq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSzBsdY+0jkrbYSzIMtIpcmIv3lHFya7BQZbLegFQLsQIgTDPzjFlz2s2LIN2WUQVfijdIHe/MV5d9i8/YkBkXKZ0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.957.e469ee43fb6982de12085f03bb27983c03e36aa4.0_1639054040646_0.19782574526905106"},"_hasShrinkwrap":false},"1.71.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0":{"name":"@sberdevices/plasma-ui","version":"1.71.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0","@sberdevices/plasma-sb-utils":"0.40.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-qmAbhFxByBDlp5zt7ojZdptji6RZonMkgjCgS2MzxniqRCPItiKKXNYbxq5bFXpeCHv11VlnXJF3e1kqLw0a+A==","shasum":"acbc34533805d5bc2c474bad9c0147455fc61de8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0.tgz","fileCount":832,"unpackedSize":1741877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsgDbCRA9TVsSAnZWagAAS5EP/RykABUznOMNF7tTS5yu\nhH4MBkGRyHJSzzv2jd9v5z6Pp4zTOx3eloRJ8FBRz7XV+CU78rRM/qzkOusW\n0iljELXY+3F6NHEZB/QNxQ7qzmI4i45GxZVanJV21WfdmuebD5XLvfHPq/G7\nMmrXCZP+a4jcdy6RqWRYo8lipJtikvHoiCw6OcyLpZQO8rVmorIB735MUdMq\nliGG7n5JszJUwmZNKijBWqUuqTWUPpQvK7nnrVCNEVcrU6JamDoapMptcU5E\nDm5MJizpIoHxFAdP5QLas3FS1ZbNbwRydhLcDcS5QA4Kht7vdAn/zluRD3cD\n8dHPtL+xNEsnsXHV9bUkLT3RBanpwPyCh82Utqn+S0/Ixih6nTYoKFUO7KlQ\nfF201AbjzXtcHFvh5VnA7EOMsUBtJOJ01kw+bl6T5eqtBC75hkwdup2IqZ6k\nwQ7uMRGwbDCuppen/aaxNmQp+FtoTVG+knToxwWsHaWvlfhmPWfMAdIeCUJl\nDRAeYpWEk8QqfVvnq+qyymnSDlBambeAvefUrQ8p+AXos9M9KpCAlEQjP1uG\nVWBmfG/Zfj4qyNLNZgSHfiH6+B7InFX5+YsCKtl/9jGKD+uLfcVnkJqaU9NJ\nljhLBw7ZbyrBJtGR8SmWO/BYSUB1Sgo+7LRK0DYWkd/dbqQirO14h+uqNInM\nSOtl\r\n=bHBW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMk/Ugh09lV9qtPn13dD7iVf/zYXD4/xNOJhUwg7ZoFAiBtSJY2OWaravSRxYbwiy4nEQyZMQ+nljAnLhA0tMGo2A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0_1639055578895_0.5931503123000612"},"_hasShrinkwrap":false},"1.71.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0":{"name":"@sberdevices/plasma-ui","version":"1.71.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0","@sberdevices/plasma-sb-utils":"0.40.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"23bf463d3f8961862e4c09bf460dfd29ea9cb6a4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-xMr19rFr7LHvt5O0lYzYbbhtFkhu40ac9pYmqrqEkJzCnwbmgXKbjr/9uhZNkEtoR9u8YLNcH8SEqrENTfW5pQ==","shasum":"7aec44e88fe58dd67ba1ea6cda856337d8bf6cf6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0.tgz","fileCount":832,"unpackedSize":1741877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsgD3CRA9TVsSAnZWagAAFrQQAJrk85ic8FsJIkbE1CW2\n2a5R9MpSRwEK4PblLOiKbAWu3X4zkDRBqE19pIKOcTyc04MdywJ2nko5tqCs\nyDGG0+/ufr+FEufLItxSRrtXlAm1/qIWkKJAd6EYOK9UxiDI0E84mS3RGnqS\njgwb9vuPT0J14+0k+p+OFrYajQxJJA+GAeIOlaCjKoVLjeaZk9MR/6ifX5NY\n03oGg+eh08PuMD6vhYOSEb6Ra2V5i8QLh9DI4GAiEQVp0Ne8RtWzJMiDwqXH\nE6JUOzzB1wLF4sFdIL7tN9Ms2Mol7V0CtMgxIazf1zbk0Nmg6N8Db4wJUXCx\nJz2oQHVkj1yTjFfGdczfEttHvOmwt3M8gVbvKMTjSrIXd83s/RhUMiFSFOnH\nBY0wGED7Sh8J8Xpu5W5Qv7/CznL5k1yiGfrgdONF5NGv9TuVefDpvSqMFbHW\nb+ksiEh8ZHwhExUbBOD9WdY9MFTwNC+zWNl4iHoUDEBtWbgEj/wZ8jDIkNvw\nHZ1b+ERwxw1ufxmQmBumeOih6iEMU1utjVlGgvUyDfH3xXm+O79wlxewYVhC\nuXOmM6Ki4BvsGZJ2QaKU8AG3VM2hj3RnLhPxbm489WXnlDmkzyNyxrQUtOgq\niaI4RaQLUiqphkcufb2/R4QsaBZouodhnXNt7cwGifDWxT1UXvWki4SUUbXn\nLJ8f\r\n=Tqpm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwTmu+L0zjP95xWu42Cp3rMuP2bZIHf7Gqhqu6jcLLAAiA9s+PbHRoCzTV1hSo8WogfUF0kRVw4HZ1uZKQYQBiI0A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0_1639055607445_0.41320952068843053"},"_hasShrinkwrap":false},"1.72.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e3e758d9bd6d3946cc6fedf410cb9b0caba11677","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-KeL9nD8LqK3Duk8zn7vfDkE7YDjoHKTldIaBYNLhWzNYYHCbjbyOYib9KnUBbNkyLEIFZ7jHXMfj41ecUVCimg==","shasum":"0cdf5a10eecd4db6128d3fb17475a970a5c5511f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0.tgz","fileCount":832,"unpackedSize":1741877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsgRiCRA9TVsSAnZWagAA86kQAIcJfC4Ge/ZJGtPta+9R\n3XRc5cz4wVTPveAFDLM6x/FrAq0jAjnAQ9+8M3dBRVxFho/fGwgXzA9gD5uq\nRDuYJlgx7oM/E5sk4S+8atqgm8TQCyiaZhQTB3mZqH+NMBLajrKwMwxhELNF\n17Deo61TYkzveutWnYjyqudyZGEyU1Oc+wOHS0Xb87nmQjmkVCJh6hL46RWv\nLfEqZH4HDPoVcAoAmsAL2EDlPlWlWypsnGglla9blJ0YNnjFhzFU/f1AdmNu\nQqKZk6l4ATbV5OiveSzxOT+LJkl0VxM1/eOwobcazTgcEIC9wkRF9ZsEyebv\npsApUv4mg+/UhD+rwclgMtucjQwZvnEn+Lcvn6d5rVf/mxq9I/6zzZGUglhJ\n+P6Fe0bx4aEycX2MC5nWKpDNb8eDlzc6pQAZVklsmR1Jqqcux1kBimotiLYG\nloCvco7emmCQDe+XcvY57cLRhbXj/WhTZsihx6b880mDKXaAnUQ94YmDOvPf\n7oBs8Yg6OLq75EAUetOrJ1tVtNgKN8/BhM1t0h6pWY48V7+sN3NV+IypPEQI\nv6LqnM4gC0d2SeS8VEUvgZOsrg5ZwaEWpK2osfax2kkKJJq/wwU+e4VEG9sO\ntiQ2UGyYhP3xZeQdHRbZ6a1N/9vepVpihWahW2EXYWgz16dTrpcnYPtqodWr\ncq5k\r\n=2cWA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz+OJQHUQ9J0Pi3BkZSScS6ynEByfS9Svfg/hXTPPwdgIgHAdSvkbxkcoUHnNguiUSSn5QxpjUzH36yX49JFuk7Yk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0_1639056482377_0.9984111766040518"},"_hasShrinkwrap":false},"1.71.1":{"name":"@sberdevices/plasma-ui","version":"1.71.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.1","@sberdevices/plasma-sb-utils":"0.40.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"73bf22d023da4901015579b3fd8246239bed2e50","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.1","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-iHZrPguFRAhZwUbmTHnpDpzc1lsebx6DFH05deOr4Eu8AVoEPlkG99h/KTOg8f6Om/ZTenEQW2TAQRhrj/LcIg==","shasum":"fd60bf1dce066e3ec81a5c1878ca70df531c10ac","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.1.tgz","fileCount":832,"unpackedSize":1741661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsggeCRA9TVsSAnZWagAAIMcQAJ5wUlad8Fc0lu4korRm\nPOzQOhWDQfrD7nRroFJY8Q2SpA8Gfap0AHcen8L1mHd9pt2nLImZmKrplucd\n3zXSFkI8P5RhVSy9M+DTiZZuDQlLw80it8Dtpb6iBj6lgk5rBtX6z/YsDzpJ\nqH/UvVF5lQlxq5fmR19TKXxyp6QlCGdNC4urDGbSLRwXORdOaX3eRrSfvlQX\nRcJK2CDhX9hzBu/66e35poRyGleneEyuClUDBpDwMrht0QVJ1zbhvOctw1eJ\nnKN6gfMk43o3yZXVBoxRaN09J463bvpBEJxRJqoQhOdB7SaLpXtlshlTjJMe\nh88RBi7aZ2YHz5bLiR9mL1XR4pkFnM7zgCt9X9zmPdTREQcXbna7BnNUW4r1\n8mTJ2P8Qo7/88nsNFh7RQ0oQ9WARCHx0VXsPGLCv1HY/m5LVmiHlfi35Z2pz\n/dBG+zk9kX8QAW2cIXM/7fEuVqUn6hcnjJzPCl7E9a6vUn+QDyY05zIj90H3\n3kffQlV3XajTnOqASaz14PMKALHJHG6mFq4F2qCtXZcbJsswfhftOcD3gIJF\nkJNNVy7EOmp4tH6xID1P3NL1h4azu79VgM4eltQaLQnnfm6P/4wTExPbM541\nCULw2ZeD8MCXBGJethhAShweYRE8eNVJ2pS13oywdg70toDO6Criupg8/Dui\noB9O\r\n=rLFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICeywsZjOnb2nQOXbNnJM2IFyk19YjLVlvWaONRnfuDAAiEAu9NNSXvD/VSfm/qni9UtbHydBMxqI5TKXLGvxrJcKVI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.1_1639057438160_0.9438499757656371"},"_hasShrinkwrap":false},"1.72.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"941293786c4cc0eb0533ba6e5b7923a0a7008ac2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Pm0C31n97fccitqIb3TuhUAjiQ8g6YpBYRZQJwuIeBAtc8sCrewKBYQn9MXlbJmjkX8P3/ueirbhCETfhwIVPA==","shasum":"4dcc2edd52231a07814bab2d04caf3613de1a12c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0.tgz","fileCount":830,"unpackedSize":1812231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsubcCRA9TVsSAnZWagAAwOgP/1RbuEsjGGqA/JqKubpi\ndyv/8qc6RNxAneAKOg3IiEx7ulqm+NjaNZzqi8C/AtfDscWYpMbfquM7xk64\nqXQe78WQFvf0dIJJzS2bWN5rp1ub4pDQNsp5ef5MWLnw8J2RMfPyB1n78K5q\n6+T2nKOzYV8JkDbX+WBbmaTLp/Q7Qs+K9scIewfT34uOQGjwam5lEBLJqEfp\nydr5Yil7LNmswYT8nvNE+t4uwT0YVz9QpzvsUMg07PO5973WV9atBSH60FdN\nVslONpKRijntKTy/0qvH6E6rzCLH8Q7O8EKT/ZpKYimLVipjQRPYT7Znu2Nk\nS3hTRpTEjyGkrC8d1jMyADDY50pXqBxXER1RsB5JiEYDN5vd9meKNK26vcSU\nWKk25BMe1MfStrYRE9065NqV4qtOTE+G6GtMaJNZTaIQ45ODSfbmaQgm4GCw\nPdMwT2cfQFjS4/MTJWuB/B1+B6oNtI7sxFVvBGeXOFkukh+CfridUR2GTKue\nWGZ3hqcZ8S9fDglg2cPQ+SHf1M6D20UPG9Gcf8o1PG5SCPQ8oaz/ifqotWB6\n1sZurJTDY0JigO32QbvPtmK3GxyWwMtoNVOAQ4oPjxmQ6VOv+z6hFx+jRprt\n8hOvOfsimVLdD4gGT4h79yc1tKQjSXfYJEYc4r2lz1Q5ARty2iM0INsTzagy\n/L/1\r\n=2sKP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGNJOQSpmS4hpkfTVksl9Gbt9O1yltnPoy2d194gGzHdAiEAi7KtHbaqJMpl1fvnosWcJI8Muflqn7RJ65Vo97mI4Sc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0_1639114460061_0.5247906994493141"},"_hasShrinkwrap":false},"1.72.0-canary.957.69bd9dd1aecaf099b98b91c13e43061f16c925d4.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.957.69bd9dd1aecaf099b98b91c13e43061f16c925d4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.1","@sberdevices/plasma-sb-utils":"0.40.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"69bd9dd1aecaf099b98b91c13e43061f16c925d4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.957.69bd9dd1aecaf099b98b91c13e43061f16c925d4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-XXOCpcbotgZemwVp7Q5bTjVwwpW6q9U5tXu9sKpvJ2Ia7C4s6W9lZSfBX3mflCOuVQSni40jbPNUb/g6feO41A==","shasum":"f3ca2ce5e9ccf44fde9d669e462afc845d77e1d5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.957.69bd9dd1aecaf099b98b91c13e43061f16c925d4.0.tgz","fileCount":832,"unpackedSize":1758423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsupMCRA9TVsSAnZWagAAfRAP/06QautACzaDoPF/e7W1\n6rkOqtpXaN/HPWBFWhP7IMuuBITz7CvEFGaqAnaNNDu4tvtnpGDP23JesMRB\nSe3hFl6ND32dAO6yrvx7kFIvAEaL6GDhRjNIEE+PjcICA2/LCZ7wc5nnsdyg\noK5RDE1zy/cfoYBhXesgoAZtvau111RxpUeL32gM9Tcf3efDfrJJDjplNg22\n5il2vtDmi4F+1G/Sa8b+1pQXezlWD/kg8M9Sr7475KLT0sk6RDVwwiJM/hnv\nYVsPZVA1BZR8X4wkofDAzACjkSZprRcqsX1UiReiMd76B0QBWrptmDoylM3e\np3ZR9Ca3dciE8TeKtcZ8FPluVsdKlxo9/tcLrctqLkgMlModpBe/df7bzO1V\nFmAODBeqnOqJ7CTiCv5sns0eGUr2t4uY62xTE5l1+vmclxCYSHQwofMikeYA\nKDuodlUozDNm2d5HoIO5pC8quFoEqFoAQjI8Uj5KVl/H8R4qaJFNZatQxkNK\n6dnb7FPhjol6YQ6MrXcpchFN7Dk8NjIpGQ++g8LJjMknfLv2az2hvLP48aur\nGggT/ULD9k+HXeiK6aF+NTuVZg0/xrvzY7CIeD6F0r83VUH9BOfV5oZQXQME\nmTKVvyflnlArrfgI6rodEMMdHH1gYUXbEjtGwjnfk84BEkiGac2uznPWVzbo\nKiVl\r\n=gLbf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQjQe01py/f9wBxeGksN1raT67I78kura8UmexknM/gQIhAI4WdnpUXuElXxV1BSSOUiYnkV9OoYQ6XNlFizdpAIvQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.957.69bd9dd1aecaf099b98b91c13e43061f16c925d4.0_1639115339758_0.071972923394092"},"_hasShrinkwrap":false},"1.72.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.59.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0","@sberdevices/plasma-sb-utils":"0.41.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ecf20377a0eb96c13c2e20c108249444487d7772","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Q/ct7uB0p18/9PE8ciE21JYf1tIN7xS9r2dd4H/xjjpJfsGM6zbilG2i6S/j2Nn4Fk8DWesqdxRjPk5SIFyKqg==","shasum":"bc4831cc144b3eac8d71c28556f4bd6b33994ed3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0.tgz","fileCount":832,"unpackedSize":1747949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs1K8CRA9TVsSAnZWagAAWo0P/3JYtaMKhD/QHaL3nLw9\n5SLWwWf006qD39/+D0VYDTDdjgPbPgcBv+SqMdJB18RyhOc9ijzFDhB3yiJR\nF0XQQu15EyzbKdHJzTkJld5whDkfxXWUr8b9hsmuRS1rCfgQVAltye4Qkg5g\ni54jRpjEapKmCXqqywHQtTo5gOo2Vo4VJy/ngrFybPyiZOQqLAvroHaknoNw\njmr/XDb1DnM3lHrjGQDMx/imAjsuqNuG0pniNDa/OmYquX+2deFMrV2b8/ml\nl0BfL2T16HTatZ/CQdQ9ANOLltYDwKzRDiZWHEbJK0DM7zdfm5lGpb2N8Ddf\neaO0GIYJTZTyJgacxJYMvGbt0ICUd9vLhmxwybvOCIDcsUDJfnyd1H2mieke\nD47dzVLGVi4yjJbJxOWcjraZkIsA+HRdMZSRut2907FzZhMvPj5phsIcMiun\nEgvQfOoot28Sp8lJ80PPBbDSE3HplyhFMqIQyuaqPeJH/JdinfnBYGWZ9JTu\nh0V1m5N/4Zx+BweN5iUqgEC9CHFlcpJDbEeR0GjeSu0IfR9PXjxgoEO7SEfI\nAAZvuUD3RftKV51421wrNXX3sBn6jnqfu/5WLeEfbrliaIzUuXnztxbfm3QN\n0aVixQxiqf/3k4hzKBu+cNF0hH9l4EgnNuJ4NuMHj/0GkMLnHFfOEb2Zye2x\n8Ifh\r\n=n2+m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2WTFOrd0Z8gyX6PZv5EEsI5a4gc044YfeCtYVwQuN7QIhAMsiPiwSqCEvpsJfrkugTVjQ8Oeib/H6XAtFXA23FA/T"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0_1639142076158_0.7284643776257049"},"_hasShrinkwrap":false},"1.72.0-canary.957.da8ff7f08c1e524623cc45f9638e00483b224387.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0-canary.957.da8ff7f08c1e524623cc45f9638e00483b224387.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.1","@sberdevices/plasma-sb-utils":"0.40.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"da8ff7f08c1e524623cc45f9638e00483b224387","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0-canary.957.da8ff7f08c1e524623cc45f9638e00483b224387.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-3tFAnVpaC+244h6TgVgh47v91y5Oy+SsK+S8tWh16H6ldgqDCB8J5OsZlYWd+qAgAsAUVR5m94fp9Yq3HatpEg==","shasum":"af1a44153f79a97cefc17f6fd8225d6395f45a6e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0-canary.957.da8ff7f08c1e524623cc45f9638e00483b224387.0.tgz","fileCount":832,"unpackedSize":1758423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJx7CRA9TVsSAnZWagAA2HQQAKTvPFTUaT8JofFrjJ4w\nB9vhUoPOgMQB8CIqxeptbJouDc1ZJgQYAiXsjTtO9LSSvsuDK8XR4+QDfOql\nXvHAuC4HxK/Q1ee8Cln91FpPFppDNRa9O5wuPZKisixNWxArRw0Hha+iFl6m\nZ4gXwyEDSMdyzSdpixd/A9u1Fv/21sMzII3Fco2O/dmIg/qaokXNwnXU5oBC\nMelSGw1yo2+Wh9igldVKEsW5eIYX7VrxEzT9wK6L2ccDRRHNqxj1EVf3sPHX\nFAk9TWaB1pNxUIOQeQ0LtTfUkqJH+nS5XlHemy87CQG4HmDFG4ekfwaOlZht\nTPZ7kVrltbINmgMlKDI40FaJCTlzLlyQ7VC1bYatS0rBhILDteDWdtwD4GA/\nZb5ipreo8CMPyJvn3Bx2BRYKeKutJkkL8NNd7KSw7EdfSbBasBJnZw4340I1\n1Y5ZZPsq0mnq+dH1mAz78yCNkI548aDdhqeZxmGYLlBz53OMaUYPuY3iUc6A\nKU+qcLm7JGtFG9QMoLpkM4K83zFeeVQhH3jxwL2kR6aXVMckpuo1PIBR9cS+\nEdadgaT4MCrZgjOaJd9rxWWKZQkXfzhdszPQx4oOa494OMDxaU90IPkhjNmI\n60NUDIJug7aLHmPR63DGIDNV0Z5BBYzHiMUOOKnoaoHJrzBLS/rzgB6NZ3hC\nSTrR\r\n=zKVw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLuX2CYgRoUDs8nRKMl3oe5dPSbXqA0Ny5Ic8WK6UcIAiBaxw4XRZz3L1C2Hpsms1OTg+MaWN407W3E27O/VOaDKw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0-canary.957.da8ff7f08c1e524623cc45f9638e00483b224387.0_1639488635662_0.18708697403009134"},"_hasShrinkwrap":false},"1.71.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0":{"name":"@sberdevices/plasma-ui","version":"1.71.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0","@sberdevices/plasma-sb-utils":"0.40.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e24641c3a0b47af7cac94b90b7d2a1036c2aed2e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-h2isLQe3QTyfBO98K2mM5PYN9z1IczWKAJcLGjlinvoAsZh+EMC31Gj1SWqXEa63142w7fzcdL3PSSGl97bzFQ==","shasum":"56fa0a0b4943d3393992d1fc4ad5cd8813f7c32c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0.tgz","fileCount":832,"unpackedSize":1758585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuKvSCRA9TVsSAnZWagAASZ4P/0E9eRDYM3lzQnsxBCNQ\nSngTXuEOb17UNlYXv5hz9pwBziO2vd+QuWtmJ8iKAAug8U4kXHsoX0dEdxGJ\nv7tB+TUNGUmYOty2MRAAMCtERmnbtMZiqBtxvkTr+x6P31j4v+2FQUaNWjBp\nJUvlUxTft9q4ivOlO39EuJQjrhVN03A/ff8SL8ic138g988g+/5+NFFOuU61\nYUk2YSSW3CTL8RJr7GxyUp9xF9VZ160fMXaJCYsaY0gZG4CbShJgPSLsLxzg\n74U4kJhAHSzqHj9uM8SHxylwcqnmmDJ3Zskum5q67QrlZLx6ILe7w6e92DAn\nntpoiC6+a3bccjMmKloInrKOo63J6Edc5YRp3tDlswJCpjU/Ofk9K8yRm4rF\n5W7DzD96bTXy7bGH5ifww6ixhGhfSEyJEiDpydFtyEdLoc6fmlpysb40Vdss\njH03bqqTriSAE6wWz0YFIqlkjWS9dqgDapRI5S8p7Dy2BW7yQg72DbrL7btm\n4El2STGUOoe6OYkY94ADyFBMjpXvPA2sJIHaaN6qIk5obg0RAOXT3hpxmID0\nFospmUQ/TdyTM9sm3fqS0hy+/Pbe5vCudQpfvC9KfGwU7SbAu2uVXrADqGvi\nopZlZ1Sv6/x+Fk8k2ycZCPjj7VGqIm2nQT8RZHmwY5EUpCEB26vEMR/QvyWF\n+1qy\r\n=ssFZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPmspDwf1mJ+dBF/NWayFaHb4xBLQne1uIAll0PITpTAiEA2sZmdmxC4j2HbGGg6pKhy69ig0VeR7fTuvGk/oLs+Tc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0_1639492562454_0.6664324670618507"},"_hasShrinkwrap":false},"1.71.2-canary.989.3dd91b4e3c41615e5b3e7ca3e28407758388dff5.0":{"name":"@sberdevices/plasma-ui","version":"1.71.2-canary.989.3dd91b4e3c41615e5b3e7ca3e28407758388dff5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.1","@sberdevices/plasma-sb-utils":"0.40.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3dd91b4e3c41615e5b3e7ca3e28407758388dff5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.2-canary.989.3dd91b4e3c41615e5b3e7ca3e28407758388dff5.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-9BE05pcEfmxD4Y2Jqim6xN44tbUWZCCt0fuk4MKd9sm8XYNJzUT0IM5mkWUlKR0qC+S/XgXnT6mkxdb2HdAG7w==","shasum":"3c01f0dff94d337d5b46020c76d8af536e2b8f41","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.2-canary.989.3dd91b4e3c41615e5b3e7ca3e28407758388dff5.0.tgz","fileCount":832,"unpackedSize":1758423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuK2qCRA9TVsSAnZWagAAgFIQAJ4wgRSsAP9Fayb88Kkl\nPtRMAlIZZHaIrKVc5jx9+WI0QEweeHqtEyORNNTJEeWBdAIbxY/cEI5WMZib\nHAszzbiQCjkNJTtTARvDdPXsJE1ycFlLcOHblIeAMqeux+rfbv2hJkwooep9\nXFn/vy/SSmtwJkSNC8yvOnxRuYu2otEF/lCsbA5Z2D0XfOEVXtmLNfhNcZHj\nZJGANbPWl+DmRUAxYzVDq5Bx7C6fF0yGmruKMhssEa4m7NVWwZUxTDW4sQ6T\ncPvQuSKu7Aq2QMJo0XFBiASodq/pNr6S1a3i3vTzLA1DJV4IS1FqwO/0lsqY\nxu35zGNh9izUNUC7oDVFHKoKVcsu+tSNXYg2yTmNslh5LcIqbJpiFifPhn4M\nTYZxisV9xBj88BCoFx6YAQe7m4sVnezGaEnsZcHuLf5b92silvC3HkCAInOW\n/JhSmpd8sq9sv3HagzMvl6ei20wdwBD2J2frpLJJDm8c8Nikk7r24LHJeyOb\nMVLM+zvLSUgwvt/O10BN8vIbnOX07EFee/22gpmn3LK8ucsRgpwyxeVmhslW\nUpb6qYJ85+RnVgHvXXZcH2Aqn6R4Nh6+Fbc/80mcc3OCRziq4etjd6v3gsi/\nnaP08pPN2WGt4xUrHOJe7p7wuTzwDio9MBV1TlhU4D0SKxkaNixuountQ7Ev\nRB3M\r\n=Hcj2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGX+/BcsL63tdx9kyTleUwFE68jSi72pT4DNHiLrkicJAiBNQsGjoOFYxz7eAQT/dvDaTsCB+/wmSCss0Ai2++YI1Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.2-canary.989.3dd91b4e3c41615e5b3e7ca3e28407758388dff5.0_1639493034697_0.87330308485819"},"_hasShrinkwrap":false},"1.71.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0":{"name":"@sberdevices/plasma-ui","version":"1.71.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.3","@sberdevices/plasma-icons":"1.58.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0","@sberdevices/plasma-sb-utils":"0.40.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bb86e97a97218d05c173025790c847bcfdd3b18d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-T9pJmanEcGIjN0LCGrjy1vpbWO4MzrZQqT6Hnu16ljRacMbt9RlePDys4HmbBVUgUU0IySDKR6jz64py/fsSFQ==","shasum":"fdde68accc3d789b6d9215189ef4f5983428f656","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0.tgz","fileCount":832,"unpackedSize":1758585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuLYECRA9TVsSAnZWagAA3pYP/RVTfdYBrdrKEsYP2WHg\n0nK2EDEMN5R6QElh8UxaEhH1rXuFh8SbObjssgYXPjR+Z8Yq3sDI6gBd5kZn\nBftbAFZumG8oEKmv+3slfmo0KTo4R2B2GwUjjnbXcvcccD8EanudfI2u/ZDG\n2p+zG70zQmxPezqG7BymkZ94h5P8HAimo+Vevmnwk5pjvcKA8SRcThZ9XK6q\nRNLytFcA1dLFPplOqhGNfSM74XbArcHIH5AGtkvhykHm0H0e07FWus1pnncj\nd/RPfQQc3Z8l/BpLW4EOs5L18YDhf9KE4rUoNTFGHgtW/oWxWAxRnAMSMvMB\nlg4oRHIokXggi3QgPhZde35Um2YxhyTI6zuAKh72FKvdMVXcu0esDoVf6/Xz\nNg2+/R0U/Yu9Okw0svOehVfeZRAVd8+An/pGmAb1qCdybqiIlFaw3rxHVhPH\nbxtIjkF4I8twdMMbEBcCFnODMHChHbjCKgyckQ+r+XHhl91NlXeDz53uh1Kq\nLv7f4DLBNivq6I3oaRGWKlNxjU/T2e6bV9RHesGBwr3GKuA+CyJsiGXxaWdV\nBkjdmwsz4/ydZZNVLR06JPfmPNkjMTpgKPomBRy96fSYDEO/IjhM4IMYOVOs\n21gecIX/bpMNLvvrVGvYUNTcjQ0cHSbOm7SFVoaBzK70PIIBq2kJWUm6ktGX\n9fFt\r\n=Pceu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXpnyCY2k5ZWsW99VIaRFBWhX/7xoAUpH5z86QS5A9DAiEAszSk7Yeus8lnYQ6OlbCdOVmoYt1ZEKSZRaE03Di3KxQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0_1639495171759_0.7414292288563358"},"_hasShrinkwrap":false},"1.71.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0":{"name":"@sberdevices/plasma-ui","version":"1.71.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.41.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.3.4-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0","@sberdevices/plasma-icons":"1.58.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0","@sberdevices/plasma-sb-utils":"0.40.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f02db5ae7be8f0daeac1e563b1a4bc253ddc357f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.71.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-QG1pckdOV/drs+AsdfuZ2SxGY/gUOAi9b6sgQBiX7Sf5RZzyzFoIGQxNzEWA3p0Y5KCiMgyvpF+FXcJ3W48qHQ==","shasum":"00f920d0a438dba6c994d71e0fc394b8aeee3f95","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.71.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0.tgz","fileCount":864,"unpackedSize":1944845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuLwHCRA9TVsSAnZWagAAnN8P/R31Xpa3ONcYMGWb5gwn\nBlmabVOr/ATyHuxxREl+8LqjX9sfGe0b2zv7VFMx07Lel6k5rmTU5HPso4Xf\nQJ+Lbv9xUggc75BWTk8o1/S5TL2P6duzZ8av6ZIrc1uFIcE9MQJpelHr5z+y\nbpGOd8z1pQeXF7Xw3QRrATOGbwnP5wTV2q7vmCQIjK48GYG4mJjbPmPHYJrd\nYjp4p67r1LxwCTI2uVkriEvAIuwwMMNRO4vTbaP+rrHYOr9llQA8LgRF1CSo\n+/WcSFYlJeq/NEpJ3ZDRIRdRXM2+wTaPvVXZDQg1JPK1een2deAlf/gIJxYC\n5sOsoNTjcgISNjNAWlwhRIacw7punszAI2PYF4glMI3P4phRS6Mds/UfJ6Qj\nZhFR8c3wzVIY4Plm1ow0x8wfc916AP6Dq/tUJ8YDOeiLnC/iFF//9hcpXVFA\nWGo0ooBsiQc+fXaY9QM3V7IJxX2YK5rVK660ZR/ltoSwLtIC5DZQ0FHcI2LZ\nsTmMTXlvEvlQAquiG9Ucbx+HQkX3MyUQqFmxQODnAZmS3gYPkkytdJImpFPi\nfi7FJRI4ZkLSWRHX4mKsyhbiYJ+g5fb+GnrSmxZ5TbQNq3hZCkvy0+VfWWtm\np8KWvhPFAP9z5hAwFw58+Z4V7wIPvosiFMpEaR/AJVxddcBNFczwokK4mYAj\nWr2f\r\n=Z98b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOvKm3R76TZy09gJrd0UHY6s9/2YjZlxx8SyKQG8jm9gIgZYQVphoBcZtmi4DE0ZO86YGWbRRSaxMIztE3B13xKgA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.71.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0_1639496710863_0.4022118474634746"},"_hasShrinkwrap":false},"1.72.0":{"name":"@sberdevices/plasma-ui","version":"1.72.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.42.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.59.0","@sberdevices/plasma-sb-utils":"0.41.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0aa79fd206e5a98ca939b4fa300fee9a3e841fa6","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.72.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-z+iOVY82qAD/v9/QFJQvt5qLyTaWRYN2AiWVpGL5HxBXuaIGaNP28gez+FB9Tv1oWfqqf3TYW7sD7Qt+u/RahQ==","shasum":"fdb188395137f108b5151b70fe0868164ee60142","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.72.0.tgz","fileCount":864,"unpackedSize":1946336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuM8OCRA9TVsSAnZWagAAskIQAJMGiQKTqB4kHA8R7gAX\nr4qCSh9Xsr/yfAzVFw6kUp72Sh5e6WzBvug204vzAyWy3XC7apbCTP+SfUjU\nIS1qAs6VnjdWKhUFYwjZAbbuDBLrROZOhrkgDOF3aJUkhrAppMyODTBPhidT\n6qLLJ3PFNnBmXEu1LB5ZCIVL8qupsuER/PlJuyabYcgcuHLj1FjWoGgAHcs2\nVgaH+tpcZIGddtTF7t9h2oS9EeKJ1DVTVT8TtDf2fmt7NpaizdVuzknftnPB\nnyrDXE1c767M0ftfrc+7k6czR21NDh/vM4Mfz1EefOLPQfb7oMxrzhDr3LKn\npGcP0Tdjfhd1BZhlB7/e3Q0jhzQ3ZBlQqDXJ58LJ5Xh5oyCfjPwZfNsm5K2y\nauz5EfdQ8yVSLO9r28ouPxPRGs8cEodMidoCp8uiUeHCwlhYGqaENz1Hcau7\n8LBWVopJ1123klqTTdv0QSpXCcGEvcvGCcT25iznQwIjgDhc6dAnFAaREJmP\nhEyDDrP1bLbZlBpS7I0uvSxO93cV1iI/46vbC3NgFr1kTHIpiW7bmiQ9G4SP\nide3HBZd9vxnF7baDSCuyScpsbYG7iA8P4jMhHHGzQBhZOcQ2guLRTJBLwld\nzOlTw/s1ln7aVbREBXBzBdozlXPtSoCJ1iL09JHRodmC1Ld+PzpyJoARSWVc\ne5ID\r\n=EFFp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmmnWXCfGzholfp4H/8t3aQSXB79uuTJYKr8XL+tBrXgIhAItEIpeYNmlfLciy6uPICi2dlSuZ5a1eNG7QlBvfsT0M"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.72.0_1639501582390_0.048847514711924056"},"_hasShrinkwrap":false},"1.73.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0":{"name":"@sberdevices/plasma-ui","version":"1.73.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.43.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.60.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0","@sberdevices/plasma-sb-utils":"0.42.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf9a990e7dd1a802f8dcfacd25b33637551c7c55","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.73.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-IV6rrieMKnUCud9TA5cS8o3xmW+EpSaqplp2cUW+e9QdpBCzvrFszY6FTLMok0U9Mh8KxCzXezzx2HtUwT+i4w==","shasum":"abf1817739d123df3dd9de2cd2300ab93275ac37","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.73.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0.tgz","fileCount":864,"unpackedSize":1946552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuXd7CRA9TVsSAnZWagAA3jYP/jzDCMn7a8Fo473NShIK\ng4fwe564KzcmAIdtd+1sMAxc9qyjVIPzTEo9PjvFdA956OdThftbZLexsmck\nlF1VYm1+oFYuYrGaLwlz3Fmg3/4m6MOHfn4L+0L67tmRykU5jxremGx1a07a\n2IXsLGMF5BVte1hW+ZmRcvLKwusFDKBjb8b+MuOnGUIshoOmn0tU77s5ijXb\ngK1Vakn3/MLJ24e3jQhzdT7FcKN3RVl0QmMRvDoR97vQFWISvlEVz0zxIR47\na35wjCtIlM3maMDk7Ih8djT0+U8NHcsaN8smybQcfrROB8EM100JOtKGt19F\nTvjtBrbwAY6bc+geazq9xk4ZLaJjrzQZYi+WAzWZ1kXoclcXmCF1h8m4XWyi\nwlzfz61XjyX0SziaQSS6hWBxuQSHYljeyxm9mOze6GA3GLZ/zXauuwbe1K65\ntt85CvgJUr1/nREJ9bJHlhY3w65gE4TiQ6u9JI9RvYsDA/66CGqP4lCvRjMp\nIgDhIX+FuEooRcrnAhllSgXJh+cQ69euYmN6VcoSP41AR4XTWfBedAbsuec0\n1jRxFWiTii6qmpLCw/b9/9P+IuH24gzX3GI2zuBYapHE2TGK5UxXesmFS36r\nmLeJ/K2f0ktnrn8c+0SMLtU7yuTxBozfzPo8E6Il+XmDfY9KY/qolUJSqWZT\nOCoG\r\n=6mPX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUusTJYS48bjWz7oQSafWxVKOmq4HV83j58uA6yRavEQIgdxf/wOy0d70d7YWLYmZg5ZpiLVVBPzANgQPF/SkRpKY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.73.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0_1639544699747_0.46950453299312955"},"_hasShrinkwrap":false},"1.73.0":{"name":"@sberdevices/plasma-ui","version":"1.73.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.43.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.60.0","@sberdevices/plasma-sb-utils":"0.42.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"397c06cde797ba9b5a3626a2d398817c65ec11f5","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.73.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-0cQ+mjWKZ6f6REYq1gzUhYZEYVR2ILA6WY2zeggu4fwLz9BKUaYy6wRlrPdX6c7Jumnje5WQ/uKGZWnFy/bbxg==","shasum":"563c0f0c9aa02abaf692250384f0e578018c9569","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.73.0.tgz","fileCount":864,"unpackedSize":1946821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuXy9CRA9TVsSAnZWagAA/3IQAJhQkaVKgwmnhaxPuS/U\n9Kda5XuaH9+YJaEI8srzNMmIxIyazKI3Vx1Gar9YlW9BcDFEy/KcaZ0B5z/I\nhamQ5KT4FxP0dydiPG1VpHSAOgEV0J6aO66sYndjLJWfL3DDaFUMlNqr5Yg+\nJL0thAuqcGuj0CGSodsPp5yjMlnFTsGqH5Q4MNkru9mgrgJZzSlPgpAiPY4N\nRyUjZR8knojvQ+0cYtRZ4w6uAn8+8ZTDHXsv/BWFkbHRLXvjJgUW3Ks5MyzD\nxWbHN9wOmDqKFhtFFIKWz7gAvesFRIt4wGhRI4AwLGQ1Qny6LPRHqS7mawjV\nmoE4litN6KuWHlBurRcO7ZNrUkKBHvBZpoy6c10qS491Hsduzn2Wb+6L6xAy\nZNvvo8Md1lgT46d2cUcd5DFt5qa1SV412rcT4sqv7SUYMDlW1yJlz2pms8JA\nBV9Gd9BruUNKjTKzHi/PAdc6e5AemG2Ga3VnzRosJzbKv19kyJIbbDuku7O5\nCH/IwQARd1DUfXVPNdBeYbqy2D+6uUdf6gOvQHnhzDkiDQ0A+EdjAe5OQj5F\nFmszLIYIr7W1LWpPzalp1ak9QRHeEFfz8XId2edczH/xOme2yHU0xtQa+Vwp\nIzZ/zz/ntx8JFoGVixVWSUqBIId8P2R4vb4O8U/QjAdEPcLhgGxIgeJy7chp\nxbDe\r\n=EVCV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkE/OdO3DrdpO4u0DQot2vQeSyPCVOT9mmxt5ad+NzzQIgPDiQuBmsIXqtXNL6EGhIuSVVB+1jYnEGRBnIIeQ6NC8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.73.0_1639546045485_0.22034695342007438"},"_hasShrinkwrap":false},"1.74.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0":{"name":"@sberdevices/plasma-ui","version":"1.74.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.61.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0","@sberdevices/plasma-sb-utils":"0.43.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f956e1a40ea733a963b4a4c51cb38b2d6242cec3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-ce36Tt6HoThtSwquuXYg3ovDDaTZmcXsYLKGfC+jdGiiEL9r5LM+rFsNLGeMGpvqM6Yk+xw4nWrR6FuJ/liNfw==","shasum":"a8f362ac41156b65a952fa6ced14ef24f40c246c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0.tgz","fileCount":888,"unpackedSize":2128606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhudlPCRA9TVsSAnZWagAApL0P/2A5TeKhuErM3T5Er7Vy\nISQi9xzxs9R/5BK/JoK/hQZYRJHTxhjbErk9+NciJxZblIwlAu0bmdEdmnzb\nWTo2w8pvG4WGUz4+vrxeNDSHzB8zgySHIPwmwWhsblqRXL8BXeL9EWbtw6LF\ndLnCW3cniD0N6uyDvH9OOLiSehTt3kQ1wZTgxHXwrfBmn4FOrlIWb2p54ZgC\nXY5uhlEtkPpOkveGwXnkEBLO9s9dNgjtWMPdkc9SmE2E+F+6acqMiPAESlgX\nhHWgr8WjSMJblwfdAzQNEkCPiKOXjhqbfcnx2azRugPsTB9GyPHWy4Fzx6oi\n9uy54/zRII73SynwzNDElfZHODdkv2BCyjjNVvoGDP2aHQ3oLduSN5uk3D9c\niyBR83LxRt2U73FTyRie38CwDJnHjHdX2+ZhQ1t4v7wqEXUBUsztDL67BhJJ\nChq6zI72EGznndqLd481/TQ6jrhl9rCCJWlNhQp5XD/tkbSAkOvYAUk+fsOO\ndggV180Zft2seIdfR2oOPStHvthW+RhJXjCWbIDDUEXpfjixBSj1s4Xr2QA9\n0HqlvF2XNDM57WoLMW7HQ6ZeyknkaM9Sjd3zgBj5VgX8wKFaP2w/ERi1dm7P\ncue4b4DFPUpL7MSoLILpX4iUpYS1+E8L3FYHUzJWqs0c8NC94oVSt6s1L1Qm\nNB/+\r\n=e8K1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtFUv8V4bZ4nV+4jbaUcRclqcC8UC+pEajiuKaXDDsnAIhAIzJ5aZFjaCq4yHdV0qd9pXbAGdGM0szghD7sqA4bCEl"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0_1639569743603_0.5410771006738302"},"_hasShrinkwrap":false},"1.74.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0":{"name":"@sberdevices/plasma-ui","version":"1.74.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.61.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0","@sberdevices/plasma-sb-utils":"0.43.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"345f5be20e41d01ea30cf73b1bf836a82e105ed8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-yFR+j3slskwjJss24Uf3KC27/w9nNsZKue4tvhs2fuP5u9KzPSfsRZPbZxkT9beLlXG2FE5kZ+OOMabnKpAhjQ==","shasum":"8416aae986fb371e33f2ca1727f156f5b2185143","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0.tgz","fileCount":892,"unpackedSize":2169687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhufFJCRA9TVsSAnZWagAAxTcQAJe5/CrojLHIjy+UTKVn\nxvmHyRK4aRP3eg2ktQBYvvNCzGTroeKC/S0m9FCgrwrNtlS2B0fpGvcwVmpn\nZ8Rxm+5IW6JkM5+s8Ce4qgv98gbo2oq5ryk42W6zeBQeXepFRTZu/shGBeO6\nyRSF4b04Vu5NUqAXjCFePtuGNYcD2KqAA+k5l/UL+9sm3tWi/8pIRdeDAWKO\nAUPno0DOw+gEIQywyJz++sSMHV7YukvnQQLEAcsneMQOjera5eRrLe/lm+3I\nAXxZTzLlB3TfhHoltppOROWFn1ww8FPkSiNzb9DLEcBoNAX21gvIypOtvQBa\nbOHJo6tAvWBZn0R5B4envG/MMIpr4NguQVaBwiS4jPD6i/Zlg1TaOyyoPYO6\nILr9SFdumSxwV2WCfCnZMC0D0FuIsnTdg2w6/Evpmfu+90U7CAtoeRhj1OCm\n4ssIOz8dMDwR6pv6N855pLAquLd/DMxS9XI8X3yXiLwIpuquQWiQQiezSAYh\n5hNfW7CCtBzDyqaClq6H6mz+2CKsUqjMpmm2hQTPH741h4i3X1pIdd6SC8um\n3kWs5MVPy2y0AOOQXLBPmissiJPnIIKBLQpk2boPScaQASqj9QfLp1dNXmvO\nnk9NUzsHX78FBYvkvlZ5KAk+osSxiNXCqTSgNW5w36/S04GnHsGgKnnr53o5\nVKd6\r\n=NVBu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQWZdOy2mofoR7mkkiCO3GsMGyG3BM+ARrynwF2AmiBAiEAyo8sW6HNb6El9lQgvGoTE8d7/1NwIVhRX/OBafOUVB4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0_1639575881044_0.2085008664591741"},"_hasShrinkwrap":false},"1.74.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0":{"name":"@sberdevices/plasma-ui","version":"1.74.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.61.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0","@sberdevices/plasma-sb-utils":"0.43.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"18ad2ff59b9f72936dc9f9dbfc6cee563e083353","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-NK/gWphXtJ8l/fK863jNqu3LrJOfvSCBHMZQKnuq2Qd/im0ahtsGRoNM9k9g9EQ5TIYFF2BArGQx0WDeTTHtAA==","shasum":"79bd986e684cd80f049bbc9ae2441637e2462966","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0.tgz","fileCount":892,"unpackedSize":2204465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuiwBCRA9TVsSAnZWagAAUwYQAIDX4hZSwGZrKgOMD73e\ncuT1L6uwxyW68lFFIV8yKViOt4RjRrC5lgDY3KIMv/aTKptEkLGJ/ARgZOE8\nBmuL8N3JSmFUifM4n5xs4QGM5ZljrCv+IGC9YTHT0f1xtxSMxy367EC3hcHq\nArYijm5AEqS/pTCA/plqK59Ah/V4XOjusaaZRB2HZ2qIfjcR4k91nTU/56Hz\nZOoeKa9gFxQj38NTLrPhTLXdY5hdgDQkBVwfYu8aDb/5bUkNql8EOZPaG6FZ\nBt7aZJqo8oOKEabsOkUi2MTsAwyKlS2ABU67VGZRkFnCIyEgv+NSGCX/Etw3\nTagHPahtcGLflShIyL8BhHo9k/mly3Q7QCHGMWdYvKzRK1sRBcsZmfEN4itN\ni4lZRr1GyMqnKSEr+vk1JRFDDtE118NCs/pWfCtywb1PF/Tx+eTtSUnaV8OR\ny7NW+miWA8LYUKz80XFA7tEhyTe16A9PXJcEuWdzP0D+vfMKkw5fD7gI7IP/\n0g0ulXtSyAsFq98mMlc/+2F4QWJMLFojNYKu7GI64bpAapuL0zGHjhLOmXrW\nXj6E9dbtMtfLq3+wK+H+pGSF9Dnpr0zVBAj82QTkU75AZkeIIvLLcqsdIQRb\n/xfbWB6PrX70SavkxyxdCbpmFKbFjaNwwOoqb+dOPEwUhkiAHpm1XfAZa1e4\ng7W/\r\n=ZQkx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGALWN+mfXk0Q78le48cKm1DCrisIiCo3aMuvo6wwvKIAiEAv2/V8jc5O8w8Y9xE9EGqDxZqguiIBUQ9LsqcarH9mc0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0_1639590913202_0.5431038555752501"},"_hasShrinkwrap":false},"1.74.0":{"name":"@sberdevices/plasma-ui","version":"1.74.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.61.0","@sberdevices/plasma-sb-utils":"0.43.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6923ebdbfcf67db7859819af08ce50ebf3de3237","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-RzvPVru3cYrL9qzCMHv0+KvjpRGzkvcCUvnN2eUZBRxcLyBJDSLq3hrutey0mhHMyDKlhytx+GX3XqxLueCfmA==","shasum":"b8d196b801c52aef3734bb3ddd1ebc814d190d3a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.0.tgz","fileCount":892,"unpackedSize":2205465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhujueCRA9TVsSAnZWagAAz38QAIfhqj6DUIZq7K9Wu9MC\nuiXHvg9FXNmzTwXA2LSR4vvOGnc1i2ZSNQKkI6pu1N4nxVbYvJ5AIvKanXo+\nbHBWH54AMutdPAhMHEh8AhNNWgp8JZTS/HvJULVddSevVMKF0vYTYZ7rjNHc\njdAKLRd7WU8pBZ44qSOH02SH1rMTaTMMqv3eCLQA/i8uwGxPkVORwsrC2das\no6Zc+OIWg+cnOluwn8s+MKNA1Yq+L8BfjtyGzertHKUvUqXU6wAIkg6oeTZg\nx0+l+yzhN0zukaA2Y7u+AguaVISe1I+0pe5XnvWwhSc2Xge3IxWOqsHu3G20\nDmmXueaxayRs+ej/mbP0Tgh6544AxxHcDBEZvMKNNDlkAyU0PV11zCE17Uf1\nv6UsibgD3m+J0tATxYYmoQduQRl3KmzFlWsluIeWOm8SF6z0jkspf3a8sH8h\nR0GrPuIHds33Rin4maRycm9QQci5sy+Pz7PNVUS/4bCHtf7yf+o39UdRjD29\n3/vzHGIbP15vCimjWx6vpX8N9E4wPKpfQjNbtYGjwurwNdfkLqFtMbN7zGv/\nyEgGqzT7vKguLvK7f9BTeV6jd/Ebe34EoFsGXhKsksmHM8EOSd8c3hAtl52S\nEoAqtfkwDmzFUXBgZ53kgFctj69FCsVA4QJrqAp9GT31W8k16i5SfOvz/OO1\nNo20\r\n=USht\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE9DOplxF03ONN6I7wi5DKH5JkUHSe1+jX3/D8600ylgAiEA7Qb1rHF1RSPUmhpi8XmhKOd34KJJA9I63s2YFuQ3OT0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.0_1639594910182_0.8150464627079572"},"_hasShrinkwrap":false},"1.74.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.61.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"60fe43e36eaf923fbaf079d05fc6290685129632","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-UADs4OVZVT44v4jJ4L9GyKdP8y9q8gmzRVUEtnzWoviy1niwcMu3BtMpQ9t+gEtjClR6parB69VeVxM12IEWKg==","shasum":"5f2a20e7e8ea4eb2cd270114a9683b9825247294","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0.tgz","fileCount":892,"unpackedSize":2205681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvFnSCRA9TVsSAnZWagAAY2YQAKLs8mdaR10XAsKe15II\ncA4jNtihwd8QAUWtO2hdOt+si/ilVRQziz6gvnw6PZ9HuLxjamHutXBjXrVa\nkZnfWzeuWwePW+0B5f0+ildff2QH9gtYDKbOw2hroo/aRhXRlYqEhyYSILu5\np6I3On2kuH7tk2qGuAxNQmwpZFsyFNKjqo+qvWSM+rnjtkbjeQYop4CZvVxr\nIZ2VQqpsGuT0SGLAX0ZjaxrOKWNUGTHddZIxSMa0NCq4kvNPFdNZrsHzTYvF\nq8M/kwVR4saTtE0FEA62E1/WesSfyZqTt/7wVtRKCXp04u/vbhf7bsmKNaFw\nG0ZATRlshXBZnKCOlVt6u8Hpc6ssA5Kv7ckyPYgmtj9VFuGUC3ZSXNpKepv2\nESxf0u6gyaBBFS5F0TaTH4mCGzfTyKZTWLZ4FaZZr7eOc3FfD3DOeDgca6BQ\nvCAODpD6ZOxxyNwXltXowh3wqUa3NP3Fs7Do5pVjLogJnNHhVjklXG9Tb01v\nGLxH+IL0CVHrXF42CqO/7my7PHjctrorbjeFz01tNQ3sOqYd6KedvMyc4COu\n7ZlOmMGrQW5VwgRWdOOJekiKV/NlMsscZ7i4VWGOEjUzw773tOGQkqI6cYQm\nySNAv64XqxcG9lMXiC8pcpdI1hGv0THGBAUmuidQnBT0u9NGrxo0LK4GLQDD\nIqB0\r\n=LaTh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHzj556HZcQT4vLuvC39m+pvcokXeb5XofaH3DdenC+AiEA+kVGbcJ37bR4uWo5Onl0ECTXxSz/Km3RAwBU7y0dlMM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0_1639733714572_0.33350355014794086"},"_hasShrinkwrap":false},"1.75.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0","@sberdevices/plasma-icons":"1.62.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a0a0428700c66b3c6bee6b9463a21e6f57767ed0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-oSQ+nWBOO806wUs1dINSi5ObrWmCFkaGqyoQu5EMXyWddOr9tyomPZtuclSudJsSLKvtaAOgYPlSfbNr/d0N7A==","shasum":"106c2523d50bf1b34f588ba583201f7c342cf3ed","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0.tgz","fileCount":892,"unpackedSize":2230417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvbzDCRA9TVsSAnZWagAA/egP/A/6o3FoluzbwVuxw6hH\nkt0ywdiT3pd7p14qkcJxYU/UkuAj267txTYFjhBeOd3wYqSHwHz4aBil9G/a\nZfCcPTz8x1llrzd/KsBa8WfK5hpL1//q4bfPELpd1FJWuZR8feZ/hoNSjMXc\n8qpWz/Dg2tqMw9WtKiB3kplCdkMcEnaAH2Ap278hG7nrlOjUYQ7Ml9bw6Tx5\nPdvFucQtn3BjhAz6zwCl5VeDgMqGA/6SL9zLMuPjhw7c0WfhZO38eWEelBTc\ncKVSEG5RfB4arzAh2azYYYLtjwKW9PNBNJZtvRwf9sI2XawG5NzI/rf974Gh\n0OK0mAEOMyoLlMxswZAkOwFrp77n63Vf6KFlwkPAe0f6StPEflFrIRAvEORV\nqzELhMKWYJbHA4t+wEZVLQN3uIF/bgDEgq/WqqqXgNgW1bmK7wFI//mqcmC7\noBC59rvQ6qztvAerX7aJDejVvSmmpfqU6UK6igWT/sP2fm9liiAzvVpVb9zv\neuJMOI1z3R7dd0bHbQdSYVlpOCz5yViJRzBD7BBBD38nx17xZNUc10bMb/QO\nk3dMkOcgOLQhL7OFO+977KDQE5gFaiQnY62V68WhyBTkwBk9F+s+jwezjhuU\nKEDG6DM3EK1RBh7xMgXlSc9xSbMG5LvFEbOh/P/KpbDgaLlE6TgcSQSNgjH2\ndU4t\r\n=HQM8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpq6AvmWox+ZTaK8lPTSQEksVuyZaUM6kNYZyBuGQtjQIhALdIkFRW/HccwnwddU9IdaIBW3lDIgL1V2txmOPELXx/"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0_1639824578896_0.4956324592058705"},"_hasShrinkwrap":false},"1.75.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0","@sberdevices/plasma-icons":"1.62.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8ad310d6a5db0dba26b640b6c9b8f278ea099ce5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-uNzjD4BcKq81Tf3PUBbJkK+LQ6sL/Z0FG1CzQJQ2AJU4GAu+TaztdpUT+cM70CiQfQJCa0TQz0Dj0PjdSBlrlA==","shasum":"5b10e3cd365de92476437e511134c0e5b6c34684","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0.tgz","fileCount":892,"unpackedSize":2236858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvfwVCRA9TVsSAnZWagAAdZ0P/A88SnAIHygUsZOG0Rbk\nE2x4iqxTotMoAL+ueqTVkWF2lYxGZ2Ti7zYJDfMs0lnEE8Pww2Ga3vEgJHO9\nn0dCXVbGT+6rKXbpIVq1tStrsq3krSAX3hpIAWX4OW5bC+9b0e9AMLt58n7F\n6sW/VU6AUqb3TFYnjpcu+S4j/PMdS8Bw5zf0JDqV+pJStekuXyDl1rQSovvW\nELiYXVa95eb/YaIE4SNy7LPdJqAcwzoqAxG9a0zh+vigrayBSWRz7JqJiRFO\nVYfBBrb3+yZSteKwvOomzAQdpYAilnevmoM85mkhESgmfoJ6CkB/8xKEAjxT\niidEP8BakfZG8eHVjfVtJojMuxpFR9vBwslZtcIz9LUi6OnpJfoLKeHgzy8H\ncvLfZ/wDB9UxPSFwo51UENzHTY5vMFpj2RiEDrpDrOc2UXGoS9JTm+HwXLvv\nQQLvF6F0QsrBb6kR8JyzSU3UjewH8xAX7ciq83AlG9wQiFeeS8NLB4dLerRG\nknT2Rw+1+HLSEsg0+Ff8+HpO86IxT+Bz2WdYEo6H4sMnpX8Vt8lZcaet068U\nxdyt2F4sDKICS46hcFGDjWKg3qLbtUK5KjN8ztSzwYF2LJ0pWFFmKGNLuozB\n7OE5zDZQZTyQZ6yclYp4Bkcn4zy9v8CK7kuEIBJwcSrmWbCUlAXL7nAhI5qN\nrkgp\r\n=tIN/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXd/qBpL7550wba9wXfs6UW4HlHtqC4bfduonEfkTQIgIhALcc8oCXYdLq561DdLZpEEtGjV1nr4TSDXXGMcnXH94O"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0_1639840789651_0.26704882211903747"},"_hasShrinkwrap":false},"1.75.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0","@sberdevices/plasma-icons":"1.62.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dee515ab3344ab203809cda01bb2add3fcf40597","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-43tyOOyqbFMhO1EvxBANG+jobmn6kjEul91vF5fN9A1GaW0FT0/uirTqbET4/nlUpJQF5GTcL531uYbldMUB8w==","shasum":"3dc7b1d2d2ad3588f6c5d93a54869284257614d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0.tgz","fileCount":900,"unpackedSize":2278558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvywJCRA9TVsSAnZWagAAFC8P+wRIRDc+JK/gLPQBS3/5\nJ/NGUGvjoQlMSs9S4V3lRhU6FQrRmkr0a4BnsOTYdfxtCPos9op948ybpm2H\nHH6NVHI56VTvfAW6QLhKTOkArfc4sHzNRiQY4nfkNEmerwtcP7B42Au7GxD5\nAI7gwpqmT7mcV9YamKqQs30/MJKg7ZgC03w5RSwSZKFpVolbFhye2m1hjyUT\nc0C6ZrOBWcSN6U2ay72hWuDGw5Sev7UzjytzhCP7O+mtVLTKmjlE/iN4/+OJ\njL4PAVXFxOLbItZmyC84pzBv5LvVJJhub84+EYMURp37CCRkazxAaEa2ljr8\nP2dwToIXk4oQUVmpYGK/3a4FmOir98mF9m946KJ/oVBmSYbR2qWSH8IddFRe\nZPGiTqSBbZnV2QMkWbZvmo8Xty4KOcXoThfH6NT5dwNhh/mrKcU8Z36VCNwO\n+lXvUdpLcILwoAef5ZL4j1298lSHCdbBDr8hqlNQNkWHjHWLkpOuluRlYCB9\nyWCBnSgWBIdpGObIb2TiTnFnbVZd2PZeMwPFS9Rpn0tqacM1WR5QStIdXW8Z\na+3e+88T+jmOtGeDJW2aQzsWP41Lv2cg4wqK0RT4nIf/Xq7ok4lcKpKGe6ud\nc6heEDkxaXjREcTb9wW1AV7raTcoOZoYz7GeMxlYiLEK4/SQ6heYTxReqSiq\nEaAG\r\n=0lPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhaXq51y2q6J5gNKaxZZ1JrYgOaRlufa73nMcb1CEuaAIhAN5Hes4Jxkd58ousOvNQy4iq+wf1F4U3NQIHP6NlLXXO"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0_1639918601481_0.5780695510117235"},"_hasShrinkwrap":false},"1.75.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0","@sberdevices/plasma-icons":"1.62.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d87069dd61a1b0cdf08f3c7e3744120dc54e3b87","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-3NaXG9nRljSlekcL0y+QdD3wp7LhJvpo6dwC+JjUbGEM3yXBDDhVNB6vROk2rrFoakIq22PrymkLXqOyyphy+g==","shasum":"ff40aa401cd94a1a06633d33a88bb7ebcc3e08a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0.tgz","fileCount":904,"unpackedSize":2283329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvzk/CRA9TVsSAnZWagAAiqgQAJOkHcsX0DBWfcMLFb6t\nlOpKsKD5hUE5kpRMbA5QlRxnpjmybBGVLSZnTIyMYY3I2z2z1u3umy9tk78n\nIGxAyM4UAZ4dRDKwSB15pdoM6Z5lo1EQmgUvnKVmmrFM9tBIqTS4YW73WRN2\nk9FZ7eF4eVfl2opVFdBZWMqQl+n8UkjZFpFbw9o9cT5W/1EVOfvthGL8HyXe\nBXK3rC51rygGNXFKjgqbp7/ob17zdR0eort9QQq7lZZ3saV1L6DGA3/xBI5X\nW/2nxcUQx14M0X2TntKa44P53OTCd8lakwSm5ddw+IjLo+/SE+f2a95Sax47\n82x2vE99Y+KnB3ZdusXE0Y3Grf2sqVe8/4/rxtMwEt87EL1LxOUvObALpTrv\n0sessZtcEq+EUDqR6zS4raJbXBGktzOcb16MXS1BTrrls5rEH3zuTG/s5qbk\nGLo6MMxVGlDIYDzL75vI11LjkXjtm89IbzCXxHeebxxu8cIGyFHs5YMKmTXU\n9Pw6kUyLR91/BF+QJRSm4P//9eHxIeSKdQJt928e0MME49mSJ04d43ZEKeLI\n+XWf23pI0cR9w4S0jSVVwKltG8NdwLsANqAgInH3V/ASuAQa1rg7IsjZBDvQ\neo2S72ACFG3p/77h4nF9CaRqrvFXozMRHXxV+NXa6s2gYHV/kfqP2qNzMZJt\nfzuX\r\n=ER82\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCstPNruCd8oPJWOz4D4KYJWC4kog7dUMvmlFJbVDgR7AIhAJXyMmEXYKcq/xUwwklMmydeRfbqkihKFjIezl3EqcYe"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0_1639921983728_0.7506462731649062"},"_hasShrinkwrap":false},"1.75.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0","@sberdevices/plasma-icons":"1.62.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"25438439e55b83e55cfb2dc89a71d2fb9d643f22","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-Js0XLJG9WWoDlLQ/5r5RMy94VFOiWfYibrcDACUZQEzKbWSR77o5JcE/zk+Kb6366DQMrMHQIlEl3lXN/qBIeQ==","shasum":"70bf0927cca50ec79dbe10dd7fedff939775c73c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0.tgz","fileCount":904,"unpackedSize":2283329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv3LVCRA9TVsSAnZWagAA3ekP/jlC1ViKjFbuTw+DrEU8\nJekiUcbkpLfPZzw8/As/XQIZcLyoiVGSkkPytuc527YNPWJEQI4Ip31FsbwP\nWN9ZtaoqVfQDbVUfVPQOYrXmRbxuYQBEj/N7KWxoiTLi3ptEvo23Y05kKLb3\nOFSnwRSOr0d4e8pajz5AjmD0pd8c/H5rpKMXHC6VYgpFnS+RgsaLDe+I7Ndv\nJ5p/h7CHSbwD1DJhhcr7d8DetZG7JoOaVXuU+vGz+4CJsukLvZ2GdOazFVec\ndpyTLb8giIdK5IAJ13/qo4fCnXwIimt32ofjbMtI5LX8Y+jMOiYqjrpjHepx\n/yRXGfbp+bKO0wzkkmnl2dN70fCdjodLkoAXVbxrgyrWcuKYMbGoU0/t27dB\nnMS6PuePNGxPEonsD7ZfQnN6CA5DoG69uhGEWvtObuLQ4h0UsQPAoyRM+Xsg\nNQnP44QVuwJ8EkOYWe06HT8h8L9pGbO4DMBboYAiyAqYZovZlyFacSES7Fdz\n+B8J1BEDnXqkDOraJvVlTm5KCqATxsdREVkCSA1iJ30Wo72FsyCksYLozE/2\nw7YlwwRjzPO3k2erKGB2mV2YVzVwypsFgZgubJMJyAYVK+wlTJMz+6XjMOjS\ncml/2MjTjokPKq7Cx82dNMW5g9S0BV0NHAh7UaeiNRrJaghbzXjh5HJ9E9zw\nkkwE\r\n=HySs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC77DjH8gE9Jp4CLQ/ajgrQqtzC8c6ybOxWJqPw1zJ4hAIgJ/8ADESrrBtXYkbEECGcPEHdlefcwVEOo6RmwhA1J3c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0_1639936725484_0.4567611961460394"},"_hasShrinkwrap":false},"1.74.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.61.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-MUnMIq/uLBeYCNmYso2/01VPVbffWfA37bqOf9poKfL6CgClvduddQnfqI6HRgXBrWjpodiRbFtakoCQCFfC5A==","shasum":"8d21f04f3c001a76359a9ae462d838e512439416","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0.tgz","fileCount":900,"unpackedSize":2272058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwCk5CRA9TVsSAnZWagAAHSoP/jKV8llU5nOjHgKiVjts\nuabVoGm8dkoxFnXwUm64kfTvgoPYanLRsGFYWh9tyo+DAg/62EDo8+ofCzgz\ndira5+utJBx+9fs+tY5I56BQgC8V3yaet3QX3q4ceS5Ugk2VLROVGGktTFsQ\n27QNrsiVTkTob9ueGC07DlLbVDK2Sb8FfwOTfw6OyZU90sqyfmGEsqNE9b+d\naX9OcuwmJazz7dVlyQ/w1QYWruA6845HWO2QuIIReibR1f9FPImfJO9gE1ER\n9f3YhtcJylEE2Hjkx6EhnIMTBYqLUCXUGygrKgJJKmsmV73hep7SGvHrEovF\nphIP3HTKz3VRPDVv6f50pqTEWjlZ6dCI6w1PFGctyJT8BVwmZMOHmVvXvWWl\nDXKQvjsyYFvw5UKfy1U7Cr8W7p2GeU58dfddf2vRDNmp78h/ceK2pUNx5S6P\nLlEYYz8WHgDLW3KQ0Qt+7TziPjLnmwCzxh/alShiC9Bd5YL9h/T0EAqS9qBQ\nbp7pE6bT+/qo4BEm1hedvQitSDfc0L1XFmMfjFPB6v7FCOhiu1hgFk9RIpKG\n0V+7PtKRFYFYtJdUL3WA24ni4X6YYSMy8DR7pblu6gQOS97UzOtnIxYRU5e+\nFbqD9G42cldXDDC0ZxL4u3IF7U/tav27uvItSMS6SwIY/j17IW6DoonGPrJN\nbf6j\r\n=8/ja\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK+Bw28hpnELSUJKH/455+iUp3w8rM7yJUykRlwAGzuAIhAP9MieUCx0x2sdulrS9DNf6TqOoEdfhjBqiTZ2mrcUUn"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0_1639983417684_0.09777987367555374"},"_hasShrinkwrap":false},"1.74.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.0","@sberdevices/plasma-icons":"1.61.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f0a9139f9b478f5ce9dff69154accbf7628b6e54","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-oJf3ZIJDSiUGF50Vb5bAhc2pyfCWQmIDRS9+7EjheOFHkb07kUvubSKQzrFXzR49qtvNx5hJ40xnyRRk2qCc0A==","shasum":"5f87d8fc540068989e718a707b697d010007769d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0.tgz","fileCount":900,"unpackedSize":2293904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwF6/CRA9TVsSAnZWagAAT94P/j1wk7TRmXVTYowZ9yPe\nfgyNNZt5YF1WYTSh7hKADXBws1BZvdva6Fjus2njvv7CJC5Z+QHiaMFYfk2x\nbrueRzIUANt91qzLnij6zlplw8IaEWvEWmDf5AJHr4dRrzzAEGnpwQ9o+qGP\nNWNhO2v7V5cDkddbXgJ3jcALrTCcwZni1ZdqmPKvdodNlyFwmrspseVkFLaU\n4bGD3xUTEehsU0OE8uuubTPzCQEEXAxE+I6I2mFW1aroiFGhrW7lcuRcVA6u\nCiX2Qr8eiSEkl+Cvy0xQsdgAGr8prhLwgEDUPCYZeTSAhYcTTabaNHAiXEhE\n1xt84aNpKP5vjyep3ke5azlrkRedgZ8WOujy3IaXzDKu/S1g6eU7X7GMRxeH\nEjXVKl/CtdwlRR0kJGltZKl9eVpK7avcIOyBiP/Y+iCVslNxOc1kpv6CihMN\nH3RMK2Ai3tVV8wFDjkFqsMvDiUQBCKtieQQ8pnYMav8Hp9PXco5wxwOu5+W8\nXyDhsfjjaTgjmwzYHq3TSGTkVp7sJD6Ua3NiL6uXtdR82q25NKhxAhYFsQ/Y\ngRJuRj+5PZdE+xU6OHI8S8RSEAApQiPkiTmjxSNOxPJpxehon6JVK1TOvDZM\nEnew4hZG81P9MJ+uI45+PDh5JNg7yN5PRl3VbUfyooM6Oo6hzgdj75z6FfzR\nEJh2\r\n=o6Kc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGt/kkpUkYMSCUqKOInyUH64rIl4XpUzlQPHZExByzDPAiAYaHZziRfFLyLwAn1nJuglSl8WxNKPQZ52hUTlIKkaKg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0_1639997119347_0.015612853721212572"},"_hasShrinkwrap":false},"1.74.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0","@sberdevices/plasma-icons":"1.61.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c5587e20152eebb4359214cc1ea2cb6bd2abca58","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-WD1aoKCBc5paL8UKXoI6LlG5Giv3q7LFFFI4WDJT/TuDGGkujjIx2ErZbuGpmSNKUeF+kK3IwIHxFLnSdLtvVg==","shasum":"c46fae605fb30d9b9183dada8c65ab501ee01a6e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0.tgz","fileCount":900,"unpackedSize":2285168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwHZfCRA9TVsSAnZWagAA5VYQAIwEpI6DvQ/Zy8YLW8au\n1UCVrQ5ts6ICCEKvUZvNMeuaC6G9BuQWeOy4C4B9jwzzz5KrqBuBYmg3nW8u\nKhNbMGuh83uLcVaagMhIOqoKQxKOhUgY8SBPPOebw7r960wcROHeOZFmmpiX\nc0fhd1GqWpQEqV4KYtDfbLZQNmT7zGKGnkZC07k38onQuv03VGXON3urVMsD\n2TzqSOqmf1+DTdtiF6+D9r+C5TBKQQiZa7+iZ5zAHYKSL71WZQFSykIHC8Ls\nOU7/wsDDXOEfPeIMciNXnGkuIg/8Qf5Pan2P1SCrg4vxAAj4bmOkXqMMcAQz\n7G95sTomvP2OAK4LonvCwoy7FtqmYSTha6sY/gjZSeef/m6LhH3fvO/H4qmL\nM43YFpaQU/7+kp2wtweH5Qt0+m6an/DDErQpfqgk1VPOZU5qh6qjH4DfaN1U\nQ7DzwcdTG068Ek4sX4ML8iMCc04bchkKkBeQgRPTLvH7+O7I1UF5WhZHrvgH\nL+vZIVN1zRk7cdjsn/4I8jQZAQwgfQwrC6BhJBAqdfKCCVab9Aj4r/BXCnD1\n/BGeiI5YNERV5wQF265fQ+HzciGeSUXdJxqL2H/pa67cAFSbHORWv/7HfJbK\nrxdTyEyvcvdEnXqum+oJtQpyCJ3HQ+mmT3czpFsXpCX7QKlfYIM5okenA0nb\nGrmv\r\n=B+Ed\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHFAvQL9vzgQXseOKweB58kbDo3E6TWkJkZ/vyIp3M6AiEAyXK8dEX1igPkInl38piMyLtPusaa5CWlYE432xz2YgU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0_1640003167013_0.46373999850639724"},"_hasShrinkwrap":false},"1.74.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0","@sberdevices/plasma-icons":"1.61.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8be4a2c8f997608172abb569dafcb6f1ba0e0fd0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-kx6j36+S148xvn1LgmsxVADdHvr1+ImOccHM+6HB8mAP8aIEjAotxqkuxhYCMe26tP467XOANFnd//jcqKrE9Q==","shasum":"8c345cf3f50ee512a6cb96ff90e295890bd71a76","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0.tgz","fileCount":900,"unpackedSize":2278558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwHp2CRA9TVsSAnZWagAAY7kP/igXFDovuXKzTsEobf0J\nRhljJ/tr1UJhfMXw3mF0z1uvddsWIpRPS/aLkCk+QxosG+psHzIDWuOUp4nK\nsgZ73ak1pBxe7TrHjdQ4vxYvuYGBQXjzRS9PKnOIvxIEU+ncI8LbQItzTqP1\nmL5Jva47ZRnSkrXT4gC1RVy1NXA+bsa3FdPs6rGoMC3VzV2jdUqKRblVsZwo\nqL/L53vBVitXHWaqCaxkWtBFmzOU6YOpVrD+Zf5xavKn1Waox3dKLyiwsVmD\nKTThwoCAuI0ZOK0rvmCShGqUNMNJwqpqC88kBWTaGrrhltGUzHPebyyk61/P\nGCpcDpbmmTlEHhUGCQ1aLfbQnZYTVljceAzevOatzEKtv3XuZZ+FvOXu19jW\n83Is/CTNkNACya5E2h9dTSrGqNesNPxcqXm7/YtEEOLWIY0VU5XlWaDnOFrD\n4e+qgv9oNfn+cBwWuXwRVQ9ixm+llrXfJhBFr+qyWBM1cPZ1V2djBCko7Zol\nabgRPDuwOYHTFC1zgk92LZf3cqXEu4CPhi/T4V3jX3XG64mhwo1RaEMcvS82\nv+aI4trhVzI1MOn1+u59J4lhS4wF406cDqgOQFup58UsfArdpdkoWMETxONh\nqryidjZ+2DegKGCxqyRatqxqWlqwhR6TiHiG1Bf5Pk3caTt2eKa/xNlsti90\nAbND\r\n=RxG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwz9CE5U+dJRSUcjyhDT5EmUQ2J6aiA6iAaw861o60+AiEA/lE9LfQK7Luh7MDOCWw0GfJPSneRVoPtxfy4+8MGvsQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0_1640004214069_0.1591655584914069"},"_hasShrinkwrap":false},"1.74.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0","@sberdevices/plasma-icons":"1.61.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"30eb3231ed64ba6774e0389ee63a66576814610d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-NqvSLumPFUyAnkc+LNUiUwWXIVAYNq1c8b0uG9MFSBdmUPKAaB8Eixk0gQg9Vnp6jdzCSmb2l/DZAZM+CFhZkw==","shasum":"a88857a31cfea996f3ff915de0444a3cff5d3c84","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0.tgz","fileCount":900,"unpackedSize":2285168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwIKGCRA9TVsSAnZWagAApXsP/jV3jcJr+y2LdhXx4cG6\nRh7igUnwgHjFILh3f7HeXLCjCpRYSGYWZ0kpVcTb5IlwBiYZ6qIgyTYCENLZ\nzFRrZGPAB70dXlHCj81h0m7Ko3IURcy0hZUt+nkQux0x6wB9q1/e3YSaZBch\nOxJq6RknM6HGpjx/AbMspI5MHXuX3BPO1sL3oZfzmIVwN7j/GynMmxTwTejF\nTZ1E7gFhccWb6zF4hAjdqsZFBXjhsR0aPGgAaJ1RtXRqpPXtEetgBNXrRPsV\n2l9a8mdUGkMyhfN/cBIP+ptiHp/iPKoFPXBnAP6Co/GpZHX2vloA3L2aDuxM\nBn+Tx8ajffaZ3TvqrbILyHiuxthkUUrRoM2720VYu+SzCnMem2l9pQfsObU8\nfHp4suvaFeoQWrvzhb/wgA2CJkBxTS7A6UsZw/MGrw9/fQMoKhq+VOHGVmhh\nDgDL7Dr4isDrc5tSznmC6+7mvan41a/fwW5tVSAtW6+58waF8CTrOqEwMeBJ\nGz+SvAB8gB9h5jvb40b91fORz+c/a3VVNVZ5+JsQjY9F0W4i/GTOJWedBxwq\nCyFLPd+zjYLWDZqt/aav4hcSSTb8oqbr/XOxdU9mtkUq0pvn8NOwN7q10wIs\nC0P3NkxpiWGzW3Fh25l9owoRa9oNAAg0YMPhUcPDQYKQO7m/kkVhmZnzsyGE\n49kU\r\n=cfQv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjtiYBT2jHnYmhFasqFYpoxK+dUhjFLdDJjEWWUeWDfAIhAL5FTOA7FP0eARpKsGu8/vPwzbIgeDMhv3R1VAcdTDAK"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0_1640006277774_0.928733842154611"},"_hasShrinkwrap":false},"1.74.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0","@sberdevices/plasma-icons":"1.61.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"92e490035c69b04f2f558e7dfbfcb5a6da474d3c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-IAHVN5O2ClRQ7Qv8+4a89wKdlWhLmGJR/VnDhdcoFVmluCqbT1QaTQ9KuMnBmzZNUW6j6LqQCuFBCs2zmYHuIg==","shasum":"3b5fc3efb223bf8f3228d7dd64801a9b2bb52517","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0.tgz","fileCount":900,"unpackedSize":2286876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwJDSCRA9TVsSAnZWagAAZpEP/jStOlpOQXIAS+YSlUea\nvwAvQZgtUNGqts0Da9WFQn4pnTKOm/tWiNQlH6mrT4PXO/sy/5KEBjxTAtv/\nBK5H9fnQSB2PRwsC4M7uSCfSR7Qx3gizfvCYOZ5m43afM0jiFVhb2NrJ1tSe\n1hJKTtG4hMdg0zZy54+KQPegdkyh5Hnuwo/CEnOQJm19IOccPcLV3UyQehaW\nAX3WDDC27Bn/iHseJH/CkDC9+QYHXQl5V1VPbS8JSMckPC1ehIloLi2cmmoz\nx3qq4pUP798vtF00BEMPuygRjlYox8BRNbf2K17GoPdg3KKSpiC3tkiyb5FE\nCaY+u6Oa0LTqjH8OgMSm062X6n+VYQf3eyw8NS5QHMwWpYLV9iMfB+7kv5q4\nnZMDBlsksl1O9x18h1bnU2bC1sp044u3f3awff4BXroek6otgfiS8Uf2qb4+\n6/8cy3Ri7yVoqlOqM6VYLxwzcdO2CSZAEna0u2v7ewCGzckoOmrkbsuV34a2\n2wElwBH6nPJ8D87wPzUTan4q47V37DWzR0+XqzCtUPlKeDX1vx6HmKhmLxIf\nT7+H2d0GErATIlcg+69CCwv+bmowrG9Fzgub+PAwzzQbhmFGBqsZiq9UwRgK\ngrJzgi0kp4bmYY+UVhyXV+ekNMe71XZbCfMmraoihoEHwNOeAC53mMJ6Cao9\nseZi\r\n=500O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqzFfIVmFD4nBMscOtztTGV6BqI2nlxMm4r/9OttKN8AiAcBKUUwLzEuFS/gKhR8DUNdINZySA+TsTfJoVHf/WXpw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0_1640009938675_0.553396683539173"},"_hasShrinkwrap":false},"1.74.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0","@sberdevices/plasma-icons":"1.61.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1d42e762e32a1af7e7634325966ddd6d4fb29eda","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-K850di3JS4ttmXCRlupSsPj6KFa2e7k90VIaTK4VFMu0i3p1ghwQlLJFUZ75uEhBgTTHEXtIfEIs4RblDNH0GQ==","shasum":"be3f67912bcc9a69181fac4b9afe89a7517267cf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0.tgz","fileCount":900,"unpackedSize":2284415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwXpMCRA9TVsSAnZWagAAi/AP/3rcLAiZXUZHOLnopbYG\ne6LJhSuQhlMsJS+9XeGxTc6GvG/h6Prc2dK0uw8BKJen/SYjC/QAyUIqNNyw\nZUAXserWDXi3JIVaxR2yHw1cG0p1tMrlhkB4MmXVwc4btd45NkmnsU18YZee\nEP1wVH6FqPEkbmvRjttN8lb7Sc5T0HVjYDevkzL6sjKFWxVZPMk1Jiio12Xc\nVDCh5hpLn0GkKobya5bHhCFAYWCtbRVjyrNmlUgUa8fONhdbhOxsj0dMIumC\n0A7DTrj6Gz/yLXvthdMH5LOzmOwz04GbFIfjJpmmH4d2dALV25g6MYVzVFQU\n8OkvRrgQ6UdChOiGWG4+mSY9GFqXqJllB/FKbSn2/LBguBpMa8A5MxoY7HWw\nKUS+k6WhAT1KQbaIWNHg+1G62q7zMsFBy3glIWyTdaCIub8yYEnUrhLZ2dS5\n22W0qYvVWUw5QAkyzMFMr66TcW2OAHm8xMYGp0mGebChUpcnq/Pn4Ytb6AOk\n7DWuubc2dilL5BUK77Hi/Pm3+vwBDz2dQh1/CW+YIh0Qnf+ITdMynAdqVpBz\naFZwqosYulGQCwPXNmpvQFR1BLK3Y9l7w2gGG7AO0x9b1TYEo5EgESDGBide\neIMWwMLV+nw4ASEvPVfntXqmxsa9doSlWwvr4w8haunHnxzuRpKKPcuBKEMN\nDhBp\r\n=AbmG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc7nOu4PwA+1HqxsDrF6szUhf3V1iIG8g8O7QDZ/U6JAIhAPksBCdWF02BvmCXVv3AhjqCJ754S8K3tKMiNZUaEE24"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0_1640069708010_0.3021689664971785"},"_hasShrinkwrap":false},"1.74.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0","@sberdevices/plasma-icons":"1.61.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"03647bd47fb2655364879ce52903e856fbbff55d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-2vGTklq6A6VPosTRcADnX8MarFw9FrULOcSSKQPbgkshJ4/St7Jh2TOCoq2yUSbK56Eyg1RrBeiOXgxsjk/NuQ==","shasum":"7bcdd28c8be001656051bec99dcf442523c5d4c6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0.tgz","fileCount":900,"unpackedSize":2280910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwZ7fCRA9TVsSAnZWagAAmIAP/1PheJeXUWHTAgX6cMP7\nr82kG8/USudfeTLdZ6Pz5WQCdKYYg5d5YAV2fNthaV72N3cTbN1hN/t6n5Xc\n3yYcUO0nV8HICqX1y86LHWB7Cm/MELGggnxq1v+Y+7a68rSMGQ4CspHhs6Nx\n+ScoTEuJBF9462oyppF5RZQXQ7hUR7W4hSa5nsX5C4K9HUl/1dBnqXyHzZXw\n6tRCCzQ8iVbeDsENvMJKnCXUnaOCQuJrXThpd9R3eNO6bSSwV2SU9di810cT\nVoAX3LEfWtFKyVMPflLYZ2uIES9RarRjQUcHYuBrLDcME6AXRmybb/P8bnFc\nYFrFe1csFTxQD+JPcXBzO6R4YdkF7x9N3xYUV0OsjFIWMZUm+4nSzc6cRFVK\nBPyzfdCMKn1kpoZ3Nl6VYU5Cp/SR0dU3U2j13NltAUNaXBtkyR6jwMC+U5tv\nvN4AmL5qSKXtfZ8YH06RrMez0whVyv/SFrSMFXwYQG+XkO7dxDrbblregfQc\nngKBy+WiOtV33zOKhxhThGn12JYVB71VSx3g91cLVKUgK3ggVCMJ4y6Clmb9\n1lUlT1YPDmMnAf6G8NgCLnabIgjwHMICUVpyfMqVsn6Y69qr7ZtFmd1vyJVv\nHTex6EjjdMDL3VgfD8X4YjYecS3BMU/jV4M8d1w4oDc/CehTIfTJfOb0eUZc\nIkoa\r\n=JNBJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGt8wE8jw9MglutzBJC+GXlGDle/NImVEElYt9CeRu0cAiEAm+Aoqvr7sXSK44+ZMLQYp1LFXlbLvAA+MT2+4in2feM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0_1640079071211_0.08447368089030971"},"_hasShrinkwrap":false},"1.74.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0","@sberdevices/plasma-icons":"1.61.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7a3bef9debdb08dc38c70f9982e95eca8da292e4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-/b6D+0FlAiRx4xTXnBNPx8AAA173s77tjJCg5D2QcU4Q52E9RZLO/n23KKH91o12RR0YkTFL/17hWhuYniPdsA==","shasum":"13ef64ad16011d9b75841701eeb4f50a59d2b3b6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0.tgz","fileCount":900,"unpackedSize":2278553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwePFCRA9TVsSAnZWagAAqsMP/03SjYopreKSXtKl3LlB\nnXqsjq9rHVWcMKMBoT3TDhN3cLoAVU5g6KlQ9sHsK+N91hsW2ywKR0seX7X4\nRB1EBojjnzw8Xdzw/DQ3TMYPkWR3MoTxndgB6xNTLSuqKLv9pRWI6M/bFgLt\nuSlt947d/XS2tCb8OTeunnpA1utwqUFkY8inF0hOzkfP437JIWEeTiOAhD/k\nqheypW9GKQpdQjo9k237u+02nP4tcu7m9IN35CzA+n7XCX2f4d8CezFROmPe\nYX3tFO1nkS8thdVfu/BanWAOoWJeP7JnaMLvfVSajE1tQoU/QF8zoKWJMkcR\npnjriatXlqJoIfaJMPr7jWOuBXc+fmUrXdGdD+tQoYWr5BOl9v24ilu6gLw/\niEo73rnv3KXxcdPRObPTy1oPUcfxCjW3s9NV8J8rpCowOqUNTVbyF2vCTJy+\ncl8GbhY7rvOR5yNpuazPdGjM+zKwdxwx129eDqR8pP9BuPL+0CifdEHqmptW\niAZZUiZ/J6AF9v5VKYO2DIJ2GIKIyuCgF3FkjVCzLZHAkqD5t7IABWRiCITQ\nd7UXwaLZpojQn4zUvOGKibbMj/y1U9djNy51jNXbHnHIjQ7JmEIAeSy75A20\nWkFpMv93yLFo1aBXIu3RHvGQU53dmGciWEfyeNzG2wJQjLJG5rIct2HkVgCh\nFdDc\r\n=xy/p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1SddCWPdKHvqRD2uhCdCnjp4K89m7GM29W4zui/F26gIgY8jkSSBMC/7nHGqlzKZTwl05MQbx6ZFIMtvj6XPbstI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0_1640096709435_0.5928448822909764"},"_hasShrinkwrap":false},"1.74.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0","@sberdevices/plasma-icons":"1.61.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"aa7dc818afbb51e9294a4d6c87b98d615d67db89","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0","_nodeVersion":"12.22.7","_npmVersion":"lerna/3.22.1/node@v12.22.7+x64 (linux)","dist":{"integrity":"sha512-bUHM6peuEcYHv8ezW6DBgJkXU91lXjZn2gnmPipa98UXAQzBXr9f1d+KNrTIvKocWgVUEKY/DHd0kvw4XlJBwg==","shasum":"6ae2aaffbd91b2a8a0a7205df9a03db58b87c8a1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0.tgz","fileCount":900,"unpackedSize":2278558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwjw+CRA9TVsSAnZWagAAfh4QAJblGPVzSxcsk/cJLUAi\nnCD2Ry1Rp/EpDrALlhz89Hgwa5Sr5c9B4k0JjGMz9RTwNpIVmWwpeNy6Sv9V\nwPDpnQxNT9y6oQ9oABT5dwWEu1c12StZScMtnTjCVHJ21U7OoBf3y9tyZNv2\nFLKJziqnT7XUKVGLuM2mxPHoqoqUNPpvvU1UCJU2hgTeZ6fNmcise36dozJD\nIEJ0SNvRByAYY3qjS/6Qo9D+y9tL8AYJDWe5UcuZVsKtUg94okY47PNXIpdX\n+ic8wsGzNBd9gKZGfXjl8c+c6lCwi+XuP1Q+L0KAJecMR+ZCHozfe4fTu1aO\n0n4IVE60j+XLt1Hgf8TL6giTRdqTPeI+pmunizZmnqjv1ThBbrZ2zui9xece\nj85lJS84/mMv774pZ53lsqvAPbwv34OFED8zG/oSIF1GWE42+NZutliP6Qjs\nDlepY3C64itnAAEWxe2HJ1t/UgqR/kTBzXe6o0cHnSP+yKo+cNqEk3YbPYyG\nCyiqgT/c1fo4yaKuulSUruAM39DHISUprZMv6md1a0gimsLG+bmVJhGw6dsU\nbftB2vxljxRiGQNNkrTk6Ta0HfTjz+n0ZfI1AZAp38zoVRQbMTBegvn1OtVZ\n9ei0+yESBsWaZqnAuJSEHS+3MnStzPFI8+cVHVv6GSAYldUeCnFuJ8NV35Q1\ntBEW\r\n=juWm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBGpYyFZEo7LMalGb0ANEvklimDs0MpBXtE6Mbo/98rAiBc0n2C3JMpSlZIE0LqPMNEl8Y8MxBzTbVX7FmeFtKxLw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0_1640119358057_0.1888067428961564"},"_hasShrinkwrap":false},"1.74.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0","@sberdevices/plasma-icons":"1.61.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3e7930499d27d63abd0657820c64c28e87f56a43","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-E6+NqNk7dIAjnUyXAgVEEG+/WbCvPfkf+x6RIOHkzakrbadWQJl0pmAlBVLzTtw2UbVprnvkWrl3q4tps6GRjA==","shasum":"65b32142950051597542820b5d28c5ff64f864a1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0.tgz","fileCount":900,"unpackedSize":2278553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwuYfCRA9TVsSAnZWagAAaR0P/islxXLq+poZkitQR1FB\nSfikLHjsWuCH7Y8K0X4sGsck5bT4uN8zbMW5Apw6E+6tOqi647eXmmcq17H/\nWgqenl7c4vkXuWhRCNYBQP7S+rv6hKmTyiCue1pgoeR5EQ6F1B1fP3ZMHwj+\n0ZH5dvWRs+HgWKiiVqnQJ0/JB/sChl4CL178FmGFeO2HjdTugZW+xR1Mg8gi\n7H6jVBv0wPqp7UQRkZ6V+E7VZTst74aOk9jMo+lpkLP1uUkRgq8zPqkUIYl+\nl6xxXddmobo61RFgwrOkszTd239F2hp2iM2NG8SYBdOn/QtdjCCL3r8lLpfJ\njOnzIJk+VJ1PGN4fT85sNxNNZRM20RqU86Nz5tnb78LI9sNC0xvFyd7nG7ih\n18OI/rj/0s48eqnvogzocNkPuxjHY5BLGC6JkoEDsp5pTJkXPn8SqSFBWGOD\nRrs6DdcpX/Uzr0TuP/ceZaAWZKl02H+NXpvmH8Vn/WJCwcAykkIKdI26aM+I\nxIjs+3G9An2STc4wym7LE3zonpe0p/a20QrrKKOKhzaTiNb+bUUyqaGIhAul\nd8LpL0euPtx1us+Iwbj26W54CSxltuFWG8oS6UFl+ozQVRigEsJECjKwNJhm\nTowJ66yITr50i6YHS3EGfDs91Cw0KaO3NEeeoezP46XOkYpAhAcqn/WEdF/r\nvwpO\r\n=pm+v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICHXhm5BzLv8OEG+pLspN/jLTHhO+zQOu39Wmsq1lBluAiBYlEln13/JgzY+HIvMeseHkH3DX+5BdUFCOSoW4nNzQQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0_1640162847154_0.3706759483021027"},"_hasShrinkwrap":false},"1.74.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0","@sberdevices/plasma-icons":"1.61.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3c33e104d648b23a5eae50fad376c829c6d0fc79","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-xV3ESqtei1ucu+7l7/B+FDBxf847r/aXQt7BJd1eFkxelSnvAjS7Kz3DQqUNO7mFxvA/1B0IqtfXa9TPDn7bsA==","shasum":"9e9a2e0f57f67c703036521dec2acbc67207ea6f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0.tgz","fileCount":900,"unpackedSize":2278553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwu8DCRA9TVsSAnZWagAARAYP/i0QlJCO7x62zKNl0qKo\n+8QBoZHi+PC0AnFKr9jWlxDK/EuvNLASwkzqXf1Op7Tc53G0QQrn8EaBdaE4\nFWALQ4kJYDA5vTR9N1C1Jo+FtTPo+ohoZGdR+S0o0KIggYZlYDE+Px4Qs6cz\nElvVk/fn/mGYaPcbHb+l0aJtJ5mIhcxe0hgUlZvsnM8Mcpwi/gZB8cAjnhnY\nfFH0/eECeALF6P4abzjLViJeooZCQPrXD8ZxU7ll3/FncDmjf44/+Px4HxIC\nuAeAoEZYRIg8LYVP1WO8wXmT5mxbdkxgHhRDSMK264RFnKe8NvSHv46o59wi\nU4Xd84GcnKBOMyOkF4n9ggRPb1h1+layobbvKjinw91IlOnDmMXep31Vsh6d\nWP6yfyc+y0BfT9OaJTMCb+2/4O2q8Hglyto3Cqm1oNLFI7pKvbuLVSAZF0Ij\n4wbr9l7cewgGrbIIS5UrfTr+Xf4QSruqIMYQko0F41sDdUcK8e1TOEowftRr\nbjd/KvDpNZFFVtxH8k6/hn8zAqm+PD3vRjsLb5cWXrSi2HByCPVNoE6Kqx0M\nFLLrhXTMh+/SgINymD7O1vDJMqt/Q4m0EWEYvcosFUja7H2LnOB+FD1EQl1H\nieFr+wMbochUwMfSyQWCFyVgxiT0Zy0qkkt/LvW9/erA/TNZaPSFCMiCDqqG\nn0vj\r\n=y/uc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBc6l1aSrKXNCQ7iTsu3NXbIAqtcMx21aFhclJklr6xpAiEAmofap/syQsNGZFBN0JcnM5zDL5J7CQ+B4Da9jJy9/bM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0_1640165123692_0.4720417507950998"},"_hasShrinkwrap":false},"1.74.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0","@sberdevices/plasma-icons":"1.61.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-SG1tqEEgdIAVGBMbFGjKbfkmB2KnSAmbzPvLMVtdxGnMK54r1BpzNhJunk+q8OvtTnWrmkRS/50jRPXhtu+sYg==","shasum":"309bb06c5ad9fff10f55a2da541f3b2e09b150f2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0.tgz","fileCount":900,"unpackedSize":2278558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwwz0CRA9TVsSAnZWagAAfqYP/1dRWnq0smVpmIV6UQ/Q\n03O1Ygl9viYRDac39o+8mGNxTOPpnzQGtHphoBpMlxCVVeRlVpm3+Uxe41cW\nwMH5FL3Ueo4sRPQT9C0+Aeb1gQyFPogZkAyuxRhRx/l4L/FRoxANaCajxg+/\n3RoWIPKgb+3odTMOKGTug+V0V6mha2BWHrmRP0zteuWOyKBChEcgi64r1SHj\niEuSMMxaDkfPqQ7acSW70yGr0KGdBYPy1Yg+6+K5BA0sHBzsNcRZLyjFY3yO\nrg7ACoWho9cDCg1dObNNTuQ3aldBClDe4pawxBrdNafdv2cng4o3KIDzFUU4\nZLg7biGfhTB181LjhTSpzMm5YjP663lKj85qKxw+bKT28UBPzgqA5dNNpZcp\nQLDQvMMtC3d8gEkLnmgIJfcrPSmNGMbUrmRuSB/IwG/CUxk11TDG0BuGKphM\nUqOoPQ+1WMOX5ckjPkiwqhZIZ0OiaAIn7D9Wirn16JPUoOUglELTYNjlFJby\nQgjVx01dB9YFCRZHddW5F8COS8tuVnkuEaoRPqtW/XG8x80GGuHH1uYp6Off\nkRkv4VF5WHWqC8qCa5XZVg1dLzbw7AK/45n4nHxbIF82W5vXB8BkDZgUW++H\nq6BiT0iiN308K/Ddi2NUNdwbwKWU8VBf4KIzkiyhqIJfw5uVRhZ20S3RUEV6\nQpAg\r\n=OpB/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/ZM9iLD2Q0daYej2k2dcff1loNZBSZovcgYmuoeH/UAiBJGmmIq6ifjWso2bgDM+zKqr2A8Mh8XGSQZGvlKzJuRQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0_1640172788288_0.33088382461582233"},"_hasShrinkwrap":false},"1.75.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0","@sberdevices/plasma-icons":"1.62.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bed33c2a22315debb736d995ff0db729d8ad6480","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-0tbOxLpp9j1sHa99RKjnHXpqoFWjYBIk+UPUUB5yoaC3wxTlldDzTI5ytPrhXNHlWllv1mp5SE3ZkHJr9/lVOQ==","shasum":"857c4216797e789ef7f6a3779ca39b84469a38b3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0.tgz","fileCount":900,"unpackedSize":2278558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwy4UCRA9TVsSAnZWagAAUfEP/RBPtkW30C59HrQv9CMr\nA8ZdjtDXNwRFmSr3LZKn5DppkuDdokNm+cYEkqXtxU56gCBIlbi1uc0qdCyJ\nQuamAn8Uge2z7ygsjj3vvk36yqU49DDAsontOR4QQyeNt32BNgHBfbce65PO\nRKjoqqmXPi+AHxKOmuv2qsYNM0xKL6ClH3OaF0kPEN6zgKqnQCMA0tGSeFfh\neosy7a6q2F88lNyHw6EjmaGoHxeVPn4ooAGrzARnW7kSGbXsn5+NL/lPV2nS\nhBsoVMhK0t3uR3D4EiJtwjWd4x1FvxaMqC6/kOwsumbX9tVDeeriN/XxISV3\n+2cPebBr2Se8xmSEPec2MOTz4s98fGYB8eFExHlNb5KTnYrWJTODHPaOSSl3\nDIZ1xpVk81D+YPnNxzxgaxOUQSBZ8cNKBEEhXdDLLl3E07nMhMdGcRAD3j85\nSUeaGL8LuMq0SuDnIuIsrqBAeWiqllR3RE9hmSYbxXrpmVIvuJhdZStHZ6vt\nZWMfzoKbx7uGbvOoQC4IiYtYHTEGwZdCqPTFd2do4YHwLJ5ZX9+ODoUNgVWl\nWGTQBochcmjGMQLridGtGGH1jAc6c2WucS+tj5dADuFCor7dVFOPTcF7As1H\nBhW0ZC9hb5l79VTfe8cfdRs0RXnz1lVV/yrOt5aOigjzoqyF2eXFA6VBRzkc\ns/Tx\r\n=DlDt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9a8L5kQTc4OtBu7rUAanOfNrU/3+Eyq5aD2xw3AvHsAiAPy8Gw/QtfdnPky/R5gD3gvTTyBZ2IoF8nocEpaZN2YA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0_1640181268534_0.39974383503880073"},"_hasShrinkwrap":false},"1.74.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0","@sberdevices/plasma-icons":"1.61.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8718a9dd04afd401ecc663bd6529d839e1e2d538","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-/g2DI++UBtwK5By/onTUrr4ljhYokmncfnX1XCGNFXNfA+JP8hp+5cHmjkHZtO5I115MtypkAorarK/RIpIhAQ==","shasum":"3189e2a5c6473cb351345f12f26897bd26dff057","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0.tgz","fileCount":900,"unpackedSize":2278558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhw1kECRA9TVsSAnZWagAAYwMP/18EYRXcJstmR1jltlRG\nACveUumK008SNvIhbL28+aJkAHpIgN4aP3oBQ7D+ZeQpEVdj8o6rMURDRLMY\nJDtwcBnH6+tj+d1jTu6ZFVVv2xwFzmtxHnHD0XOYk29YOATvxJdiltWkWuoF\nNoSlhRXnQbDuI8NBAzFvZxXk3qyFd/O1BnEQyhdKIpTFktR0yvK1BJ8uA4Hn\nX/ZrKHdHCIoZ5Q1guZDWlwDSTHs15cdIDcsS8Lcv2BWev4DoS5vzFCQ7tmfQ\nUhJyPHvwFfap70dmTfuZidBfMIMFI6/vYvXzixx0rFPa7Ias2NeY0nGN3LZM\nqQaWvZpJhFT59ZS0b4/RZfIEYB8rNDYegZVGVfSXN8lyNWhzBE5pMAdjU77O\n7EqG+Q6s5e6S1FzvmnVW7ryl34Bd5KrejWb6hvI4wkMgfcBMbqlXKIvn7yU8\nUZG8cP10TKHet0o6tNI8CsV370aDgWasE1SbImCHWMQ6ykpxjp7KIi+3Pq28\nkVBfMO3Vp790YcolhWoRAZkoC1RnTkka2BjFD85BHeZck7i5VUU+PIovwwqC\nTlqpFwzf5XejIAbaYwQMq5y6Q0dEIaND9Ww0RJQ7K6+58KI2a9tuwDtio/Qy\n+Pm0E4jQY545HQWtB9JHpvZ/7rEBLKTID7Go2+48dPv7BqBPGPdsxRoih6ho\n6XPk\r\n=L7HL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzbmHaeiIVh4hGJau0rrHZQY+8qmDiHOZpr51Anh+iYAIgaLXZWRrthK3IAsoqgbx6bbm8204CPtd3eMG+vnXXGWM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0_1640192260559_0.2766360444520246"},"_hasShrinkwrap":false},"1.74.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0":{"name":"@sberdevices/plasma-ui","version":"1.74.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0","@sberdevices/plasma-icons":"1.61.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0","@sberdevices/plasma-sb-utils":"0.43.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9bb381706a0e7c53b674fb19c2f26048f003f700","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-sNBAkOVRsFDUi9+FP2lxokDJZ8bpxswEE6uSPtWvCTxQnRqv2SBBD2zrGtwXvO3PbCtnnmoL/A8zAr3G1FqMog==","shasum":"eb5c1a1b5444f8d7ed512c1a5124d54c4c6f3491","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0.tgz","fileCount":900,"unpackedSize":2286876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxCg1CRA9TVsSAnZWagAAB1QQAIogxSzBVTlGygFVb2yD\nTFQG03K1mcFtL4HggnhBmUXP2EnYtolD4jbEj5IIyy/qhmmxwRssoNXdRIjY\nyPnvOmcqsCzEzcr6AzfR4/imDwS8B/evrk12cXNU0VUCgEiG3gagmj09e6ma\nF5+OUL/JW+Xoy14Bk2HoDEAMzQcYHvsPHo1ESt1C0to08e5CPaX79PDyyduL\n7MyTyvNaR+167YlXUmFX32J9L1Y374Z/YrXbS/uqKj3Ia7hfqY/U//6A6H/o\n+4g7iwxZNJLplxR8Jh6WH0+yMsQBEZcImenNGAX3UToPQrduPzy3ixC40816\nn83qNi5KRJmS1SQqYHEhHulgzvcGQNVBvectQvUlx6mbQzXJ13DKwe4GgEkH\nZt9teFbjLVGrMuHlDYSP86aHv6MIHa8JmIUNty0ZBSLVOf0vlraodVFl3HiJ\nGVKplOYPYKcn1GBrmCnquXtGNeUlOffwqlCI/aEkEL2CQx5wagb8gDIAkSb+\nuRkID6WlHbYjKe4S1r4544+YDxrkB1CPthsEM3Zjo0UTJR+THx0EV3ciQM+d\nZ4Bl5A9eUZYMCJZUpJKLdImdTanIPEI+DDwV1Wz3XvbJNghC/NSSQCTJ7uLw\nyVYjaRXHcd2JH6N7Phlk3HdluJKRGMSBfe341f1XDQe52f9NPkX6zS7rcA9A\npfGw\r\n=6Qpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsBJKq3FqcNwrCxsvFuoEwMmHqH6OFJalTYrp9wdT3CAiBhYJjzU7kolxaYQQeJFrxI/s4dK/QGYTfEIKhmJRAuvg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0_1640245300987_0.8434350279251237"},"_hasShrinkwrap":false},"1.74.1":{"name":"@sberdevices/plasma-ui","version":"1.74.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.1","@sberdevices/plasma-sb-utils":"0.43.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cea16f08596dcd852f7e00782e27f088ac586a98","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.1","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-Tbi/1CZp8ODbLtr5MUZQR/UZIIamcF6NoLIjbX2A3uPU+h0nJpoSKXOLcQVZh9o4ELs2pcUx9SUFIxCsR2TLVg==","shasum":"63282266b1ef636e7a48072e14bf17d98186e47b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.1.tgz","fileCount":900,"unpackedSize":2286908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxD1DCRA9TVsSAnZWagAAl50P/jMIoXe+LsKoznWAzzAy\nX9HcB+hXDMK313JUF8Xr2jugtYXd9/gAz/Mmt0SffSXejAdDbG9sBlSN/pJb\nlVdmIMFCWh+xNGohi/FMc+jBvCCOwzvFC0JVFVEMuBRfwqPxKFtz8TjruTX0\nCpYoskiVHuud6eNtaNrzSgfrLP86RJ9cdTuG0bNHJROqhNpPfSsSTpbWNN0g\nI9IlOShy3Amm70gGaWaUPiVCKksxAEI3TFNA2cdcdYwiAPHd7TkJQHlFcCca\nv9tVmiWlkR53OimSiC0vdlIJVQbIFItASBtf2S2V4ExHF+80ssZZNHFbo3tH\nvC3cNxM7jcz643Eszor406JiXb8svWtnQj0ld8ZMjTRIyfHpsrKkmsLzM20B\nfqbc/uG77yulqWMog6khPgWoGdhWWFLr6O2Zmu97KZM2m7ym1hiWDfPfRxem\n1RiRV3xGiC+CxrRzikwoVrBvbPheDLKDWoYktb7ff+suFT4cYdo2IIEY83Km\n/TzLRukhSraOXqCrvKxPVm2jJ1Cj+tezouSG60TwExESB/dYTMLrtrZWVDR2\nsV9g3R9NGOdceUwZ4r40u7K0ZThb6wX7XrZ1gv1PUwoBqxcN7fg0g4kTWOGR\nFv/h30P/4r2Vuty4ZMd7YkKIpcbySOU0TUOU3NPOkB7CDlJZBcF7nn0Q7N3y\nXYVg\r\n=Rref\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNg+Wlx28y0/6USzYMUWHpkH8cgOJ1z8t1WIL2GVj/MQIhAJ6E7KOJtYRj9QLRhEXv4nwdWE/Lbpmg6XxorAZ2gkbC"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.1_1640250691605_0.948335685861867"},"_hasShrinkwrap":false},"1.75.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0","@sberdevices/plasma-icons":"1.62.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"35df320e587978e48537e8e7c6f1962126e375d3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-BK4tl2T0Ey41+ogEPNy42GfMINDbFtZffSNjOXQaMGkRN+JxyPJRemzXLZ10nNWvbevnGz0toSPz7rWKT+65FQ==","shasum":"2a726523bb8f3360abd1c4380ddebc3c63f7c958","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0.tgz","fileCount":904,"unpackedSize":2330116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxD8nCRA9TVsSAnZWagAA3uYP/RF9s2W6R4lSltxKYBTh\nr17JhaAsEWcbGocaDEqG16zHDi3kSu0VGdJtVL0AwAQF4bMiU6rCi+ywUp2F\n4fvphthyn5KLvnnN1nayIAF2Tcr18A+YbLRCR+pzB3dyRmnTE57ZgJq46UFl\nnB3PhA8dI6CfZNgQtuJH90zqgnnxOQ37hZrqHEMpRYeaUxlGrHpT/RbyJCqa\n8SMN/oW7ngBWuxs8r4arjy+Z0ISPUHMpBmhYrhGobb8dZn6QJghS8XD7xPDV\n8rOHGdJfrA+2je0JrZJM/L7kvKr6KGPQne5wnYHB/BkQ6Xk+TpP2SebkjURb\n4OUa8ulfTyRPbKAs/MFmzAXBUc12uTSEduw92w46u4aOjrOZlniaeozCbdR1\nCj4UrMU05cXgg4WWVoC7qmyECzL59X0M9HVuu4bo4K2VKrEDru/b6xbf6+LX\niGdEBmgnwUvLIlIaXvKT/mC8n41a5y7DyL3VALydfGFknsHTiqHJnvft8ir6\n7Gw9TQafLnbhlErRSOnuImlK2MCjIySS6riWJ4QtZ36umzI/Xsf8TpyJRsh7\nCReAJ/VltoPBOXsGvWT8GUJxP/qL0Wo3YfSmhnOz07he7LpkXVz8Wp0Fhazz\n7atRBSGjcGjr5i+UwwjMN5edyxcNXJ1MZmu0YES8C/iN4CiYHDSOaBRToQsn\nnfA3\r\n=sxQQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCCdx3xKs7q+ilPYYjUFEnLfrqOAYKrewb6BwkMJuYDQIgD9wjtuUlvfN4qnnGsFnu/+yHfrLNJpTQ28QiWYIf1tw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0_1640251175529_0.9190264342185286"},"_hasShrinkwrap":false},"1.74.2-canary.1014.01682e7faba5d61cc13d9a52cd493b1cefb7951d.0":{"name":"@sberdevices/plasma-ui","version":"1.74.2-canary.1014.01682e7faba5d61cc13d9a52cd493b1cefb7951d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.1","@sberdevices/plasma-sb-utils":"0.43.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"01682e7faba5d61cc13d9a52cd493b1cefb7951d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.2-canary.1014.01682e7faba5d61cc13d9a52cd493b1cefb7951d.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-1y/1kr2BTo4ydEojq9pXJmsXCqjN13PGRQClm3oIGoDQxs9bksCgt9Kw32b03nmBLbQZ8mdy3JZEWXL9GX5g8A==","shasum":"2915f5d2d9b009234d4decc9d810b19fd0b7b63c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.2-canary.1014.01682e7faba5d61cc13d9a52cd493b1cefb7951d.0.tgz","fileCount":900,"unpackedSize":2291693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxHXuCRA9TVsSAnZWagAALk8P/A+xHN8krT9y+/MFEXis\nQhqEe4LsvTZSeQ6m7hh11A6wEMRjDsaDY5bnbWTk/WzzZ5LaKAWix/UPLpPZ\nykmzgp99cQCF+iRlqxMEGMp7/O6ADwvkC7ylayLkrovPSq/PUVzFzebgtfgB\nqDrnBJ34HaW8b4Va4tyGnSll8vT8q1M3dCT/gp8KmRyKMsyc47I2IWib4XW4\np4OIEogaO27TR/V205yCtYTcl8/67gY0zUuntmBuyBTpXPCgAvWjmbDHyykv\nU+MNwWGvEwlyD6ddl/NfKOKsOHnt2k1kCXKrWOte6jNhQXVrINMdKZgV7zns\nnQNRY+1JmO3tGBEhIl0hS+HcPU1pors9TjcZHp2z9n4l/MSKDI9qWBCnmpEJ\nI2oJvJU84DpX5Y7uQA1ACo6mJI5JvCMX1ZAbDtJ9X5dR87cjbed+cfVIiAh5\nRRaIUPn3nS7cLVIqajN+W6nmAtpp5Ifj8J8QZPjDoNyqKMtaVziggxE5UHaH\nMjWtA+X3/DNGotsGMP07JxkeJEcJGK3rWh4GFxpg7afT2hu4JieMgEtlgR7a\nIUIHVtBUJxvWXU28fT5CmVynPyWS/JDt3mo0OdmkODaZHhdjKsV+VwYQnfD3\nXVZO9QMqb5zdxJ/ILVzuJ2/nkto1sKLekIfgt61IQOutZ/qhprZ++gSvjdvZ\nlppq\r\n=upt+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXZSz8rV+wr5ZjIHhLcjc5wQ2HvaD0Tx/r6+WD18azJAiB0DZq1kx+TFnJSqxtLeymTWZ1KvS60wNt+TViDSFwr3A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.2-canary.1014.01682e7faba5d61cc13d9a52cd493b1cefb7951d.0_1640265198671_0.09478848251420513"},"_hasShrinkwrap":false},"1.75.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"60c29185a560da543702eaaf99185d7b7471231d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-FqeQ0Pvvat50X6bKk7co5iE4qmo8Aw3l7Jt6SC0pV18r28KMZY6hzTvBzC6BBozwpXqB5bbSWPBubSsWz0qmjw==","shasum":"9e1590c4f3539cbd5b3dfc163da59cea337e0150","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0.tgz","fileCount":900,"unpackedSize":2293196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxVkeCRA9TVsSAnZWagAAHR8P/1/aTi1xRr8Qgp0CfTEW\nsPad7GOYbxdzG6+u/8y9GxzlCIN2UxhjuCbb5heUVKl1lrsG5H8QA4D6FbN7\nrf7TFcVGXDR+QnLBuk+A+imnlEr1sk+d+NZflf1tNjRKcsYyG9hN171vd4FC\nSdpdSnsz1GwhEVcVbbTGu1C2idp7OZIwVpmokjR9qKgoTSH8bNpEnXWzzdPF\n3IMIqCNx0ayoSRVIDQ9/AZtt2+JOCfSkChGu/4Rx4E5H11QtuX1jeUMuQivW\n4XMWts/UjOejykM6kSW0ZxYe8T9B5dqDHlDBgPJXBXXLvN/QHh621Yf7ZaUA\nqrWuc8VSDyUvUc8lpb/qsC5wPED5kFXnrzvGlOVmL+NxPscUb+mJ1obudOEj\n6HhJtmvymSygCL+WmonyINHKdE6XWq/oi/SI+RypbnDRjRnR5olPMUXhQoZ8\nOCYwUf9hSAcvjhlL4k/dq2v13l19pDeYRRJTXBMLiUOYjLS8svcitpc1bgIa\nnG79GxajVoasnPZ9+luGdCO9ycUxjv7tclNSkl9Kbwk4d9KKONYJLxp+i631\n5EmbI8vfsbJS+kOlMDVwkDcEgt90H8XU0AG+6Enql0X9Nol6oISBP2SJIZME\nIEZ+loz5UMG5j4g7pMwESuLtS9ofX2CiZMrWWt12XpIQwgzm29EoDLbGz3m8\nYZzp\r\n=0bVH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFEBzFfZBWjsupjTYVOoIpB9ROCN57eDRNHU41wTA5/QIhAM4P8iPpEMje0KoWX3qFAKZnYKoWcuxbLghcaX/pRrAN"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0_1640323358345_0.07745058286348927"},"_hasShrinkwrap":false},"1.74.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0":{"name":"@sberdevices/plasma-ui","version":"1.74.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0","@sberdevices/plasma-sb-utils":"0.43.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"968cf5161e6bf80013c9af9615f4546c6d1b367a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-bGITEcrkQaXwAZO0CeF4SLg7/zyspatnfb/7XCsfcqybM5u5Q1u99UsGOjaXDefixVgvcWfaCIUFz6n+tqFykQ==","shasum":"cc8b4c49ee31a6a1d91e0bf2f762f964e7d5d5c8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0.tgz","fileCount":900,"unpackedSize":2292986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxVw7CRA9TVsSAnZWagAAHi0P/i+ME65gOJ3OIG/lRCgh\nYMUvRHgNgrgXbdDjvLy5ZP38ZM9E9kb8R0RJ+xcMZLd/wqb6oabweB29+/J+\nrYoP7WcGi3iKywWpgmZPFNU/uZoQ51lmF0EUnNzoazg8+skva96C+hSECokM\nrtGTnjB1pBoc8s0PataRJU+NESuqmzWZVpzx9E67phaG63m41bM4XUHKzUos\nZ1W1nyGfMaXMdMoSAlXO7G4MOa47NsOJwWaVBbXRsxIVgJ4IFqhHMjkUFK5d\n1SGP7zNXfdZzo3tsUeDaUrwlAIWm4ieuhdnbCQRW2aykLqtvzgHpn60cJFNO\n0k3qo4OrrSE9hB/CH3x24KlY4s6KT/x4UjJg1ug5KjXrTp/Ams1Vp1hGBJaT\nE6Goa/VhfsycKtaXXkj4BF7kvs85FanEtzlmqcqBlyIYHs7cipVijtRbWQ5X\nhNodAHfGMWNpHg8hthHGNT4V8iB0Ffd4D2B1AIhmB1BqJY47jMlSrodvUHHP\nWMyK9IY3/lvvD1Y0stOFPV62w3+/ldyaAkIbYzwqLHb0xxnJ/Q9BDnEavJYN\nCqCVle5YRAoWMxENIWwlpFhx67qh3QdQYlU9nellQ+vyfJ/+At5l2OZ6eqv6\n4+yHByPdNxA9wFyMnhv4vnr1sFl/830zEtB44XKwie+qZj35w5SdhxOHBkwG\ngNw3\r\n=IbvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlPBpmrezT+K2oH4+zxuQHk40a57fmoO43FTHFLLqjbQIgFWdFbvmswj+NDxx5lvL/AEqqkNKtapL0vA59KNf1AE4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0_1640324154761_0.4822430985363111"},"_hasShrinkwrap":false},"1.74.2-canary.1007.c077cfb8247f7ddb1255fbd2e1f2c29e193e9053.0":{"name":"@sberdevices/plasma-ui","version":"1.74.2-canary.1007.c077cfb8247f7ddb1255fbd2e1f2c29e193e9053.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.1","@sberdevices/plasma-sb-utils":"0.43.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c077cfb8247f7ddb1255fbd2e1f2c29e193e9053","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.2-canary.1007.c077cfb8247f7ddb1255fbd2e1f2c29e193e9053.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-YlxPdBeCCcPXtQlG0toXGwpngIlPslMvpQXBo68P/BKCl0jKYAuVS3G0uo+1Q9R+CI8jy6YYEfFsYCyuLvcEvA==","shasum":"ee817561bb7076ecf575d55499a4057f70ad2754","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.2-canary.1007.c077cfb8247f7ddb1255fbd2e1f2c29e193e9053.0.tgz","fileCount":900,"unpackedSize":2289315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxV0ECRA9TVsSAnZWagAAAx0P/1O0DmmUTMG2ey7o22Vm\nw+5qEdzBOT/LQscN5SfMFknJJIK8hdoJuonBDblTYMsAkNRRH1/pP4Onz34f\n6xfAWvITdkmlbbBe6d0heqBZQ/7LxLD6wybIlv9X8tYMSywDsfvXN7QNwQkP\nxCQWmbEI46tId6wpnzi6TrVGOa8NBuYzZ5oy/t1zcgZpADVBb8ymBAVnDd6j\n/y4U1aGGcJII8nwtayZD6eT1kBa7ihKw2bkXjV9btdaxzymFzkB1OHCduzoc\nzDDevg4cFeXRHkjyCrPOzyRvb95P6SD3cqXHTKXi8TFwvQiArpXWEyEekwuC\n3B01kjWvQ3qdSRWN0xj7gumR7n+GcoCouK/Ni41D5Nw/d7+4YUAY9OL+z/Nw\nPRiiHDFA13+7YhUVwpgY0cBP9QbG5o4cN0UDa0+HyVBocqs4AJLI1s2g6Kh0\nrPxRCAXHw2FEOijLka8dpSmfgW1Jhn1NeOdADIvj+04S8YdgHTGGqgPJBx2K\nUui8w0KFJ05F/yCi95Y33BTULfrzNcV6OUBYCb6EsWZjzI5bCWZGq5Zg48RL\n5eEQbYVDp9bpQ/oEP8hMlbu5TfL9IK1PRkPRI6OSfu7D9aYu4asvtkeU+5iO\nZEh2qGwnH9L6SCBC4hsXy27pQp8gq62sgWeHgnqDBBHqJR8gGddspe/CoqyY\nCkQJ\r\n=q9OA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbZxiqJxSiIywu8nlPUwj4pHqNCmqQs7V85L2H7NeJpwIhAL5GPnDL6USPB9wUGN2u1hHSc72coqO+3nXgzqS2HgK0"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.2-canary.1007.c077cfb8247f7ddb1255fbd2e1f2c29e193e9053.0_1640324356179_0.586803782933258"},"_hasShrinkwrap":false},"1.74.2-canary.1016.a6d4a1044a84dd90932c26fe7a85b2f250a99743.0":{"name":"@sberdevices/plasma-ui","version":"1.74.2-canary.1016.a6d4a1044a84dd90932c26fe7a85b2f250a99743.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.1","@sberdevices/plasma-sb-utils":"0.43.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a6d4a1044a84dd90932c26fe7a85b2f250a99743","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.2-canary.1016.a6d4a1044a84dd90932c26fe7a85b2f250a99743.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-kprc1Qnd5lVWZ+IwFtID02xNEQPAPVFv60J6HcD1z+5PoT/zQnLFXkgJzj+ZERv+j6bIGr6pobvBGoUszbieug==","shasum":"3b4b81674a88a0d6e786f84effc46d218fa74c1e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.2-canary.1016.a6d4a1044a84dd90932c26fe7a85b2f250a99743.0.tgz","fileCount":900,"unpackedSize":2287501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbhCCRA9TVsSAnZWagAA+QIP/RGU23qJsZQu3jq++kk8\nqgwEfpyL12UflHaRkUclyG6D75ZXVMTHtjVzHeUYQsszN+118Jjb3X9tWmyu\ncCvb7i+lrLN7rX6/VTni/vnu/kG5QDo9n1vTCVqpaJGbkEgPhX7EyDYiIg59\niPEOJFpxN0QbybbENPNzEsHaFiKx0qY8TFX6v8iCdXdj6pWP2CkV4FMHJsrc\nQ6EJV1lyap4n+b+daedthzgTOPoCqG6wimSjC0NvEsOjweRlb+YAIhYhbudY\nKw5N2p92+z/V7tfmhLBvriZukmbc3nvFN1s1BUnzBL98xP3LvVORVIHkggPQ\nNob1I6bwfME0vt1DlZhQRJum8LanMd4V3y28S7iEaHUTfDOKEuT+L9C0W3W2\nCCxdO+z/BDBAXopCy4zacVfaug207/rj+FC2h/2ZEsJrqPkxd2TcebyyU+cy\nNv/kVy+5g48IUZa5kiW/g11eGxAe0uGl1RdOAhTxfqx2f71arYMeEpiuFVhZ\no/uJC1d/CIRrm7jAze5LR9TAwt/fbdrXSpqRXdxGiaZQliq7N70iEsW2dwDU\nmJGy5SN4PC8IwFNn8qE0NPMz11h3QG2q/G0/ZfieaWPi9L6ZhI4fD0KrdkkK\nx17zmno4QVRQIbXsxt1se8vxokyHTkA0eO0aIj0k2Taay48xnRTmXuET3TAY\nhEQ2\r\n=TEOe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfl/VMMlVasGPhdDYGi8LZhegCocS4+bo4MAMtbOvmfAiAlRAjlDnWcWSVC2DKNF6uZxTbz6Mny4sD8lVfwWrjW8A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.2-canary.1016.a6d4a1044a84dd90932c26fe7a85b2f250a99743.0_1640347714647_0.43960991254474013"},"_hasShrinkwrap":false},"1.74.2-canary.1016.4396a82d9ce5b476fc25bcfbfaccf3345c6c4d9d.0":{"name":"@sberdevices/plasma-ui","version":"1.74.2-canary.1016.4396a82d9ce5b476fc25bcfbfaccf3345c6c4d9d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.1","@sberdevices/plasma-sb-utils":"0.43.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4396a82d9ce5b476fc25bcfbfaccf3345c6c4d9d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.2-canary.1016.4396a82d9ce5b476fc25bcfbfaccf3345c6c4d9d.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-MDU6m+/khIaqAkZNBGEM4Yh6WfFRN17WoTGkDy+fAAy6BF7L+CB4VcBlw+euFNcFSlXxWislZrLAY55SgHbNEw==","shasum":"7ebaf1bef2e7c4066acd7a1e804f6a35e402cb9a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.2-canary.1016.4396a82d9ce5b476fc25bcfbfaccf3345c6c4d9d.0.tgz","fileCount":900,"unpackedSize":2287501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxdMXCRA9TVsSAnZWagAAk2oP+QBfDIsxk8sM+ZA1U/oi\n0UQ0evjb7z7GYeCh/H528y/9SZkE2IdQx2fqDAQ3A5aQyTKo9i6Poqg8euBV\n1pHo9zCaonTVdAYG9yMNlhLDrwdZJO0hORRgmeFm1Mi1GcuadXuLXHJX3Vc1\nLsYuggz5elzbCMUn7vHFs1tACSSU7bMQAefDbtW4nZvLcm3KpYZ22MYhJtU5\nEUXxv7g8V1AMGbSwnpKq6y30xmX7axsvySOmFc5XMUZzzPwYLfhwjcVLk/+F\nGUU8D/3V/1wNFe5oh3uTrCZKJAapEyl40vLgt4mwMM/EttahiwuXBC0RRG6x\n8fwaVoeXQSzgc7338hQjKR/VKBUfXoT9Mz+U6wcrZCmZRAqDRV2uEc79X9Wr\naiKpHXtBBiKnXKu26JUl99XZ90wbTEn9SBwjbYYhyjI9D5OsyagoYeI8XFLr\n9QaXNG0ycm9d/an2aL+IbBDdRYwU5pRK/7cjnkT6cB1QV7CpRM0Uek+SpHOZ\neA+y/haHEuUysEpH1c5j04oYMVtjdmKC/ImuVby1PC30F5/HW0tMYauY4L5y\n3BwNNz+N05ei1MZNgzbtVCBkiLRgSGpyszk1cLfXycCQFcrQPBrG2uSNwaBM\nB53KdpvAPvDqNL6XjKTKDq06L1gkyng8p6CmIWvWGWRiPqQNlBQ8wAAb9tr5\n4DjY\r\n=Vp+z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMJeeleXxL1ljEEDCJtYkXuBjc9Fw1sPExebyajQaKSAiEA9EDhI++l5FJd7GfyseHnkwwK7ySuRUKIkf6BEkLbxrU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.2-canary.1016.4396a82d9ce5b476fc25bcfbfaccf3345c6c4d9d.0_1640354583019_0.31054118803853026"},"_hasShrinkwrap":false},"1.74.2-canary.1007.1ebda925a22abbd21d18a32b7b309c045dc04bd1.0":{"name":"@sberdevices/plasma-ui","version":"1.74.2-canary.1007.1ebda925a22abbd21d18a32b7b309c045dc04bd1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.1","@sberdevices/plasma-sb-utils":"0.43.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1ebda925a22abbd21d18a32b7b309c045dc04bd1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.2-canary.1007.1ebda925a22abbd21d18a32b7b309c045dc04bd1.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-HcWaII/w8w1EDV6vl7gEu9+b+EXz55y9cLDP9P6F34ktnh7Wd8pTFAhMy+toPNR8qp52MXqiz3PnMN7xtyEOxg==","shasum":"f2fc834deb2b06683e3b689a14db841e10e933ca","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.2-canary.1007.1ebda925a22abbd21d18a32b7b309c045dc04bd1.0.tgz","fileCount":900,"unpackedSize":2289315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyVplCRA9TVsSAnZWagAABR4P/3NH331pY4Qz40j2PxME\nm7Mgv42cppNKtMY0n7fnsMGFtT9oxsBJf6AG16VC+uvjl1XCgmTc7kSlnkRU\nBoHcavYrF6djpXI+339r222xRRFpWOxOWEC8NNbjvCHahBeikBbyY26SnqIP\nEk6STrxgBm/85kBMWGohDObAyY0txCnbnwtF+tItYy3semYglN/JMw2qEUDt\nIqCYNC1e/I4A4dC7IHU+JV4p3OwlKGmbk1fC2UwqYBju+U6SmDg7Om5hDt4I\n70R29KmnfARa3SEj4iaAPZriWx5f9970dYY4IXF4sWrFAcpTpzy0KJPRKEA9\nkDG8iv2+f0JnYAoAKdPCl5yb6tCq2KhYqZ5YskQJz063pu/+4UcayC0plWrW\ndzJwkmFE0qdkrkbxL6Fem/uhSEh9796ciNoca3Oy7vQIo3c8sqJQlskxjXjh\nI9T2FhlNYh7Y8R3P7WQmLkZzF8ypud3X10W5l1hAz/M2IfG7DKhfvK074Ofh\nc96JhbcFRqwfPpLa1g7XA6am0WLgf75UdPUqQ3498I2FLpJARDU9iOlVqfxo\nTOCjDOwE89ZfSW97vQuDb2UpnkUFJGQie4sfVFbO1gnoju8jJL9X+wry2Vuo\nPp8dqctLi1TwweH0Eqq4Dhw74Qqn+JUy/4kYw+mmf7ePyjjU3hBEeOiNJGme\nKOkT\r\n=yFLT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0HLQX/J0ZTtOO59OdN/M33YDYcKO8utMrsweMHHSrqgIhAOO0UmLE0ceIVv0UkwA5+mjAPHGYp7rYNdi8Q3WBMJ0J"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.2-canary.1007.1ebda925a22abbd21d18a32b7b309c045dc04bd1.0_1640585829609_0.7321613926374984"},"_hasShrinkwrap":false},"1.75.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"20b220bdbf2a80a585f8659d87ee433afcf59d2b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-hLky+iQyrjGLohRPq6luSfHJkWSg88PFrKwKIe324HB0zu6VX1JMJYhWMKpwt7WpNJCZtDp3z2Xdgz6xjLELng==","shasum":"8f8c27b7ffd6259bda012289fc7e152957c002b9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0.tgz","fileCount":900,"unpackedSize":2295548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyWJdCRA9TVsSAnZWagAAYe4P+gMh0iBrncfVrnxCN1Wm\n3ejaRsfjRTU4vvW1YUPrkI1JCdluI9Ybp3b/WkiE1LSqQvdwXw6X3/2iJ+Gt\nMtJlfcErDDAHdJTxQzJohxogDp9QX6RbMfqbKg44BCyygRyiXZiBXtjQmMZ/\nGimJBmIbdgBZcXQzMQQov9Tu9tOtCqgMx3IQ4fNxI2/2cOecPuS7jAu/QGpj\n2pXTV6WG1hkjNf+p3yp3+EMR/2fUAwFSGrrABUnTfuasRzg9WLx0HvZNKDbm\nk97UK+BvPdQ76s3EzV0IBIuWsKpxj4hQyE2WQBwfEAImu/BNz4iRqEJL/Ms9\nnxm+8a9lBYO5r5wExhTFdNyOY6ARvPuYMxiHvs5L6LJBl/2TYLX+UUj2av0y\nW92t/V0yeKeKOpyqxcnC1/9TFYyFExKAg/GD3Ujjg2E7L1FPSJmF5yfEA9Up\nq43euDH/ZpLiS9am/tgNQqCPzqcqkEeBb0rNpWMDzSBy5gEgp5CJmsovHnqt\nTuqqyNMVHbdo3nKB9XvXOvXRSkEC1Slo702e3uJnVJwIOuyxM4UQaSNynnFm\nTDrJKXu9X4AFP7dlzQLCnDBsorkjQa1RQPFpcW3rcNpTOf3efwVtQC2F1e3T\naVkpRikzY1Zd1A4TD4WNgAZkqNRSS6TuH2S3xYZgSdERb1QJiLd1ZGuay5Kb\n5jwa\r\n=bFPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHu87zdx6Xf4sBzVLaNe2s2kjFfZyfU4dyF7eMICyHBpAiAhamOmu0DfTpkMmE8FMJKMNZv5zPOG+LasOOmo/GnDIA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0_1640587869136_0.9685856435674576"},"_hasShrinkwrap":false},"1.74.2":{"name":"@sberdevices/plasma-ui","version":"1.74.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.1","@sberdevices/plasma-sb-utils":"0.43.1","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"66f384fc80b08c91ce54fa2f819794b68db9a454","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.2","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-w1Nh3Ly2JBSmc4feo81QnV7NxAGX1NJ+1AZxeTzuQ7r6qwEEXNFj+TJkWOO8aPXMETEhtr5lYcMuHJud6gBOsQ==","shasum":"e5f5fc9710bf6f5adda70449691d5d7cc88928cd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.2.tgz","fileCount":900,"unpackedSize":2289563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyXDRCRA9TVsSAnZWagAAVccP/j23cpyreyUdafOdaW3U\nE69sUvX+16dUUBWVoIVNKl5lqUKRWQAKLRZqB0qZE/gIlXla3hSMOh5uGCPs\nI+uJ4t9M+lqfIMoikVANXpti7nG1oz6Is8NkXxb0S0l048Wg00pPpB8AdsgJ\nkIXeJ/JcL1iZuPfD/x6118qaYqqmCPpjF7QTkawzxS2Owqym4vyslGSts2+v\n6YYpksX5/jjBAH3xFUn0slb+0k7PKvoLxMwjrZzmLtYX/IwV6/WiJ8+vnHCp\ncbfFdQ4UDxTI/yktpTZ7gQIqPQ5YFAigzWbTLXqy3ZMThKGte/tBKG7g555k\nrgwOINUhf2Lub/QiVSgucGgqt79jGlyHQbjL5cWXlUwMS/5DpZwA9Dg1PWeZ\nYfa9ErV83w9mLY/VcUsq7sujYgoL584nmGlsJscIKLldK3AjiTlOdFTAwd1f\nyFSYaXpCnQzaTJ7UOgO3RbGkteutabEm3M8Mt5yaIRYHm1Eic5HbPFfJUfc2\n1xZtmRybj29qJi61bZt2Ty4vP8XLgpqPKJYU78HIw7c8V42wP23jTYh+7SO5\nLTBpY1mWJT9zxZG45kWbPhUpCAKAdtPB8tAzEFtxw5++qNtsUVbrh8nGSXLF\nwyOOXYKs0VqGkpCEbjwIu8Cqe0mdTu9HhGf9wZ464gr1JKDDtQ7OnZRhjSpt\nKiwZ\r\n=x7wH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXsLZIKikLS+ezFbWDBqWevwIILZynzJAXCJJM20v/zgIhAKzWeDtDhhDJdR0Jxnc9f+Pb/ZUGIM/hoIotMwgRvqUX"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.2_1640591568978_0.6133225946201797"},"_hasShrinkwrap":false},"1.74.3-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0":{"name":"@sberdevices/plasma-ui","version":"1.74.3-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.2-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.2-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0","@sberdevices/plasma-sb-utils":"0.43.2-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"689f22a0f008c3e442edccce39867d4bc24ddb31","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.3-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-JFafmnWvVKG8fkzMsEOyJMmS0zKLQum59j+GzE8cOGUEQXTUkgYV7EyNTdDSPnSXP3kW6Ofn9efg+vLrhoxP9Q==","shasum":"234ff9a89c19aae24c44e92ee36ec5b0df800a8a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.3-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0.tgz","fileCount":900,"unpackedSize":2295641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyXyFCRA9TVsSAnZWagAAvBAQAJz7ueURoaUdX58ww0RJ\nmuHbQz5vWC9ke3nqGi0URfiSQcbIn4CAqD0V0iDcOmK1QvMo0P3C62IJnCGl\nRhHMFRvpE0QmZcWfRJKKenUcBPQNp3pujAB3GxldzIG3wkukENoZV5ifQ8m3\nrIYBjEB7v0yEbQy+YL+HOA5myhTPfFcFv4tht0ifkWHgf/N8lpF9vgtYenl5\n3XTzAywvcUekuDtmaAK+0jpqQHgnfQx/owuD0Jg2LVqWnUkgkFPRM8VJ1Bxf\nClAJQ3lDWHOtk6Hqi8Q0QtZFm/3zzltuWnJIRl6g7FS3gzNtaygj20JadtDo\n6M9CNZ6o4uuvvK0xJmmUTPch9LJ/bd2d7l97CdqJHHJD8b/MdmKnQQ9tJCS4\ndFbGumuSviiW7pm1eZJaokgg7wASZ6MipgDdXiHAUifUrh9Qqi9omo+u2f56\ntL9+RuWdj7hcALHYOcXt0E4HJ7Hpnz6ZMTO4H6FKYT7TohELGLs2yY96GxJP\n7xWWhPY285/LWxrV64lBqzOUD3shswXdZ8+QDCVRhPdzPQaLMXr3ecxR6GrM\n0cN8/NTeAleOtmva5V1HFRioftbhKJOIRc8aoleLEOoAl5Wu1tVjHzyGzUNp\nXBxyc+Bcr4/R1IjrBcpMq0tx8Gx0AKCzsqxyBLxcDOBc99BSlu840SpEv7yr\nAx/p\r\n=h6h+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGWwPZpGYdnawpn2Xm/R7a5r3dG84WS4628cvQV07pywIhAMfj7PDMpkUyM/Bi50QlLjrwALrrKEUfnHmkrBmSEC5o"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.3-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0_1640594565701_0.7746949307205035"},"_hasShrinkwrap":false},"1.74.3-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0":{"name":"@sberdevices/plasma-ui","version":"1.74.3-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.2-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.2-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0","@sberdevices/plasma-sb-utils":"0.43.2-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f79b21629479e00ad164022a99873f8d8cacdabc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.3-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-Kpkkj6FvSuushjh2nkvbN++iJla1jfmh4S6/JE4ojliJg3rC4S/H1sR/8LZeuHkr1ZNuKMaoLmTsHDQtPYLVlw==","shasum":"55ca63a1c1cf38b6da3afc9f297d90cdc4aff7c6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.3-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0.tgz","fileCount":900,"unpackedSize":2295645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyYXBCRA9TVsSAnZWagAAJdwP/1mpkRGO/XEKOwxyCStg\nJ+0kbQS6kmzqkpeEAg58f+h+U4IjTkOS9Z0IK7PYZfBh3y8LDnvCDD7qkf+X\nG5BYrislMBcKa3La+kGioisADlV/IeJ853BhiQednCrllluSaRyF1R2xnuzu\n+iCFrK61UseMHS8SafWubiqyLDexPPiO58RQhKe7/OO8Ut3WqCn2d/uSmeLp\n68qEfZPv972cZBcv8IO+NDqZTUVY/bxszHOzS+wzrWEohAnNEnC1MetJqQwi\nyXfamDrKRjgeJ9F9qvAHL4uNChVOM+tU/b4a3FkZee5c3QuC2Uz5Wrm80+Ow\ne3fJxQM8C306r7dgw4EcHxNNtXMzJsbPE2yhMvEELHYrqfYF8IxnmSt6TOKE\n40kK/YV69XafFuZU1UZRm/lFhIUG1RoF69S4g5ceM2nX5RmoWqSXbF2TAtoU\nfCEDhyO53q8UpIULsgi8XPBYuFEOzPMGxy3gGrOk6c9v7tzy+/J6qi0o+Lti\n/fQHsC6yZPmH2V3dlK6GbKeLSdWtXPT5C4NSa3ipeuyrGS0lIAyHWHNxPcXz\nIvVwt9g+Ba5VfAEmKY8d1pPjFbsZrUmzvGbBotdTuA6F/MPge7Yr5bDlY3/T\nxL5za4exTovw46XK3EHGW2dnepSoj8zxqx/NdwMzNjcrTKVfL7WvDd7mBq2C\naBf4\r\n=FPST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsi2o3BCFunbUYVweTi2wfuvNCx7n7hirMFC1KOFxF4AiAxwx2LZ9FKxsrzoQxBL5kqwlvk3U2RcKnCptfEnTfJuA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.3-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0_1640596928682_0.9308368154046613"},"_hasShrinkwrap":false},"1.75.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5ae7644942e936c9c492ae3ec5e7da39c031ddbd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-7AF5syagdcvpGDICh3ey8TWq3b+sFvGuOyZhlQqSaRyr7X7Nr0aGY7KF5usE1ZE0ttZwqdVX1muxYpvaj6KCNA==","shasum":"54daf69a90a162c8f4c1684c61fb583b96967e87","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0.tgz","fileCount":904,"unpackedSize":2345416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyYwcCRA9TVsSAnZWagAACG0P+QEG534V3NTU909wjsSV\nawQdGmcyNikArHDjDx46JjP6nbAZK3u5eIIuCRv4PSOcuMSSSIJuS5GplCkL\nvcrhotH+8tU4edGIZstSSq9/BVcFy1txnydPvc+bUSOSsuQPIF4xSWNFdijn\np0NWq+B+XGPxjxnsSJKoa1E2WfxM8kSilqiXT2Sf2ZzUxwp5/fPoejZ4rcmX\n3fJ82mFcEt81ifE8aZ6g4T7o4x1j4nXjD3EDQTO1Bca+Ud3bhPqLLJ2z5p+u\n5TgIaeUuFN7NjV/J15a7ddMskbpmrUXwHxZcwbSAQ23AVsC22CNzvSQPYfPP\n9ToG5d7NEPOB4UnaM/pv4+dHxAb+99ZQB6VrKxNFfJi7EphuNue3zYkpDdZM\ngrcWpoJKFnExjuheYcVBpJe5f3WnI60Td0s4PeqIogLMcy5tMH3nxlKOl0/w\nc8O4oHbW11wGF3m4kJ/3h5aXgED5s/OUBX/A+RDGJxpcfAwcSUyfMg8//NO2\nyczFrZUotcaruqjlK2OMgXIMB5onOSnfaFK9i100w2zRCiz/scbFUioCaNAL\n/aJXu0Dls08+ncR6CdjeSV6Dq8ZYKCG2YN20R+4WmPmPn/5+tjI96QWRaPWv\nsWZ6/b3NV99Q3QZmRn7J8CFPVxamDxs1OL7KzZfx+U/6OuQOe0TQQJu2bzin\nzZhS\r\n=UTVU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIPk8QsUVFSkDnubGSG3pndNz5irMbf315fDF9Ot0FFwIhAPZFPOyCkPFqSLN7yTzt53LFvqr/bCCHe2AQaSmQ0TIW"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0_1640598556025_0.9026438792922216"},"_hasShrinkwrap":false},"1.74.3-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0":{"name":"@sberdevices/plasma-ui","version":"1.74.3-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.2-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.2-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0","@sberdevices/plasma-sb-utils":"0.43.2-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9dcb35045f30a0c25e07fce320f8423d8394ec46","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.3-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-NiGX5bBlUh+mqqLeBP2sZqtZQMnPzZmHOGnPBDRpBDFMvTTDMBbqgFLtD1llZ/Lkhd9VJvBQYb9AHethAuEp6Q==","shasum":"5ab3fdf5ba207582c6f603107024894597f7b456","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.3-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0.tgz","fileCount":900,"unpackedSize":2295645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyZq6CRA9TVsSAnZWagAAGHkP/1SOMlPgMSGqJ13EQRsH\nfceHNzo4CoUTA5xHhmyP75FeDglC47uv6z7gJNVzm2qE7+/K+1J9qZ04WDpr\nMW4TraZ/qTBgCuxgAc9kx6iXbn1Y8WT9fh546VtWWbsQuaHJu2tLpmAK5UuP\nFSxV56Ywa/xDBufUuuWBgQ+/57T+o8zmnakxWgq7z6j2lCYUTVss4lGMtVIf\nbmgytOMmLSsfOjn50EmvLqbKJdCxKRVeAk1p9rOhfsVjWOhy7Rxd3vkkbPt6\nzr5N72AVShmM8BzjpP5x7Kdtpj19fJSuYVtTZ4IiwqP2CNS1Z1hatQC5p3qM\nioUQAA85iEsehAaaMCjOYTWbGBaJTs5qhLfJOnsSmwTObX+J7FIALsrRyTPS\n0O7dsbsA9dirAQaDEf2GW0qAJZR41ZZP72KrQk3OVlzMYDNox0gDSpOW6IH4\n2wnN6kFxSdOoW0cJoKUzEkzw1echG4iGqsq91PrbfDT02Qlgbu9B0cex45/P\nQdQII5FvvYjtC+KKr68oHqUu2OiEYCpRMekRQ3Y4nMXITbdt19K/xk84wRTl\n1xr1vpOSfRVoFPeS6NgeEQITBq8vr6hX/bppQgt6H1hG9kZ2VktPPEiXfwPw\nibG+zv7q9go3R07xptFHRcTWFJzBCCCGUopmzMVH87s2xxJlHJe/UgcIIaBd\nA182\r\n=s97y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBelSgmgndHCWmtGJAvph+8g1LExzShkgI0qSj0dvt+xAiEA7GLAvodwXKU0PRGNlhlnQixB85DFI4UpunwRxM+ezJA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.3-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0_1640602298150_0.765511911255335"},"_hasShrinkwrap":false},"1.75.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f6d30b851fd3d8dc2060bb4ad92d808b104499f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-eJkmMxKY79dJLp2I2BeIK4TnH0R0tg31wB87G61Om+OfvhNuMa5FfCHaTcijVTYsuLPHt9zY3hua05d9AyDSgQ==","shasum":"6ad3eff37587c2c55a942c46dcc3bddabcd5e061","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0.tgz","fileCount":904,"unpackedSize":2345353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyaM4CRA9TVsSAnZWagAAG2cP/0l/jpLSNDoQX28a5Gwk\nO5UmSXxiXgZQaeV4ksOc9NYtnQbeWjEk5DVVuq5SHxTDEkcdgDtA10js/oKj\nzn95QMbHMDhx2sCiL0vHeIZwM9tUqRt2VHq5GwKmt1YP1SWfLCI3eNI7tJPZ\nNufLePf+Rs2g9YTwh1H1bMJaKgXchBS7Y5l4zHoHYb6Gx2C/CaY0oaZZnNyE\ntkPG8QzAw3wEojVVG6/FmTlxwocI9hH8WjaAnNrkMNSoNTgI4/GhQN80bk6A\nYoggkRwn1zYQ/RMI1sc/LOqZRIE164igcrGtSrtZNK8s4VQo6tv6Pnnxt5m9\n3y6aFAirWgv9IKd2G+jEikeH+b4kFxcEnhLmFFwFPehwKh3GrHXe1eu1L3YV\nQk3N36E1AYHU3wnyciMgCWWKMEZXRt/F5981SzlW8Q+mAmRfEC+a8IwjcQqD\ncNFS/SVK6kGlNv6cyGoM3ersgr8lSRnPWhmOKyEDF6uVf9F19sYP/JYkg5RH\nMvBSVmZ8Pbw+6Z78dxX/9RmGpneuSJFhxuAN9CZRYKtskThAdpiqsWBsVHHe\nSd5hB3Mo4I855VIiNg6XIJx6pXxkqwhuseUrLosF15YP7hLpKZdmiTCee6Zm\nwwjwfXz6OBgc+pizylKP+LDNFdRxoxVqx5lq+FRquKTxbter49h9uQXZXYlo\nnlHi\r\n=hAlN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFGYeBA7/5d1IFD4N1gK4CFujdtcaO6F+RJ+NIbiwLlAIgQlq/GZQLaKfxm0A+zEMI1OJYloOLSb6FD+FT0dMmlsM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0_1640604472043_0.25321313766640663"},"_hasShrinkwrap":false},"1.75.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"577ce4cd9a66cb17e4bdc0fec19e1004524612ab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-KbrVgRUdFyT4CSEZ3XhqZNDmNcnZzHR9SraXeProg4bCXen2WQ1A/XZaQ5h+O0+o+qnsetuTG9bBf2gEgzl0Yg==","shasum":"29beb084b6090bcbebc20c4068cbbe22b7d284e6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0.tgz","fileCount":904,"unpackedSize":2345353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhycCACRA9TVsSAnZWagAARncP/2JmipZKNtEP4tG9BmzH\njwB4qzBpBnhZL6LQtIJA8WXwKeVl0+xYZrKLHkieZFw9NcAufDIpNA9xxpV6\nRIEgIsbzrsyBXY/Q9GXDnW/uApf4mgtLvcIc4KUu0ZmrdNmmRiwj+7OHWHh6\nujHxmHe0EtnIy2rV0rri6zTGGIHqXwQdNi4jKSngu1c93WRAeCOvR5/iQa6h\nneHdG/E/9BFUDdQHC9JOjfp9VFRr0xaEwMAJ1TO5BvWpKoreTAMyjvTRey9T\njqirUerlDdDc7cyF7ixbBEmOOdCGPUXcr9DwRRrcKDuumSqNgz5B4OQsE+PP\nprYTssRrDTrwNVuHMyOnuoUA7I7U1nT7GJBSkVZ5YFGTBgUgEG1kM099x2pO\nXd7IEJbVeRbj83Fetj5kp59f7fsh/iX8QhvGdPA/chul8GPjSZTG9pmAWbMw\nu34TZQ8QEesidZa+5isc1AvpCT1RLVzm8HPpe8CukDMh/Ec2DloDLAaT+UF3\n7WGcNe78KOD9NRJKwLyz6SCEjtiTT72K27I8F2i7Sqf57GVD+Zlj3PW7Vhwt\nyV3KIQtntt+hP5dVraq5j0ECv/dPOkVSxHzAq/yy3iSP+amS1w+TTdoys6r6\nuHjjExSwTBfILNawTNpzp4G8L7MATkztAMXUwhZl62lIa9THMbuzjkH4F9eY\n/VG+\r\n=DMQC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1e4/D4nxvUFRXCMgaNFxJyE+P+X5X/RDqIHLawSE3dAiB+6kMMS4+Vm6ljehjzdhoPnm6fCmxYGI/rI2ac5JYY0w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0_1640611968651_0.651179566700449"},"_hasShrinkwrap":false},"1.75.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-gfNGhoKR0MObZOS5P901rRbqSCXRWnOvyQkDfOsmLY+9V2kS10w8DGjCN+L0AQvmAvBZpUPfQTI0dpY8+BXbgA==","shasum":"78912101a75072cc60e904749bd35f7045719985","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0.tgz","fileCount":904,"unpackedSize":2351416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyrb4CRA9TVsSAnZWagAAEHwP/RCdTHCb+v5zbF24m65z\nDE2GmDpiFWvCTGKxu4UvlgJ/YxbZ1iDEKghoRvulUSeIX5LVmZCqZMdrGtHJ\nWsmtLm+bT/dV4cgNL6KpUXxjr7Kj75k3titv17HL7IuwnfxyrbblG1Ql5WpJ\nvfgM7ey+LlWyAkdFxVgEv85xilZNQnaHC9z0tzO7EV/IC4VEytJyhXqK4Qnp\nSVzOll2hzHe6FrANXxa2U50OSad0wKKcAp4p4glbrIRfWT5sXp1azr87ub+N\nBQSR6QNnWKBbgE7uabzkggeCH6kqhsJn8UuDCpF41VU3aV5YbVeFVNDpB/OQ\neOsyQiYVyKl+KLh6CAHF2LeJgYhRkZ3fh9FKM+5LMGSpurIu6ZOIvV0VHarE\nQVMXGtq86lfRId5RaJOsmKmJXui2ZKkIvN3qR3LH2/+ErSJia/8oZY1Clje6\n9riVyBWb8ufxCl5pAe96qPs4vg+0565T+pB/bwE+uH77W/pdDJlzV8j2xO+H\nOK/C3e6fd+8qN29yeFFQgQBCaTSKLcEUBJ+g4Nj4TwhBKWg9sVQhB75ht4wI\nbtkCEnjxxVbcQEkIfynmc0KKi3gGrc/iv5dbWahHlR7AxumnfagcdWnw4sxn\nNQYu8tZsxZVJIzkQ30AfxB8zjBNv3ccVuHB52D0QUYjS8lfHDFK4t/hivB2q\njqyF\r\n=wqps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+JV/j++MY6SN6DTmjV7Dsv6RUp9/SvTBj4NcJ+25csQIhAKYCxhFQlc1jogDC9jcIE5S8FNOvigpqLUV2A6v4aePz"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0_1640675064594_0.41246455540697946"},"_hasShrinkwrap":false},"1.74.3-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0":{"name":"@sberdevices/plasma-ui","version":"1.74.3-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.44.2-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.61.2-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0","@sberdevices/plasma-sb-utils":"0.43.2-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"edcadf6ab626d0dc8f7d086783f113259d20b17c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.74.3-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-SNjDvbHRILGErK9n/FYGigLlfr5CN7x4a/VX/2lxT+IZfbEVg1O94Ql7Y8r5gFXULTPH39Aj2us5xUzRVQe/XQ==","shasum":"9192ac4e12a88caf836b8d147386d435bae1f628","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.74.3-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0.tgz","fileCount":904,"unpackedSize":2345895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzDSCCRA9TVsSAnZWagAAa2kP/AtqIcduZtYttQdN/mf8\nGixt4mb7FbeylTbf6MiPK1WYXnUksb5kcO61MDAI0gnlQ74LD5/K0aYcN5Fw\nzZ7E6P4cAvrq1iJ1JZ92smShmo75/I45uqru/9mgzxdXozC+yNVD6lmJ+/4U\nItR23Bnp4at0isgUzx2gR1Dpv86+CKd9Y6wN3yiiebJUicuqU+OUNl/Hir70\nJrcRjm+bOG1csFzj9cSYtJmZaNu+exNqiYAO+4ji7/fAMBb8xazrFx4DaQLW\nlulGbF3JET+n1+LFjrnVeVY28ob3ZT59i0NZtaR1+NVNjx5IEGEWgWFX3Kp6\nZ153bz+r95O+NCBsuKxlbGbpdKjfqVLMyfr1iD5996p0i3HQ631bfkaegM8k\n7OwhlZTCN77PSaXvaBjYdcLlBzLTbi+x6rfcCGJ/JHmsVcU7mytPfXfO70M+\n41uNbvu7O5h7u5q/yfXYV0b3jpcIKriebQC6ar51N9NQ/8DdOWItbt1age8y\ncp4OjSNXbL8jpn9ySwriNpPfC5b86o7/JhCoQC25vQLBu/VEWiOqm1V7l+lV\ndmdZifkHq2X8nX2zITlDmonPEnvWBlVJbOUeb9eHa3lRrSDjQRjiobtN5S+2\nVYFXv4/Y1GiZ7KpI9KWJgu26dulauBU9yT7kPauBET3o/zAQfauym0kcCsIv\nckkw\r\n=Cv5W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeRqOh7aCZ5QCSr5eC1uT2EfNQcPraQxBXSVDyXVz8aAiEA5zhVtkD3B3did3l92Afk0iDZ3LI1kYA2hOFJhMIbTvc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.74.3-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0_1640772738745_0.18957629479464377"},"_hasShrinkwrap":false},"1.75.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0","@sberdevices/plasma-sb-utils":"0.44.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a1a906d8b405eefc0bbf1ee61af907c27bf512de","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-6t1K9nymSyElmFhg4zLmZtZNd7zNBBdMeUxYrF35CkeqNgV4NQWM2I2ZpXevdq2SMC8tp3ZkxmGEMQRGG0xNcA==","shasum":"3ff0152506a1e6baf74b05148ba1f1113212d164","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0.tgz","fileCount":904,"unpackedSize":2389305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzEpUCRA9TVsSAnZWagAAYy8QAIvpbW1YqJ5GmLVKVJEN\n/7hsbDjj33r7vchB1lAQgRvWqygr7rxACj+/4gis/mg5Iru7nn1gpIbzb9pE\n01dcAJm0TrWnTz+Gff/C+ccHcgoW6J79pFSSgeNyKvjty5E3JZVYDkK5wd2f\ng5LpNvbEnetbAJBxcO7UNsmdLySTyrTWa+27ev1+ItiaEIIGjaIkucYuJDmP\nAx9l42tC4KBsXi+YeyohIx49BD5WDloFrSx722kHy4z33NITbxUFf8LmWiw2\ncbCkCk6/BF2GPzrSdb0txTmCYuPL21owK/aRO6KzhFQiUn8lE3bx4RgB8l59\ngBjoUJ4BKbTSz1zEzZbI/ZTOhyRMg79vkf6sPMNiCcETCjeRB8Q9y8PALHrG\nufqEF45GlHopw5LCWK3FgI2HX8+lGBIiNec6qc75BjgwcN4J2RhXzgnnvBVT\nMIbuDuK2JiTdQBcnHzg/8gYLeog6gHR5r0Xi6f+MEPreuaD9P8+/g6U8n9Lp\nCZtCC+vusPy+QbZOMlOlxphA/svv9Pau8O5no6tQxTt9d5jytzbMPcC2B2VQ\ncOf/hKqez1IDRdL0hC3Lbhv7M2oP/guAr87skGGwTo1mFoF91PB/q+YLJ9U6\nlzHQZX8bAERsWvAOFwfpgvOjKuzn0REIbjWBZlwp/H5TWUWMJgAJ++b5kO1o\n4zIj\r\n=u4kr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1yGmEHOBNJyQaw1to7Mt2WBNTpq1PXZWg/ospexc9ZwIgAqbMtEZadnRbo/2sIvCDI3sIR3Ft3xN3/c9+F78TeLc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0_1640778324231_0.6611756178323118"},"_hasShrinkwrap":false},"1.75.0":{"name":"@sberdevices/plasma-ui","version":"1.75.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0","@sberdevices/plasma-sb-utils":"0.44.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"64662dbe9bce620e18fbac8c4b993c236bc2e7e8","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-mqMcFhGxIZmMUpWLae274j2PHufkT+iW6pdLCaJSjaaHYcR5yIQ7Bz2Iy8ur4DNzadEaxytm2u+hn2p2+OFafg==","shasum":"6665903b9f9c164b10414a979e51ca517ae503ac","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.0.tgz","fileCount":904,"unpackedSize":2389942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzFKnCRA9TVsSAnZWagAAvv0P/Aqj+FejSxqRpDiVW8Bz\ns3UadAshEqMR7isoyY76e/GXNO/GLFjsvht4LFHf86jNEu7JUdCdcPjOAppk\nyCm94kLau1J5LDudQWiqmEsoj9vhRMFPpz7Ir6d+B68Qx8MHtYGgL597MUXR\nB2KBasEtGZEgPqheW6Y4SbvMzxU+LPBzUYh7tIHRyZ6lXxiEttnbG1Go0Jag\nDZ4L3HVyglisn/PYCqEkMcwxiGwt8e7lbi4ZMmWWTnU/z8u3obxylTJIOcSL\n+wEgs9/X4EUt8qb8o/l2SDj2SDLiuCWtoaXGF6khcu5qRqfnjIdXZDudxKTu\na18OFA9rWFUFAicgpABbGgdFfy6YWTpb8L+Knc4/WRJe8x7Gr2YBYOC0To+h\n2aqGTGe4thjj8A2T/4mrxdJ6j6XGZ1OXr0WCIUl+fxIWaIQaRBhzX9Ya8VQx\nAsNmeg2oNKtTwITYCO2O2AKHENHfbAV45hmVy0sy8ziYt5KZyQg48sLdoJ5Y\nlLbZ++ZQWPcRBx6Hn0T8ypCG76hGDg5KbaP8AoM+UaAjdJkVfdGkXZGm0bKb\nMeIE4+uO6s6lqhbwfZdxgRn5rfjhsTfvaiiExWgBll+4dkZ5C1Ild5VxJy+u\nnshxDiXlvm516Q9BtO2uxQI6A9uBPiZl6EnV3yf7o+YNwXucu6hBw5expvmx\n3Cac\r\n=hZE6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoIlfCmxL5clCdobLlPmlyjbMjafBsy121ivL+aF6oeQIhAN3TuTw9EsAB9wJniTrjo1doS7zGsbTRI39t5sHPXoNV"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.0_1640780455476_0.8037115078683297"},"_hasShrinkwrap":false},"1.75.1-canary.1016.4eaa3bc9c9203f268fa09b8ede6b062621a22ded.0":{"name":"@sberdevices/plasma-ui","version":"1.75.1-canary.1016.4eaa3bc9c9203f268fa09b8ede6b062621a22ded.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0","@sberdevices/plasma-sb-utils":"0.44.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4eaa3bc9c9203f268fa09b8ede6b062621a22ded","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.1-canary.1016.4eaa3bc9c9203f268fa09b8ede6b062621a22ded.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-+NVA6b+T4paoKDMD0M127aWhKmkjNDjatRqSlJp9WeajvvqtPbbVlCkbCHsiCMTIXrFlf/O6iaEWGMrRQC37xw==","shasum":"e1f85fe159958f1f92290431bf25650eeed4909e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.1-canary.1016.4eaa3bc9c9203f268fa09b8ede6b062621a22ded.0.tgz","fileCount":904,"unpackedSize":2390535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzH5GCRA9TVsSAnZWagAA0wQP+wTnyswk3Ll9doChkgXB\njhuBP/to/rjdnCS88v6uZotvCVnxWHZPf3vmv/XbS70XL13ByB/F3+Rd9JHM\nqyI3cqknNzMr1pZRn0NuQ6j9+qO2PZCiCDUI6kJ3MBQYG4hc/F+jCeJI2sXR\nkBhyFcyBFQoCaNGpEkUI+YF/CubA30CaJJ+3+i2KdiXbq/KEDAbiqMrhaDpr\nSPk1yJf4KA0SX/ZiZFk8Sb3jTkijZ83UzHQw1b3isXgrtmldyqiJ1/CBQmjJ\nVSLsSzIgmqDWbICp0fc4h6oC9wB4qmFiF6xTaFFNVgJhXMOIxdmNBcn4Kde5\nY3/mjV7eFcq7vjwZbfsUR3IbhsvWae/VCP6S7oqgDAn4yJg/T4KqEZsA+JQj\nXHC8LI9enqZQoe0QULHykrSiQcu5RvpqwZUoi3mwqbT9oVJ6kCFtEx9Cm2TM\n/1ymTQrB9S3vW0IVsl91TL8frkQMkzlpil3gbXGAQz/bwXxijGuf5e+9/pM0\nRbzYYjhUOl32ZECZPI4J5PdLs7i55KJyzQ8X7XD8ne7p5aY9Ng0HyMxmUrAG\nMHpZhRcDpDhTpGrmXV/TgIP97A79Y/+vhHIBx1T3YSSB4PpOHnIvgrYl/svt\nwzau06cAuuMWPMCf33H7B0ewCT+qev8zNi7xDocgtm4PbMKQK8At17hyKZLd\narKj\r\n=5yWe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1pBuHWNt4AoJTlr6kS3IMgX6plYJNzbvU8dgybsa+IAiEAsPLG0u1JxidvX3MmJg3NaH0PdotfwLSC0nTIxqjRGPs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.1-canary.1016.4eaa3bc9c9203f268fa09b8ede6b062621a22ded.0_1640791622296_0.25031689105244626"},"_hasShrinkwrap":false},"1.75.1":{"name":"@sberdevices/plasma-ui","version":"1.75.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0","@sberdevices/plasma-sb-utils":"0.44.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8e7e434bff20411cb8510d87b5604fedafa5906d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.1","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-1gW0XGiMlU9W/1TlOVeuoQJ6oWtPxEzJfebhB1e67d2NH1DwsGsq/q0tNfdKhSffFG3Kw/lez3k7d26sq88ozg==","shasum":"0e51ecda954e50af0e86efb3d359f9f1d42662d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.1.tgz","fileCount":904,"unpackedSize":2390913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzIlNCRA9TVsSAnZWagAAjS0P/AugMdIpkjBSCuMYFEzk\nyxm09ayArbLOwOjTi9qXXJelbyeght1eDUmhN3dUeBx9nWtfEiK3GhpWM+pB\n3cxr7JQ8ZioE9t7D9nFmlA4Ax0KfzfE33AdmtQhdUK4Pri0zkIVTPlbQbnSi\nt2clVIbI2QztxfLgOmd6+QhV1YlnCFUerJlJzG1B0B9GUUaqbN3llhjdzghk\n5VmITjzqBU+CtbD+0U934w7EMFhMmjD6GSH9JV/44QZueWPY7pudm00KdmBG\n+A2KKSUMbuP+jqJQDMMICxp2wukqHm3hL7div0H5+8QLOVjurvp45dG8f/kZ\nZFikW69QcLMctCLk/Hl2M08kwxrgDXjXD0ijxPLNjo8up0CMC8fzgSx8+p2M\n/aWuiYirc7V968wLhRI2hrhhMHuVrnVm39um4/3PxumKNmayK2W0jdxY52Xc\nPHYwrXSD4kEF4I7JRkEZZr1htZnoWOQ4dvHMqO8uh/uoWxqFzpRSuUEbEtlp\ng5Neqv8jQdfJhkC1ZgdMXx/K3N0IQeXH4njdS1BA/PZ31rTZNFzNJlWGrKpw\nVmJ1vYBbhl4Z6YFgqXRJqhObG0NW6tmX6154ypRY91aLyy4KeySSsdL96e6p\nWcB5Mb86jjZJyrKE5gKhpMj7NI1cG1p/+aNffrLJPshI5gbBp+VPAYSQlohb\nwZYA\r\n=6TQC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9ZfjZOg4YBTC/h+8+tim1/ysh4YfWspbkuUF1EZ1QxwIgA7VXhup+FFHkpTWMwcm9sAoTmMrxGIQGgC1teE9XMGc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.1_1640794444911_0.5314835334666332"},"_hasShrinkwrap":false},"1.75.2-canary.1014.450fb8f647c49d54f7ab3841e96cb4665db83f25.0":{"name":"@sberdevices/plasma-ui","version":"1.75.2-canary.1014.450fb8f647c49d54f7ab3841e96cb4665db83f25.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.45.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.4.1","@sberdevices/plasma-icons":"1.62.0","@sberdevices/plasma-sb-utils":"0.44.0","@sberdevices/plasma-tokens":"1.14.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"450fb8f647c49d54f7ab3841e96cb4665db83f25","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.75.2-canary.1014.450fb8f647c49d54f7ab3841e96cb4665db83f25.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-lZNkOkie3wPCLCxS6ywuMa9TStODK3sTlMglulo77p49dfpoTHvwRhoJPqSP82yUw9HGB9AiaT/3QgPj5dFOnQ==","shasum":"de033cd47a2e92916ae6c0b3f214c23f8325a8f9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.75.2-canary.1014.450fb8f647c49d54f7ab3841e96cb4665db83f25.0.tgz","fileCount":904,"unpackedSize":2398029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzX8eCRA9TVsSAnZWagAAvLQQAKT0A2aOsjEpn3kyqohz\nBxCl7vi+ucQuGQehwqClg+kbbyAN1ucugidAuBaB6o5IXc6NnIZViE5m3kDA\n1rsD9I9JbFBN5BEFydTR/dA3PPpNWJzfYGhfrGw+NO0GjtJoFQGjf06xtv6d\nAxwWjWSNY6RK50CAvDln7HQr5viWw6nxJAX2Ylku7sDMQ/sXHYfLCZk7ZefO\nt1XkRr7rtzql0P4nkhf1scZTITCRCaP298cgfmQSKzCQ52m49J/ZrTZvvJQx\nxE782jC6LbIjjOFgQFIBEKfgDAj+gGs08wDl1LNI3RxG/YVPG0XZU93epLVB\nIgY2SemFpB2/cJ72s+ypW1YqfXU/hZSIcUoZKEuRuDpdHXJPZbJPEMEinhdv\nJm93LUupHP+tffQ0zc5GRWRAv5G0bIqnpVvpxFeqdtZCwgOLISkUzUzf6hYR\n6ecdEG2fnKhahelSCoNGi1YZq8wOeu/oqyPPMVFlN31H/fwmZymp+ALl0Uar\nSS5UxHvJr+gLrnOeKk74GUh4TaaNhvktXBKgTe6GREdSZ5cu6e7/eXY3z1p6\nMoUquqanRF0PjQgoCrtZ3L81SqWeXvddJPk0pV7RX3jKQ8P7Ri2X52/VfzIa\n3vQqy1f6+AXMpit7t82HKOF6wGQyU/risn2WEJaQNPRidkmOgP3PXdGYbrpQ\nBeem\r\n=MmUy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWiSbbe26D2nQ+qYweBXsSW54XgHx84GMGIKiw5Ufh5gIgRXqB3c2Rip7arIx8SbpiWmZ51jXBDIX7OS1/F8BwC1w="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.75.2-canary.1014.450fb8f647c49d54f7ab3841e96cb4665db83f25.0_1640857374203_0.512580909388624"},"_hasShrinkwrap":false},"1.76.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0":{"name":"@sberdevices/plasma-ui","version":"1.76.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","@sberdevices/plasma-icons":"1.63.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","@sberdevices/plasma-sb-utils":"0.45.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","@sberdevices/plasma-tokens":"1.15.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0677bd5e9d06d023ead51717c1cabc04ecf89618","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-pv3hGS01c+2snChvJLSi3Yt6UgRGsChN6T2pMr54lL7i5cWmbRQJrsarMWProMT4R+6nnAdapsinj8kGHNOQdQ==","shasum":"2a2ae390d7cb63965f69e839d7634be54b5c1c36","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0.tgz","fileCount":904,"unpackedSize":2391243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzcAYCRA9TVsSAnZWagAAktUP/2pLB8CFlFv/yacdqrRP\nGctWUPpVbzFkKadmca1eAKEaYdikEmmV6bdTcu0iYF8V68IPtwG3x7Ba7FQ9\nmL21luZYPsujDdNV/XHbpMNqf5ZzEqmW0cKbUzajwjQCg+BMx9W4RPmzCEI4\ngMAl/gTvVYBl2XB3eXWh+FUd5oPJ2p05Vwqtn9wDw6EQTPLzMIkpj8+Z5Maf\nVwDJRvbDC9EcQ9k6hoVsGnx7DaCnFe/pUX25Tkoq1sjEQ3sPW4Ud7oF5hkFd\nzO0mgNVvSGyWxwI4uPSomMxaTQMRuFRW4ImzkrCnPtXvJ0J8P9nDQK0IbZtT\nAN/2gGZzmu8On4EX8huqUDNmzeMH/JWbFQN0cSy+xDeQpodE15d0gEf2slRI\nyKvtju0WOqqIXukpVVMtvdyIAsAU9vNZGMS9SD/xuZ+nnc3ouubdirFhjdk/\ncPFsOKDeHlgE8in74TF0r0S0+8ixcLkRzEyGNKv00bVLXMhlayoUmfdDoA8h\n1rc0VuUXAVlfKDPfY7f+2f6jDzb7oAseQyunWM//f3uc6MczbPe1Q17+cCOO\n+SESXIscd2L/gLAj9iakJAt1fkIG7FCHH6zd4Qwr56yrHzomOY0VltY9SdhN\nIPRFEhDr+RPKSoWws66gdsJBRN5zvxylkXN3LrQK2rfOwPm5djiIaH50Wkbg\nR5le\r\n=ggzv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQOmcWtQyXYWYMUJmabXIHiv3E/sal3rLgQWQ1m6zoUgIgJSDLQwB4F/2rfMhJhPmtR7Z9rfPDfaOIdmvodXOasKw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0_1640874008134_0.03891014283640937"},"_hasShrinkwrap":false},"1.76.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0":{"name":"@sberdevices/plasma-ui","version":"1.76.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","@sberdevices/plasma-icons":"1.63.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","@sberdevices/plasma-sb-utils":"0.45.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","@sberdevices/plasma-tokens":"1.15.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"44752525dc4ed2ab3f80029f7f8b4e81ef124e87","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-shPdpkhWfzKDVJAvP04lvg+AjPQHDqtTkz5vkubC0wEiJmW9Xs2Y8HmOXntXtXUwURERqYrpVrI8tYZzVxUe3A==","shasum":"7fb1494af255b927588bb6aee7cb7eaf585588fc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0.tgz","fileCount":904,"unpackedSize":2391243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzcPuCRA9TVsSAnZWagAADX4P/0KuK4ofAho/0hv5TKX+\n4lQoXwV8pc/IeNK5xdof03TpQS6w0QpcGjyQVVSkCM0g8i7kJLwuWegOqiFd\nOIaAbUXfVcXCBz3l0QmN6qiE2xE5n9rF2yAdS+uF0NIwz7IE5VyFT6D7O5K4\nXIGmjicj7gtEnVFsXiBBoFUExr1dqk3lpdY37/XZEOAf3qf3i/7CY+35yAQc\nynNnzrjzQxAFgubpNqlcjx0J4RqVHwa/DyigtRwRsikMMthYwVO4HgYF92Ej\n8hL9tksKpuM+79Atgdc1UYFP2ctfKUcT96RdvmFUMT0Nx6VbbwN8pFtEgZPr\nfIi7t1MN/sJwwCU8BRp+IURZ2meiPlRZHRNAZlBFsL+vNvbHG0rwRJOUyeox\nPqfrp5tyNOoDwPLWEHtoRaLby0D9r82nv2+IUz9tS2nskx0ipqMbRCGpBJOJ\nC8wwefpLN2tPsdZPBFbIkMPSMihe5EMlzfikdtofJOSuczBiTyqmFqPBFL9/\nvYIu2vBY7//lAEmkCmaWlADVfZMgbKoPSTenSQoxZf1GSwE1TrFu596SaB4X\nLWJKiWJa/K/P3A6wMrSPY/XY94ONF0TN8q+/yru2ZmNR27fGjy2sbE7nwLxE\n3GhC1xr+bj3PHq3diky5/+1CqSD1P0KWXYQiA1Mr59U03Bp3+s3KGw+KEWIE\nn/br\r\n=DPgN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIV3aIA4ZpQVyFMYuoHaTzJH7C/XW6B50Hf0e125NpMwIgIVOTCguwmyQxrpkk9A+14oYR5DxnvaYFizHPCFmF55k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0_1640874990309_0.8003728182997643"},"_hasShrinkwrap":false},"1.76.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0":{"name":"@sberdevices/plasma-ui","version":"1.76.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","@sberdevices/plasma-icons":"1.63.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","@sberdevices/plasma-sb-utils":"0.45.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","@sberdevices/plasma-tokens":"1.15.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3cf3be1036272ad9dca8afc994bbf8131f29bf45","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-Z8A0VUo/K2AbEDjAgc5IMWtYaJUpPBcbZtzvAGDHCCnCWmBnwPw9oV5nKXimHQ/mpGv1mqA4rTYeMwA8Jy5Cxw==","shasum":"36a5ad90518d700f94edea324d9bc4f27d2fe077","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0.tgz","fileCount":904,"unpackedSize":2391243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzdBICRA9TVsSAnZWagAAjlwP/2amgGk4XzvLL9ptp3Gt\nZ7B6LjUzs0yNTjY/WuIUHWSxsDvpG0xoWWAc09nMFWitpiikFAdho65qWu52\naQNjmJ9zZ/Qg7+I8e5lCVnvFWEysYhrcQz0JNkjOKywBtUgxPQpgk1O/6lx3\nWymzQxye0kutRtah2nwp3nDzEMR/l+cM8uurPq1dYHdP1yHAyJJ3HUuOy4jf\nYqsLIak2EoPwk8D/cxww3yTwDG6Sz0SKx9swAFM1ekSUszrZth5qrQBPvuGE\nWrvVmdrffJJ0AR1xfqwgyeE+a7mVHUnkocUL/2Gv6LliZ+zLmX0AEce3cTby\n4akR2Cd1LoZ1FiiqXdviTmfEXIGH9FbYs7idAfC1um6IRXtBuWVYcWucqRcN\nyjmK5GTiQLIlr5fLP06VFvsVizKN2lMBtRlYbiTx1zcMEyt2UY/W15T/GnSP\n/NWt5OurBkWB8Sn1u1pqIEPOTMXjHg5aprnFEatms1ego6oPh1zEKWOL4uh9\nk7Ceh0WZzCzcuXGHmPSAHZ4Ieip1hOe0Ir0ZCv0T5v17FJmFr6AkhR4snZD8\nKG3K0U31AcB+ESUfgyBflURFU935F9fNkd9dCsGN7ZKTaDC26jxy0Jf0B1IX\nJOjpX07dKrvXWT/L1Ug3rD9H9jSZN23DiHTkZsjRZmLssuHnCS0FfGev0COj\nVpPk\r\n=+vTY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNcyOEX0v6TOVge8RcD03TKx/hJm1OPgacbnYTRXyPJQIhALs6n3t/a2v+CF6JhQVTgDl9BC/Ti8EhfhJTXgSr4i58"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0_1640878151748_0.2514435477833732"},"_hasShrinkwrap":false},"1.76.0":{"name":"@sberdevices/plasma-ui","version":"1.76.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.0","@sberdevices/plasma-sb-utils":"0.45.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"59be6eeb22f1e3648ef658d72a7f8e67f32a9fc9","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-e2RsKlu2G2Q+pYlc34he99JG6jF4z14KWqRrOq7X35rFOzDFLLo1IkSCbiyXPrP3vd+WZJmrQsp27uUqfOdCSg==","shasum":"b85f86ff6b4eeda05e03009678197aaba04406f7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.0.tgz","fileCount":904,"unpackedSize":2390913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzdx/CRA9TVsSAnZWagAAJDEQAI+LtYYFY1E4K+jQW1AS\n2cS8jMJkOf5IG6/SfIrPIgSSfCcGElsNjTzbB4TaHHSjgcS11ReK0dPFnR9K\nC6LF/PHuG7LUfsx6mKhcupJtB4ibqU85KWPsoiFwMJrWHZSuclWtn342vFZC\nIYEJotvp1a9tz026nX75Il7HNk2lmB7OuNKG/9gtI2xuK7n/dp4LvQB8rp1F\nyk64FWQsrsSlp2n/1iXw8F57SES8au8UqVv2ULtLlRq4VIjp5cGGf4eZGkFq\n8EOCeq0H2YmDlZlm69YwLAtorjJzSL3Kj+ggyl1PiRarOe+u/d/8oQ8aze5n\nWAA+BGbFEilrhF18q1RBqDccwB7O6unesQI8bjGXiKqDK7tRE+IADw/obynX\nyUdwMEAx8qnIS6VBJmaTRjiTR2gaBjuFSdOLUThVYuUPjuV5dZCamb3dB7no\nSn7uNIiNNkbUxHS4UiJJpbmLE7PhXC+jEyRNHNimXw9p6SwzMxlmDJ0La1/R\nuZd/whcssFAKnlKW+LNi/GaMl9kiqxv9dnurlKfZThbTy/S9qWYQ0hIk1ZCb\neDXpUvECKY9zwZVR+8QsEMcovJX+iNVMpi5Vw8JXdfKTKZ0jqI9J/G7fhvFa\nuSXXymnL+SBnP2jx1yhGsN7LlWO5fp9jJXfCAPds30QWmBNRplsnk0dECATU\nb0jp\r\n=782b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYgldefcaGqxHjc8SIKLC7rHPGa9T9XM1eIAwdERX0fQIgYvwECnFnYQzu/ewAM8xpdVk3k+hIH9HLbed5J9NlL1I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.0_1640881279092_0.40398026464778414"},"_hasShrinkwrap":false},"1.77.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b831f3bdc41c920342d7fb6834e2f3c587c41a40","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-yMTJFTp/yvUlmVKay/mUoSccY/ZgpP0WJLUE5pSIORKLjcZeIb5omKd/lQl1Mqny9RXUdBZZx4PTVyGVhWaUqg==","shasum":"8137f95ab8dbfa13b403939572d60e30e8c93631","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0.tgz","fileCount":904,"unpackedSize":2392026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3BIoCRA9TVsSAnZWagAAUa0QAJZUODyJZr8Fnsa0Svxq\nA0HuPPN0P4DLYh3qkWOOOTA0j+Sa9kLSdxMSdQM0FnLT+9OwwOLu8zvYG4oa\npJ6i9lmuNPMIhzGDRJsibCQKpnT7EZXtGPB0Kzs2gAknMwv8GazoiPvlLkP8\nTdsW9QAvMc584Rp2d7mZJodzBX0PT/IW015G9gTvTNvQhhZcved5J9ihkqIt\nkboqk/brKxi/MhRXwe8lWln3bGniS9FCobAoJ+pYJMRjFU1yq2QT6k7T1b7H\nzM4vSV237qAaNBPUO4L/kcFA4sikfEX3cthkgftfatxBFGRQPrKaTSNV4PEs\nYU0g8fX2f9MaWnbaESA2KwVgUMZscun0FA0C2cPHCS4XC8n2340wS7LVTWrv\nL3wud66RQ6qiHvT0fTzR7QELd+yPiS6ce0CNa4MSKnaDhpcSCCgp009ZJmcC\nCi/RpuAh5GUqxFRLGJAFM9i3aIYk+checePutFSc7Ih/eVcYkBWjJDJcuHEd\nTC2w04LP3uJRihytr7BA1SNBTbdtHZ+JYKPXOZFYx+wHC9nVB9nNVmIqkG6U\nfLFwreP0Raq9/gLJBqJNpm0t/R35aLodSpVESv6/vbYy8BFIA/NkQaW8+8Au\nktVL1fNmO7H2yAT0X8HWswfvJnoyVrJyzfdLhKIxoIXYtTrFAZUbE/m48RxU\nv8+I\r\n=uTQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYM2NyRvheWyhHECuzWm7SvnaEQQPaK+zhqi96L6J6dAiEA+68eQELfoO5Als/PpZPSX82byBP/5lOtW3AulzLjhcc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0_1641812520117_0.21393361675988798"},"_hasShrinkwrap":false},"1.76.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0":{"name":"@sberdevices/plasma-ui","version":"1.76.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","@sberdevices/plasma-icons":"1.63.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","@sberdevices/plasma-sb-utils":"0.45.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","@sberdevices/plasma-tokens":"1.15.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-b6qMpRoHBWohYPw8ySNhF7r58P+aFiumyaK/s5Ym+YrJX+KNCGnI4pI2duoirLz9pPXCudS6r8Dm9bFnzdbNUQ==","shasum":"e47d9b68de7cff6d9d717f7a7a99c6c5750596ee","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0.tgz","fileCount":904,"unpackedSize":2391243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3D+dCRA9TVsSAnZWagAAu/AP/RBfrDHmPaVWJqhXfrS9\nQ7yYvQzKRws6zNH9lsq1oRwUhu07CZ5hZRxvYOCF6jRG/pySZSs5xDR0G9Vj\nPWm4H3BX5ZPjYtYynreOrywq0Bpq8ZPiCZv/8zVR7J7KIUpwJOiHrRBQaI2w\nYeHvCRoRXLr42Ic/dEa0k9HTZqXJios7XiqSyN8LGOYgoeLqlIJ9XgT0erKs\nLQmqqNpstBNtvDvDbIic0EPRCGzi6LEOlDbj7EvL6WliNzZiGbjVC3bpsul9\nNXVvRBIBV62jCondHZMztxHPUvO+0oV8dAettajEjpktAIyShMSHv6E5lnD2\nUeX8tHjSUZbC8zR4GnFDunohvBweM0c7uC23JCd4ZLEfLwhP7MElYsYGdCkg\n3k3HZv2grb6mqpsysOt18T7ZCicTAcKK9sdKqDFQSZBCa+37WXIKBOKg+aVT\nfc4jUrISjnEK1ydlQYu6iUNjyjbxwZ4Yzi8Idl7Ude8UGHJYnwLGygfUasLB\nHhLUvh533gBfHz3+Rm3/rsii/2H/NaELLoaWIcH0nbZsEAH3qJ7M9MU3FrcK\nyu7GXACIMQS8r5lPkWutcg5K7l0J8r9Yxa4LnDRYws2glWcggTHntPhy77M9\nihp77tespU9oXvQ5V+/ue3Bb5q5dNzfCxEaNSZAzswQhRVtTjUqnWTjOkdTR\nJ+eX\r\n=6AQf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5XaulRX894PFnmI+7rKl7+hVPBUuvO+VSo/zWH9SlAAiEA/NRBy7xQmX+ms3O7NGYQf9L28qDZloF60tCli8fvDBc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0_1641824157354_0.12201172931678705"},"_hasShrinkwrap":false},"1.77.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bb8d7aacdf758bd881509110c72b0993cbcb7f5e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-29KHmoKUbPXPPT68dFYEM4CkhAmLMdKnf4fiDW6LEN314lARsEivs3KMjRlat0iHJ2gjHA5HQwPALAZ+DlKU+w==","shasum":"8ab6194452e6c699eb91b6ccdd4aa8f99fdef889","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0.tgz","fileCount":898,"unpackedSize":2398501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3E0+CRA9TVsSAnZWagAAGmAQAKBP+dAoqYyGx7sAskkq\nYgUiUW8IdaLEPSGoVoc7v0ZhV7Ubr8LEXHQT5oJs3hcIg2RGbqT2848wlirO\nxEKRqzDo/tcsnFK0NepKSUIHLS/qvw6TP61rARVfOrgFEJ5BfGpt1RQs8Qbw\nffRNIKBOf9jIVSNbIqS3veQUUhx7xGmITvCAHx03QOzm713xP/UCZwOklK6s\n0Vs8a/9qQE9PMb2vlQe2Wvd3ydUaon/wZoQlKcETkEwiVwmq9qpK3OkIFm6f\n4mS8ddJ5Fk5mYWzoU52wNMMFH4KABgjDwJa2Caunq2iv3MVaa2VsppLVlnmp\nqZI7fTCrDr5Hxf9n5m0RBBq99AlTmflxp64Nn/XsfNe6kAmPlzsrdui0WOED\nuy1v744t3cIVK4CBBD29Orw0HXaJ4RhSKw6GD6/EKfNVtXkm7JJKwsRwlK0v\nfI10lGCf1BCeua7IVEqfLKHu1GRLG37Wk5ZIlTAMaUnuekBg3nxRIIRlxKEt\nZr7U0d8s2p959XlO9k5SAZSw95/SyZ78Bb5QrnEZlaLYMkUscI5HsstckvYI\nsYPNWxsK8Rh747Y/g5+pjHAFQ1pcGF6CAqKdheeXaOG8w2Ta0GT+a7DOUx9a\nJCpQ9WqtdOVZUO2DP1TAOJzRc3LC1Lgrt4k+wN/Lbmr5+O2iNdaqRadrE9wJ\nWeTw\r\n=4U/p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVBLJoOYwE8qFSIc40LyVJqtoJAuKiK6esrGFPVBtArAiEAwy4NCN361PtX93r2CwcJiCiizeIVd//D+xG3iYUKfd4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0_1641827646684_0.6924401604659678"},"_hasShrinkwrap":false},"1.77.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0a10562b9aeba47870099e3028d33e0d0198477f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-uG4oPYiCAhIh6/ytgADHGqP7aM9lfMqG0NVpAlRZd9Y5y0JLp/BjHjtdyzIMT/sDVvz2xKKSN35hKvmMcDizrw==","shasum":"47f6304be0dc73d1f168f575f83cf0932f5c5b12","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0.tgz","fileCount":898,"unpackedSize":2398851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GKDCRA9TVsSAnZWagAAdvgQAIGM/Y7w2+LTd371ERZ+\nFtyVwd46Ua/yYezYgkOc35EfFRkV8xH2hys/YLOsqaxfuEhDH5v7EZ1H3jUT\nU8fY8Ux4Scuobr1sXB7+zAhowXdnk+tr4P/Cb+0Vy/0kqfV8B3eFbJoxMo+d\nRluyjWEy2V7229Y5drMlFZiIXNXyKGDy3d2/iRCQf6Ago/S0eaMYJbKAaknK\n8HriwV4FqqaBe1TEIex/QnAplaUU/6eZ+MXvBx+87clrHgh59Fgq13TL5788\nrt64xBxsmC7LT+NQih/N3icA+R+DvVGe/60RclpWrLrK8tUUPwczn5w8Npiv\nyZkAKByCfFwxEFX+f135FwEpYvXW5IczGVh1a4BE0pBEec71Kk7wr0/IbZ2r\nmpu3L2NhUGNwnt4LTpNEuUxAxGJsmOqrp8TrsZ01Jmt9vrBsounXioUdEnl4\nOEtwSrqAddHWsA0jzXyHdA4D+fEOTc3SqRnl6dfDeicoREkFIHiZr4uoQ9nT\nnmhCuVHA1U1bIjNJZ76ADu6IQgEP9+FFMAFEmOzIlGRIAzxOWgYD3zTmvNvM\npCZ7Kil6n4JvmMzgAqX/+k7NyWBiSoBiGtJ7cUqgGTwswtHYPnEuuQSd+9r+\nXh76DV5xIT3rY+iSrSMnHnLpEm8Reo5t80a2VgEUU4vUqR7sAZPqPvZSZHUN\nVvdI\r\n=U1Dg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIMWCjIWzPk19p0LyrYqB5LQNrd9ca8ZluRuNaRCFh1AiEAputh7gAwrRq7jRjsk4T4ejraMgHWUTB6r6Uju06yxMs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0_1641833090816_0.2745922675241501"},"_hasShrinkwrap":false},"1.77.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f78ced5a16bcaf0a2399f2f510c7c59d658bf529","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-B7CoAV8QW7yVlK3vO6T/HRo3u5eijfCyD8AxFhFRDn8GEpqwUokv2tsqsuIgy0t9k3DFBWirmHBlkM664sGKjQ==","shasum":"22bccba786dfe035542660eed6c4f4cbf1ca0623","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0.tgz","fileCount":898,"unpackedSize":2400492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3UTlCRA9TVsSAnZWagAACgIP/0/uxFRN6dKFJfvIpqQo\nSUrnHkZdjnKoQqyCuC9BwsboGilPlo644YH9ZdiNlOUUrVCn9Tsm/c9V245Q\nynUf6oPZ6PVR5mx0AWy5Dpj/iZDf++WQmIFvij+JWfgO5wnjofZZy+evmlPL\nznRNmyhff+dDp36/d8bKbHXKdjR4k4F6aHUGGjwbOZTgbjBmol0esEmzx+xJ\nwYX3o3wSm2UBHeKWCbzdkqwfbouJhSUSWULobSBms7sXFDP91ladWXgMuzhW\nt/xVJPHDcyu5aR/hZhz+fEjbyk1pZTxEmLdOTsoz01B/YundRwJsaiww/392\nG+ShEcyObixUlU8Ip/QoAOjkPmREzKp+aQDRsCacSJ7iDaV6wNF2LVNN+UEQ\nzgNNA+yfH5L/l9d93EXLJD9AnKd3s3X9OePxYJtI5/kBfIdha2gpafobfbuO\noaPzwpbY0lprLVgrJRa0edmNocLJP3wnRfhH2+Lt2CP7RU38HOXHZJSyYrQG\n9pVXnnK402ngCkxoJZxb4jcKDcXgqjV0c38+FK5XlWKpepE6buaFQudNE0Oi\n4o6O/fLnJA1y6puOPK0pfCg62WEYVexqObLEpO/1cQ8pXOjkKXdTgJgIvi6u\nqIVY0LjXzpqEHawMGxSOt02A3KA2e1M21GGQndQtPdsXSRKUtWBhp3hZrlnc\nA6ek\r\n=Dsny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+UhhXiUFQVv8zovM4hQF7vI3zL77eVZpjovau4bW41AIhAILq5nOoV1t2WgIvlMLHE1Q2LryFlFefPMJjwHJo32cA"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0_1641891045055_0.11246455558641455"},"_hasShrinkwrap":false},"1.76.1-canary.1014.8cbea68cc84dc6e00dcf4827425f489466aec438.0":{"name":"@sberdevices/plasma-ui","version":"1.76.1-canary.1014.8cbea68cc84dc6e00dcf4827425f489466aec438.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.0","@sberdevices/plasma-sb-utils":"0.45.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8cbea68cc84dc6e00dcf4827425f489466aec438","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.1-canary.1014.8cbea68cc84dc6e00dcf4827425f489466aec438.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-CSKwz/p1wSPkCz1FoswLxma917jvREDXgwPhmConyIpQUF1P9q6sK2pdydZRfq9UrrUYhbAz2ytq3nUvj5zI3w==","shasum":"c967ebd28e3ca0c3b7dbeeac4f63f843c21e1559","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.1-canary.1014.8cbea68cc84dc6e00dcf4827425f489466aec438.0.tgz","fileCount":904,"unpackedSize":2398029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3UeCCRA9TVsSAnZWagAAoEoQAIS6fDz/TnhPl/RcWOyh\njqKwzcUZATKUB0JsLLLM24fRUfsmy3kqP95TYWu7pEAebiNYWGsAlY2Hm/wR\nN7kPlisaks0F5ARLfawORqvpxwrnb07Q8GjDAAywy+eU9uYh0CFjj22siRKp\nt+SMsFb5hQa7DhyXswyMQ8YCId3BJ0cXEdiwICGgyjP2FBM0XGoF6Qclp+5W\nZXBnD+HlsRkYTrrVaz1u/p2PuBw59SKwe2gUpQjad8GwCwQXGGtS8gwpixpW\nFEFCEh/ywxuj2GYFv3kcJ9BgWR2WyJHzAZMWG8vgbW7UY+tpbTGVKv+6fLda\nN9ysm+BETN9H1qpj7HOpRyV+YMCzoitRNPCUriwcAXiceQvnmu+2JFj6AUjj\nYNWdDzeDDLzrqxj3nou0a0Gh8919Fa+QqEEyvR/gdE+3pCyOgzMWC51vht8t\nggc0bNuoj4gADmMQo5YbwUCtN/IqU6K+grdrXPXDQh0x8dB5nd2rd3dWqKqc\nhyYmQIi4ds5qSQcHpRyo4nXM2E5Lf90V0mumS1OssUzgv1HBCSuTrAokzZHz\nv9/l0gPhXxqEmBzyWybm6KCJRc3hBuUI0wBxEezFF9iw77LBdEMeRu7h5q/v\nhDBK97Z7a5C5CIWotQ4JH605Bo7ZRkIptqsV8A0BsQGGmX4ZGLfvg28H4PxT\nLz6y\r\n=u3zt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK6AEoBD3oqTrVHhudJ3ryobC/hQh0OLAGguWYG869+wIhAMi30rtgziTyknL4KVtQAllLZMcADllGXjuzYqe9qLNr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.1-canary.1014.8cbea68cc84dc6e00dcf4827425f489466aec438.0_1641891714646_0.3566883733493502"},"_hasShrinkwrap":false},"1.76.1-canary.1014.2f3f7629d71aeb984af98ebb2e0e091fb2800913.0":{"name":"@sberdevices/plasma-ui","version":"1.76.1-canary.1014.2f3f7629d71aeb984af98ebb2e0e091fb2800913.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.0","@sberdevices/plasma-sb-utils":"0.45.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2f3f7629d71aeb984af98ebb2e0e091fb2800913","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.1-canary.1014.2f3f7629d71aeb984af98ebb2e0e091fb2800913.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-EqR3W34bqOWUsPfBt/PFAuI1hESsz+w18znTALBXaGdSnntUXyEKs7JO0/hhQ6If8QCGPb+YKQxEH8307xOgKQ==","shasum":"1f9c4402a82784f0dac54c27b3061554394fb111","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.1-canary.1014.2f3f7629d71aeb984af98ebb2e0e091fb2800913.0.tgz","fileCount":904,"unpackedSize":2398029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3VTJCRA9TVsSAnZWagAATSMP/2XQT57NwNvqirgVW9n8\nBZa3EmBrVseyImkpEOd4I67XzKuT8Fojo1YsfmfE9iB+UNRF6EsQOnf+yw6c\nDQuDvNUxJUA6aR49I0iR/MeYjRPowIxm3dMrAi1WVGosJJRI02UspUI36FUS\nHexrkPdFLeaRQo81gyu99+CzaGw6ZpRdAofkNuTW5JovGOgEyVK2dzF0BL7B\nclt+bn3LLwt+Txzl2g9UTx7UhaVzmZd1jKSnmv5aFPI7265T65/lnyP4YtZ9\nxOBW187UGRb/XbhB+bubFMhjXBMQbWh5/doeiotFzlMpQGnnSeG2HY8xlxWE\nr3XLT3gqwbBodQMPyJFj6KOoJO5wjRMwKVh9QIEGuLytkhcOc5JVnaJU8XEp\n2SUV9Nynh2RexrG4GosilMUtTYVZ5/n1x0dfhUabdE5uXlxuHYykdFdH3FtE\nyfU+bwIxDKYiaw87Eh47uMKIe7i2DZ63g5PIM5nJiRUfGPpAg4PCMVdsY6O1\nw37/Q9s7ym9vT0+lQBd2zQPZjDPZdOwJ0CE5rSa193IaccoioQn2EfCaBvul\nYUG+qf+UvVZqOzyLIehni9G+ni2j4wCo8w+wTI59NmpCzta+I9WrQHXQ3Iyt\nGVjZkcAQixwmHwGj62ezFVq/mRzBNceKlkx1zrh/UjWCKHpE3Nc7jABxBUGL\nGslP\r\n=odCg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwPW3PN3rSyAr9Jern2Ne/N5wrMMRKbi1QbW/FBmi/dAiEA0uZEGEawOtvO3eiz/Vsy07SXsP9SusXDGbu7AMCanWo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.1-canary.1014.2f3f7629d71aeb984af98ebb2e0e091fb2800913.0_1641895113207_0.07952691294192671"},"_hasShrinkwrap":false},"1.76.1":{"name":"@sberdevices/plasma-ui","version":"1.76.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.1","@sberdevices/plasma-sb-utils":"0.45.1","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1a45b2ffc4ebb3003d7015cb993bd8e6efc43ec9","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.1","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-sbKtoRgS8Cr3akslKDPmDgyU523udHqQwrkDbTXeX+h8W3EXo1tUJSLc6xHo6K/4lLUECCjbCWK4aij2q4ov7w==","shasum":"03fc57783fdb7f7c24d4a67e1200c842bfcfae03","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.1.tgz","fileCount":898,"unpackedSize":2392299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3XTaCRA9TVsSAnZWagAA2ekP/iQdLxQprtvgbWDV/nR7\n4geOhW5Jymcjjn+hKukaDAlpx0/iAcAQicam9BOWqHk1mjAVp0Vme+NbUIw7\n79Om7YsyVAvCtbb0suL3l1KWQbQB20aBYRk/85lcZZZK79QcGFcYxqpJt0nt\nXMPwdjy6iAf2Bsx4kHtgtLprxlpVPvUlMNJq72Uah1n5JZcHkTG8hMvNAi2D\nWObF3h+jYU8iRtClqJSLS6B5QskIDKvcMgUmmTXxkatRZ5zMcbAmfjszo7D8\noFTohGGazVE3fvLwaEcD50YOlKsRHDy9Cd/VXwYQLA8i1re0N2lnoC5FUonB\ndFTGWM0UB4lnJMrjjWjPt+wXH2KcIJzo9TQ8KgMVAlWXKw9Xi57q1MmTvvqB\nMMgAMaqGdFA+E3DAbOoapDXC3PGSN39CFlVqfsrCXc1gnwOLQVYFo/GVY5zA\n26ypftS/4Nrd4ysah5Gi5OP+QlilFhajRES1d1tPEeIwgK3dXt6+iITDcHf/\njp+kpeH9p8der5aygXesBoT4OEtBL90mIwNTa+r4w0UH0fZlGW9gnUDNEfpU\nKtJoiKPXud1cW6ZAdAe3dankc9+wKFZBUWT+bpZFU96M2aEcBTefG5KRFbTd\nAE4yQDJQuKNnxgu3uOH3rwNDUDaJNDC4zjCsrUw2xMb2bCGJOMvCGGYSonT8\naWHr\r\n=FDVu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFhg8cLP0aOx4PY/UoAsTOBvhjVy7Z8PAe8ABYbfzmeAiBwWX2DR/K0246NmhhjL1nttsJbFgvjSgk5Gf7xHwI3ZQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.1_1641903322352_0.7634245397252157"},"_hasShrinkwrap":false},"1.76.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0":{"name":"@sberdevices/plasma-ui","version":"1.76.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","@sberdevices/plasma-icons":"1.63.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","@sberdevices/plasma-sb-utils":"0.45.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","@sberdevices/plasma-tokens":"1.15.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"90499615ab0dc149155c32e50688c3948da449d0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-rQU07hXsyTOMudxFGm9VF9gJ4CrVwcRlk2A3RL75UexjOjh85S/+4UXxRNFteZ1Ok2HSnNfApGaoHltoMwH5KQ==","shasum":"cc5871171cfc3b2c0f917269d63f053905653730","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0.tgz","fileCount":898,"unpackedSize":2392629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ZNcCRA9TVsSAnZWagAAqKgP/A1yUcfTrPsLKSasZr+s\n2HCJUsQ8kOxz53GOdU25sL25A3plwqiQa6T5SlJgzkaiM9AcN6EdqWOXNccN\ndlK3eZq7npjPlMlR3wA8gZ/vwhR0T5YhW8TIvZZudF4UKZUDk1V+qGDAvJNg\n/oin5iICfuKK0olMy/ttzBy7myUHUY/h3fITPhCpE6a4MuEOG3FQodZHHQCO\nIL+ccpU5I8yeSX5PBvoWdJBuRJy7a9qfLenK1eBSFdYFiscWnyBzmdQS+Jrp\nqkVPNl4abf8a4j32B2nS0iTE4d8zGpNoBraR+yeRQ5QBelucUspx6ZGbGWpn\nhfcZnd1EFPi7DRBb1u/oWyuEaX7Ri9d7EGYoC3aEQIJx6ELB590Dc7n1yLc9\nP3UDfdidv0VUCeBm3MC+g6CNpwVLEymiqV4zKsGhlUttnr+xdkKYoDdvrn4O\n/Xeubc5KPHpGwK+zHABQ2K3uVMnnCz0t1mw3zQCWTR1Xmr2BdZHklc0sD7cf\nsw1SPwp8VeMNR/32j30t6dRqcWjf3AhXSSrt5uwhbCUEgEOtFXseKtBhv3fu\npuEanXmPLdeBbLKqZ/BNOqBP7O8k7nyjkP0qHlPPZDJfw+o68D6ksM1+OJaG\nyqYb/LqbVl6+wudDoQigBDI+sUDXaXXEqGyGPxKQwH9imNXVITbHnlH4117U\nB/fJ\r\n=rMMQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuvj9xmUuBZlnddUBLi4EP0nMk1fxvsPbnn7gRqKBwrAiAQq6TqO7oU4ob21wqe5NaFDwnWm0cYkfXXPGzQnXFj2A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0_1641911131749_0.885251187137958"},"_hasShrinkwrap":false},"1.77.0-canary.1031.5ec747ef68976beb8abdd9a396bbd900df6f374c.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.5ec747ef68976beb8abdd9a396bbd900df6f374c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.1","@sberdevices/plasma-sb-utils":"0.45.1","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5ec747ef68976beb8abdd9a396bbd900df6f374c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.5ec747ef68976beb8abdd9a396bbd900df6f374c.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-1wcmakkwUmlyTxQXjMPbu8rLG3li6uyE2gVCp2/GsIWbX+bZoG+LUhie5XohQYiX5/MVvaBr/whOPuL6ljZRug==","shasum":"548b7a77a8257ab7815969a1a99836a2a88e4b77","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.5ec747ef68976beb8abdd9a396bbd900df6f374c.0.tgz","fileCount":898,"unpackedSize":2401975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ZmrCRA9TVsSAnZWagAAwwcP+QAHvXBwogUhJP7SsejB\nvAIyvNVf5n3ux004Dr945rLITVfAyfQIAiaoftikqjqmckZzDZXZ6jiCy/Pu\n0M4iLOnp4daFkXJNLEytsa9E+ib0lzfMbxGdw9I6cnc83HQwbGR65HQtscZI\n14pTl/WKNFKGinS0hwCGktp+7vwjyYlKlcCRmfWwb6J289ANV14jF8xtezTn\nxyY4ObcnMV/YNy9zmMwBUlD6362/ZxhXeZsrFJ/utPbuNQ92mw245BWWEASr\nP7LOvdTn/bNHF3pKzm9Yqw3gFSIm0mDymGPFOFDoZRPanlJYn5gwdm8WhHOT\nupCAbjZQCWWKGwzQeTxDoneBngjbjXOckzwH0W5/unF6a/zaCYwtXomqcR1j\ntIq0sJHRDGv7MgnvyCepI3JEmA4/WqKxwgo0D2ktYaHg99wdKvWujt5KTjMx\nKv+gfsdHVOgUIdkuxNK3FaNj4S+fgZXNBknomS4p3Lw3fcL9GfK/jXmaFPgQ\nw/o22BV3QV0SHaw+cXqAfv0JcryejpOgaOfCvYaPvE4XN0Q6Ru6qawAJ1FTN\nVFbZ6QQObCMoEl0LkgZqBJ6QT46mtI/caFi4b7nVDfSXpYzH5PxHnIAeQyH1\nEG77Hin4erH7qEPpF5uWgyJIBrJCu83u+IB9qsCaKpHqEBugiNlu5RRZTrnN\nHHqb\r\n=hKx0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGf0MlSXh5vi9UzPJeHdFj/eDT6+BtkYwwOKFMwHMWXnAiEA+ENcOcfOJqcUK8KF5kEmC4Lm10e6MRrn6YftFaX6QuY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.5ec747ef68976beb8abdd9a396bbd900df6f374c.0_1641912746812_0.8280139085055567"},"_hasShrinkwrap":false},"1.77.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-YuQo5R5DowBSOjIkmQGdaTDU/Ql9XnQ5+LgE6IkHSEP+dhOuRe5Av+GkEqakQmXMptr3PJOB9s904pdzkFDF9A==","shasum":"b83596412a620f40130e9342f5cafcaa9b71b110","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0.tgz","fileCount":898,"unpackedSize":2404831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3b8/CRA9TVsSAnZWagAAhl4P/0306+TCGAP3Nve6tfAr\nFql8wqDuuO8sK6ts/a22aCMzlj33z0auuJtLRLH+ucHwgYQVuYeESLWFFjax\nvHBlwVpI/mxq9vmlyXoDMAEwBd0g540EAgVjpjVMKCEgZfjF9yI1cYVv6ePa\nhf8uLqNBpsRRAeo/cPP6SfPGjFeqFx5wdF1Ueb4PkPwipCN/V7ua4d+QNF3H\nR0WDRLDQ3EHzV0+i9p8uCQ5ybn+2VxxbgcIW0l1DY/sAPo7jdGF4HdhtTE5k\njfHeCS7G7YIumr9XzC1kJ/tAjLahRpeSLslEIjm92Odsth9e+JeJTx0vJFNU\nkuN1w0EvrR3WgLJI3qVQm02CqQKnvuQnVBO7UekjBras73VKYXni+vHkCtTO\nM+NOCaj/IW2jur/l9QrmMpV6qYYx/0afX6sf2MloNgpdbD4WQQeppFDSBBwY\n0XF4TwA1WpfLEsSMDjdW7hKDuOqU1c4yx/hYIf7fSSdCPFEXvzC4eW1hu4Gb\nZeSAabFd+V/rsn8sxuVnK8fjConkxnhrulsFVjiPXxwLKfCuHy+WSEwke5h1\nEaXq4eWcfCflD0efI7RLKDzysEEBTHzD1YXOjLMLWU8tpTJn842ss1PmqoiN\ncppbtN5tergODBUS9qIp8yAyePnZ42WgE+yT8tERsxE5gH0mZVW16+lVYtr1\ncP7a\r\n=bfuT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjoSeQmRIzEM0wKuSpROCidzcEDJtFG0kONBVAWx/GEgIhAMCqy9TPYDNLmbItyGZULgZFKRw2QajUwfEU3InSQaP1"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0_1641922367113_0.5865530069950327"},"_hasShrinkwrap":false},"1.77.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a1efc698d002c3026247918dfbf17480a572a0cb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-Y7RY9h85qaAVo1094kH1XCJYDf69yUxBOyKZmdwhsexVu2EFgm3RZGnSEeWDeKcoqRqmFZP97H6abk0jcnhcUw==","shasum":"e31f452d4e6a8a1aa8c9ad75c2436bfc7842fbdd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0.tgz","fileCount":898,"unpackedSize":2397622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3obfCRA9TVsSAnZWagAApOIP/0d/IenMmP7yOh5Uz/xL\nFMMOODIFuXFyy4+Z0vTNVhn/fqf4xRKHyAjQpUR/C/fyf4WZh0sGADluIMEp\nZXjEYU0/aVcqWL5b1WEOBYzq9AiyDFHNW1r3HT1RkBz8qoboOafRhWjnEJJ2\nVOwSkt5ku9Qx2xu6teVqv8tdAi0WL92lV9POU9g/vGW3zWbFttn+OrJAG2ln\nYgCiRWnWtovJXBbk0y5FUJh3tZI4Otywz68zsO2pjHZj9XztR9BDbAPsA4kK\nEEHbY/dqmH8z/hA1BOm6MxVSGLGayOjIy8ErWV7P8eefKWJRu4/bc2P2W01M\nWQCaZoQPJYrPrBCufzqTH384GIy63dqSgKR2t/MwU5EGo6xq3uCWw5idvdIu\nReoJjn43OKECteosbrpWOB0WxjXSDehckZJk8IRHeUO5geALBssU7RrmfO9D\nL3puPqZlRJTRB9jIygBGE1FqeMG6hmVsB1gsYoppTzrnu2ltB6vqVe1m/csc\nduUqO+7AtiXqSFlqHCcWL1tLYTPqukrKDU2uoMFfYGND4VKjELEKhKOvK/qB\n538E/UVNTnsYEkbip9Z+m3EnUdNEbTtYHw8yNhQq+H1BQodrQOWzTI8JnlsY\ngsWOmNlhnqAh246T0WqhFoePdZMKE/nm3Cwx5sw3mz5OTp+Ql4bwKIXCzmOz\n1ZUx\r\n=pfvC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtPsfg97SV36gRRLSdEAeJz1H9EZ59hRavG2WC0MEd6QIhAIZU/AtPsKKOwrupanLDXQ/66DEwsKuyusKpuKnFKExH"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0_1641973471522_0.9611907629124212"},"_hasShrinkwrap":false},"1.77.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e77817ad74ead92bf180bbaa5cf013379119ff69","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-bgJExKXvnWzD9Quz8EaIVBzgKm4z/oWYV2fcVgvLQg9KlwOiFfA3kw16AmZmTV/0Lz5Yyj6OTyCgjmDJdK1g7g==","shasum":"53e3e5d3c648bdebe02bde27586e513a5ea399ff","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0.tgz","fileCount":898,"unpackedSize":2404676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3qW2CRA9TVsSAnZWagAAKMAP/iXYV9hatx1ZA8bLxZ/S\nof9nhCmB1FwVWgTW4U9kJ/RUsCoArPdhv/CEwuQEZkkMkCBdgyc1i7h0Fw8k\nK3VgjhtAsrGm13z0byPdVf8XPdnSativJU3JvOIRXTFtatPez4jIYGf0i8Mz\nnXnDlQXayQYlH4R68OOGg1OW1kJOjVVLwtcejWzXBz/kX9CHBP2ZCGICjhkn\nXQNgUNlE7wH5nTEWzN1pdjIm9lsaCSoCRU6VeZYw2/fZkxSN+ba2aJooBo7f\nfd5OACk4kSk9Fc90PrgU356IW0ElISeI0AKa7OZ+rTtaSRlE0/kOc5pvsUGB\nqN/ZR+h5t/MnxR7KaK7hW2+vZR59Qjhm2DClR7PRVndcYE655tM/GCd4N0w5\nW2QYo0kb8CEnQKeQO36vUL4UDkEqPuh7ToJzwOxifvX2EO/Is4SMfW0SaBNN\n0besg9hkXQXOcGUZyF3H7sHjqAAClece+bes6W1t8S8i3DI5i36AIsmr4jWm\nmVcSnBDuI9X44detkk+J7usjoJIF2CYbPFikAMabtexe2QQyVU3hV6U1xTs9\nPKKUtKCqf5jBzetvSMGSJSsOLA4QJae6bBuLXljlm6dvfGjHANk/7+HfjQuH\n1VkkLV4itDmn1sseAJfUAk4rth5tqyUZiWPrvXILNGIuZx4CEaIBBlhVuZYs\nkcpn\r\n=XtjT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK5BrxKrmOj6be3qXhBbDLnT8ebAshTmVVPmyC0db1fgIhAKnmvRUiY4vQo2W+sBGtRrOVshjouHDmTQoed/3SYC1L"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0_1641981366326_0.18813044412996827"},"_hasShrinkwrap":false},"1.77.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bbd8f4fd8ad770e354be4518dc79c7706b33d795","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-NMASdqpmAkHvK9uuwCq2itOQNLX6eYSnQyfH7oIHEwX4S6RRICobyoHvqG7ghC429IOAARGR0pCI77sus10elw==","shasum":"d8508ffa3196b66860eda98ce6b238efb5465e5e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0.tgz","fileCount":898,"unpackedSize":2405146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3sMOCRA9TVsSAnZWagAADfoQAJZeBJPQInDwYllP0C3D\n4tF2S6kESast97SArFWJE1HCKi3aX40l+NEMHZJGW5/RABYRezdWou6q7i/Q\n065jfUwOcpT5moifR+OfdlotVqffZgR5XUmaDqg420kPsJYwYoJ0mgbMUELT\ng5yPjEkD2DFSyKQye3BlIlTG+Qbl+h6tCbIMByz66xLtpeTFGRGY05uZ2iU2\n0xdYn7mChzSSK82Ac1S0IO0Mdm4SYZzqB84qGU2yLI2+agbxFe043FMR/6qE\n61cX9m+1yYpwoCwXP+DzeM2/4YoVwqplJJCT8hlDwyQKcw4nZNfZw9DFjw14\nEs53lQAdsTV5YUO4MMvI3mqwSDq+B3d8rT+ezuJvgbSXmt7BFBQq28jvg3Dt\nJPc4GT5j1LloakFBohSq+y7rpt5fsnoNGw6Wibh4EGX0T9AvH5QPg6FnmCM2\n5MQPiVy46t8VIhec/6isfDLx4DLWTRspLJD4LAveR5ztUajsXOBdVZiY0+ZH\ni/XnnF5tOlMNoLH8Izkg61m/p0PAX7F0oa9rmu0C4/e1xtqgvRpt84pfnk3S\nT+lta4Ee6jVOze19e4Elsr4YL6Xoe3GCG1M4hji8YEcCmBqD98e0J6W9HSX5\nWVAQeztiksoDBel1xmM5xevrlX58YDZrFXKHDGyxTJz712uWCaN3sallM+Ac\ndJdX\r\n=O7Oc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDna3erXAe/yClRyxSXMq9J2xF0Q0RR6LVVnL3Ko1AJAIgLqEdXGR1NaF3TfwM3u+QRySOEhWtwLcc5h8QSS10s48="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0_1641988878449_0.2586789476601987"},"_hasShrinkwrap":false},"1.77.0-canary.1031.6b0b21a472757e157f3ad9df23b715d2fa03a9e2.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.6b0b21a472757e157f3ad9df23b715d2fa03a9e2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.1","@sberdevices/plasma-sb-utils":"0.45.1","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6b0b21a472757e157f3ad9df23b715d2fa03a9e2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.6b0b21a472757e157f3ad9df23b715d2fa03a9e2.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-XZc6HwxA5TcnSjBt0GTpqHVM9RsMKqvnezZgjzr7tCeqaR2xWdU1ncWIZyZBlfTrKfq/+EmQu6hZ/24CEMU36w==","shasum":"825de4ddc96a4ebe23c7640f91db7f80b7b99a6d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.6b0b21a472757e157f3ad9df23b715d2fa03a9e2.0.tgz","fileCount":898,"unpackedSize":2407314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3tP9CRA9TVsSAnZWagAAHVYP/RYYMKigIvdLe8r74hRW\n6PRmdpXRYW3/Oh8+l/uLA6mQ8C8aAa7P3BFrmIEEqX/29K1kEA9lsK39ol8n\n1gsIiyKUO/aMdjPNG1L2BHinRmf/WMvgvGli70TueECiS85qLsZru1aLwYZN\nNeVRe1fEkM093NxI6Gr9v7hLlD8gJiBPQ/JU1HcVD6ybVhonF1FRfr7LovY3\nYuXsAZPX7wDRgtND59ZGJa4dHXfdLqmSgYhKmoU4jroo7ptdFbhAsx1oFreL\nA7OWUcKrYCxB7cCNNYHmURvTMUZksBu0df0nEdv8M/C3cx+sXl0TLhxblV3L\ndhDZm7ebSrYHtSeVglcfSjxqFbBBcSxRhph0lues+HtOmyKL4gmWZrCVHFKa\n9q8CsZ5bp782u87AnhAb2Rg95aPyqCZVonxAXEqzTbfWDSE+BUJ+gYNY2cM3\n7ebY5CzkNxPCSCJp7PbxLubnb4XTFoesVyNLzAQu93ZdizXOrvbMsgInFizX\ny+tKgOfn24qWYHh1MbU5Ecq+v2yy2VJU7EgSnbnNANAte7svAa0BDumz3bmB\n4y6O3PwakZGP8NpQYLVOTaFy6K+Ko75kQk/NU/dRcQXbtWHJxdVAMg8CPs4M\nbtYSIixexdgUcQ8W22/xUnf/nH+l5ErUllVkMPm8gfGdRzpLYmjt7kwLPYFb\nfsXP\r\n=hlQ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9ABBYboFYH/h4OVCamKEph479ri9hT1tXr1HAeP/SlAiB5xWWNRM0Vq1vYEYFkpHWXaApsdJOMmmfn+NooeVVG4g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.6b0b21a472757e157f3ad9df23b715d2fa03a9e2.0_1641993212869_0.24949325189978788"},"_hasShrinkwrap":false},"1.77.0-canary.1031.27e10d508558a52cb4e50f5f7c81b7e7a1acda40.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.27e10d508558a52cb4e50f5f7c81b7e7a1acda40.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.1","@sberdevices/plasma-sb-utils":"0.45.1","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"27e10d508558a52cb4e50f5f7c81b7e7a1acda40","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.27e10d508558a52cb4e50f5f7c81b7e7a1acda40.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-guxqcQY7NzwagLjIin9xa0/Gc07IRCAtRtxS52OLGWl4DdoD5YshLk2DJO1pAn6u2okin4sFt3oU+tHhmLcqdw==","shasum":"c3938c48a3764932ad0618209cf028a7125b2d0e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.27e10d508558a52cb4e50f5f7c81b7e7a1acda40.0.tgz","fileCount":898,"unpackedSize":2416267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3vGLCRA9TVsSAnZWagAAuXIP/jm8bUHVACEhE7TOmRj8\nAfi/N4OrztSpKq2VtvwivrvSkNmztlYDW4gIo9e0kjTr0kids1JCNU9zj1zl\nXSaHvk8hU4I7Xw/5JkWznroLqrKqNZMw2TXzRqUtQxt5PphSy7x8lh4s8ium\n14DXstD/D3Or3s7zRRIO4aVBIDGLDqeApzK1pPTRyxr788w+6cr71UXPRrKJ\nn+Ua1Cs2xjNr761ETfJBb/IxXbiuBJ3IIp2AcoSIVBwk6MTetWgcn2rYT/Wp\nFD/3vJpLwGkn49kzXpKLDsBgDSlhmUsnMOy20XkBumN4g4RcbUgsifZ5EM9C\nBFOdU05C4ta0jp79zPBKZxH/cZrV57wxrRe/HBfOl1E5/0LvrWsU/V4sYV/S\nOawvdz7BbCVTSo2y9R2+mX7fxDaEe5gs17N5eveOjKU9jjROo8dDyCAfzJ5C\nfnPYp3J+HuTwfcj6XhD/Ioh1KnoPCFPgQ393Xox5P5FtMDDx2yj9A+zKpigc\nYrxPrCG5Zmi47VPoC3QsrI8LFWJojoOvqLCW1fyf+Ha/QRGuyhDw+uVY2KV8\n35pgNfe2ZC+kol80dIjQnVrYYGrDLCpt9Q3irYmTpuEYpC1XPxTz3EDRMm4O\nAne0pFMIue3IjDidJgQxNnOtl3Ge7e0mislFC6wnDubw9avjHMf33u5L6bpz\n3vd2\r\n=WBMF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9IP8bVdzd2Kl9O6JqppJjLnbOaA98mrah10aghhRv9AiAwnJieNWOH2eZ59Pl5HMSh9A2t6NhHmKSYcFUXDCslJg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.27e10d508558a52cb4e50f5f7c81b7e7a1acda40.0_1642000778992_0.1222060847615658"},"_hasShrinkwrap":false},"1.77.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"722b84c3fa1c9e1cf094b870a54c381b27b17d00","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-JwBq2HDvcnFdLJojx00Ui6tF+XZVDHfLHsGeIs/ytEhZzzgv5cj3qT76kHfjGLicOV6oIUMw198JPWe8QSW++A==","shasum":"281af88a0bafef9c66b360951a127e3d2d164d92","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0.tgz","fileCount":898,"unpackedSize":2392773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3vv5CRA9TVsSAnZWagAAXmsP/2s+1OFsBhIppkfM6hV3\nHs5QClnF4yeve+EqTq6LfgjF/ZmDAKxF1aWroWSARz38oLEKIgjstvrcFs5X\n5ulTSwWis4Dr610klyZX6n3wlvj/p8XJiRw9vHqq0U3DGxaCOrSdVa/XTtie\nqzOQK5q4DL2KgoWASOg1bd+oZXM8B/jkLehm6WDsqfL4MYHRxQZeQgre50iK\nL6WtPU9/ccWOs48hF0L05a2YnqAEizmBSgO/H1JfqjxrXPvTf+iJT5yRVxX/\nHWFeMIBLVKyhNOJNulxDbYDqb8vIQT3K8f3WseubjFXxj2H+nYG7Yw/Rbet8\nMSa7CeQHlAUqaxhi/lNX0/ZipHvdp6c8NksIfIlP1BxWx7pNXZOvvDJULoXm\nndplisQpZgrE+Oajfe0oehFc00FNCOpbM7mW3SMORT1oDOMKQhwrpAYm07tZ\nrNEQb6n+67coHcb3Yt/0Iw9vW4z+okwiHPczQAtA9pvPnfYULWfjfdMnQO88\nzLMQdV4aRY5xtKCApG4tBvS6IpK51JZDjrmebfZ1PIUbLe6rw8nvXeajgn5V\n0d1j1ggWsOGeJrxwG4IKJgwRI1y/lJLxqVgUZL3AkT5wLGjL2EYu+JPK6civ\nKuvt83/5U0wGy2NyXtC/Vx7uxwD+6jHk6Q1jy5wBy3DjCeSb3oDP62Kje6Ju\nOV/3\r\n=s+aK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHISerRSz0cW+Y5qPmvEMQ0HgW0hrXw9FuJQbmFp3p5kAiB0VctjrjVw1LUrzT5czXUnI2JKDlv77HALPedo/ucbOw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0_1642003448857_0.30134588721522815"},"_hasShrinkwrap":false},"1.77.0-canary.1031.1a509bea264a6bb97a556424d8a26aeef6e54d0c.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.1a509bea264a6bb97a556424d8a26aeef6e54d0c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.1","@sberdevices/plasma-sb-utils":"0.45.1","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1a509bea264a6bb97a556424d8a26aeef6e54d0c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.1a509bea264a6bb97a556424d8a26aeef6e54d0c.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-eiZlyB6IsZmlXLUCTMCd7UA5FkUcyDZQ91L2W95eJwqXZXwUZl4KyCoaKSzMu/pRkZzneJZVcZjTqfie61g3ag==","shasum":"04a5169ca1cd78ce72f53ad31431c4e0d71826dd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.1a509bea264a6bb97a556424d8a26aeef6e54d0c.0.tgz","fileCount":898,"unpackedSize":2416128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3+u1CRA9TVsSAnZWagAA2MgP/iErYfIWzMRBoX4DvYdb\no2Skj/eOamKGaRKg7jeq9plp43Af4pehOyD/whRL/qkOBKfAcAiK411LD37c\ncIEcrKx5PYkvdhCndfRaFWVTBo6/9VwKWjSaPJT3vIc/Yt5zejJozrN4zqio\nQLFp1u1FS/8WKFIiI3Ke2Vr9Xxz7AgdQ3HY9A8P75D5PYtCZBOqGWnpXBXEs\nehxGeNUt0aBnAqLddYSEIZmYbjPd5r8r4/pLQ86vDCzZIa52COAxhHtvuot2\n+g3ppwbC1PxlfistZmFzq2YcOPN1oaQ2rPX/ywiMgq0itjDTE/go+kmxuDiN\nVqtj6/ktPECTOo0JvYT2WsDQMQz8BkN1VKVMCBzKV4OBu/ClXF0YzXOKWn8a\nvbZfuAkPLJEHvtuJO6FwWIPskTUG0rGLmHODHwUZ/DV4ig7u2q04rBxmzjEl\nBvcrKs/Nm5MMXXEjgFTgwVifhfYtVCGgxXFrCqXz+EYp+oZuN6sPJtk9Unlv\nXlwKrE53wfJ4WAqICMZdL4fhoiV78LgpvyF7TPOiV+99smIFtB6v8oFxTDq0\nfanroNvf/imN1F0/cWwowbyd8Q+bJaqzP1/z4p3qMFOSFPiZ3GzYH9ZxP0cB\nvyJGIqkv/i/CDhGjQFzmdkdO90w+RkQhSnEnOpTfadEXWmBuOxpUp9IXCnwC\nZrRj\r\n=KztG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPlp+L1gNRefUlARf+hXGgL6D32ykdxsm5TfOI4UpWjAiBxPSazNqbwlu9uUcWzgxF+0N3YJTUDiHpXntOvtCal8w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.1a509bea264a6bb97a556424d8a26aeef6e54d0c.0_1642064821078_0.7609040240562848"},"_hasShrinkwrap":false},"1.77.0-canary.1031.9b7e39d6b76300332a490b16d6df55b1f80fcbcf.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.9b7e39d6b76300332a490b16d6df55b1f80fcbcf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.1","@sberdevices/plasma-sb-utils":"0.45.1","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9b7e39d6b76300332a490b16d6df55b1f80fcbcf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.9b7e39d6b76300332a490b16d6df55b1f80fcbcf.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-NPpd1caEhFn1AqGrndmhpDvK04LacyPgDSegdZRMRga8TvzXiFuUa+FF+Oib4rZMXdI6yAcylv6/ldrHmwPTjw==","shasum":"896e1f442e43aa4619ebd69a95c76f3e0ebb3fc6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.9b7e39d6b76300332a490b16d6df55b1f80fcbcf.0.tgz","fileCount":898,"unpackedSize":2414307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4AQyCRA9TVsSAnZWagAAouIP/1umo2hWyXHLLKbBi6E+\nEDFiJ4ibH+/DXldJsNjvV4XquTTPCAuYE5GZyzvxMINJ3cAezcXbwkxXqLix\nFGhbcGDZbIjKRhlcU8zSlo5fUth43+AGrLRmoTCTLfsYI/ZTUb3TRuxMFuv8\nJUeqLA+CsuIFnUmVR5znL5Vj38bOdcBjBrcddpX1pQVceiIm9jvduTSR1Bfo\nALMzlYqGyzo/skNFweq8HcEqxtbR9RyTqSpG64xTQM4gHu76aPZGuiT9uW2q\nY1ml25du9d9zhKn3qK8cO4hyDyn22qPhUaeg06c+FuKHPJyhzHbyTodteWCu\n9Rf7w6d8nkw0D9zz0GAXKOOvPOVvRVYXW2kC9jMDpJEKYLxUG7pc1LR30VYw\nLh5QAeHbvH7ffcg64gS8Dnb/bzZ2vlXzdNgwEq0m4v8jTCVr3aEVm3VG8nGD\nnv4Cc9UdCYDBdbqIZ09n2VUSTBQuiqr3MouJQawEsbB/a/Q+kAWMsCqnptcz\nwp5M8UKbpVUaZwUbd5ONgwi2IrpNINbIDbqESpZgET9PCbTzBUXmdvb/aRQ0\nIjTH1jPGP44MTbGycXTbWALvva8JMfMiM1f3ng9JOXHZUR+h5Fhv4f+E9noY\n4N3ca/USHS6dXc2W6sc6ltejmusokMJt0IKP6WZ00mA43n0GG6nt+R1q/sFM\nNImf\r\n=Fu/S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrNRcHOMkiFDDULAr8pg2ahP8F+H9b6JqzVkzG6zG5rQIgUDw6zFDomt7yUoi9oX3dyKZWY8RrB9l6CpH/zKN4APs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.9b7e39d6b76300332a490b16d6df55b1f80fcbcf.0_1642071090531_0.0428213479019115"},"_hasShrinkwrap":false},"1.77.0-canary.1031.d7b83a821ad45d41afa89ab6eb7f793aa1af7e2f.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.d7b83a821ad45d41afa89ab6eb7f793aa1af7e2f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.63.1","@sberdevices/plasma-sb-utils":"0.45.1","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d7b83a821ad45d41afa89ab6eb7f793aa1af7e2f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.d7b83a821ad45d41afa89ab6eb7f793aa1af7e2f.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-PdGUeY40p6iUD4szUg0mgF5qLREJby8rjO5v8EU9NSbkk0vo9if2Ux/dQcfYCnWtRs5af0/fartCyuovtRkDig==","shasum":"350d3b4e96230a185e3aed314a613745aeb118c0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.d7b83a821ad45d41afa89ab6eb7f793aa1af7e2f.0.tgz","fileCount":898,"unpackedSize":2414307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4A+ICRA9TVsSAnZWagAAkO4P/R90SZlYEgiaSg+IFO3G\noWHrY3Cxd9AQ8DWT9ipyOCuk8YSV/MsDpLR/YRi3isA6J4WA/jfdBdodsuQW\nT3GKqmc04g4jvjmm9u9L9isC0eivbQqSK3WwvIVWy/GKu6dRBjv5fD50VAF1\n65TrFZri/HXlFWpBQUqoQC5MMEZ8Y6nj++IahtDEtdUxKHYtwjqKzfWBoCvq\n/EVFxpC1bAifM8gvjImb8JIllXu1RvIUS1ClUdjs2QGQOrwbTo3JU1yae7EG\n5PPZkoswnY6VFCXWY7AI9aq43JbxPtLwY/N2cI1xl1Ub614j1TMMMzgCfaez\nbpiF6DCRl7rTJ7Zkxcg3lg31hvl5+vVknccqHRGgYam2f8A1Xn3jF3TZpasX\nKaRdZxMxrC8Ir0Ir1kjAKNuunjrNHSbqe/UyuMuVsXVQUit+tkoBPaDBaxKW\nkb7ZIsJFP+bW9ifSkjdrBMRwT1m8z9VSZ9T3OkRZ4I62BQ7IsnCvjjxSnYPp\nRU6unNbk3L42BwudNpMK97fqF0wc0V6VStH8D5smRrrJ6i7S8qt/bfVDqt/L\n4T36UtzbnMIdW43Yh2skHLEOS6KFKeh7pD/dE0v47ixV67PWQvqKPWCU7Bjl\n4u8U8OLkkoyQqZ4vP9NvOpef+cln17BTpQu3SM5eV+9iTQTq/XaFmVBp+sQD\nGRVK\r\n=tZBZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq9doh+mHdc7pM5lJ4rZ3p0m3G+Vm+wlhCx751GkVJMAIhAO/j0bsKaeMqlNq+VelKLkQVeLuGETkwGMW6+kCGyNy0"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.d7b83a821ad45d41afa89ab6eb7f793aa1af7e2f.0_1642073992005_0.4302313679658838"},"_hasShrinkwrap":false},"1.76.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0":{"name":"@sberdevices/plasma-ui","version":"1.76.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","@sberdevices/plasma-icons":"1.63.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","@sberdevices/plasma-sb-utils":"0.45.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","@sberdevices/plasma-tokens":"1.15.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b50246f5c3cfaf5176c75d130c074d2b66d193f3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-ptw1TRGeaIe0EITlncreecA+jWWDpNMBtmtLLTjlWRmlgavzz3AerdGU3C+cdL3k0fNcB6M5Je1mxxycKcDsbw==","shasum":"5403a103bb78640066b5ebcc00e41c3c334ae685","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0.tgz","fileCount":898,"unpackedSize":2392883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4BZ5CRA9TVsSAnZWagAAVJgP/ixY7lLJPCOiYRKuMvDC\naSv4Lr8byqRDtA/Oa95AThM67ZHOd7/YYay38mlPajDtguwGttiu4tkIvZHq\nKA17zdP9KfkCmRycixRhne3NFH2krhwYqIXpIpBM5KhO+P3VQipAnOqqO2mN\nLml19yP0jhhfaGhzedsWLyt/OYcmLmW1maIC/3gQ0+HmsHDPoq2buHzFzCba\nyWP6GZUMZxLMS1CSerpxwEjlhzpQzXdjR9caTG3v82fMRZOP+1IqWlx7JFyn\n1segWRktDnjnF+nDCvPxYN0IszdNB2INptM45UVbJodHjjEhFzTuLv3QwwAt\ng3lHgHoGQilkOB9VDDUjiJqowBKD5wkbfp1rPCzvs4y9c8yU6FjO85OPv1FM\nSjFnO9Qg+RjGHf34K1ysErOPev+TPOwGJWQMIPBAD+CZc5hh6185RL/5JE6l\nGanxiDtkZgypL85ivl5cLtXmq2MWR3IDG1WsphiXjlZ5IDMc6qBxnTvHpjFt\nq3ZwiIyq5HpT9+hkvWRBkvFviuDqlBs+zT587/ZJz/YVgMOhv4D9namvuzPV\naGvanM7+N+JAzJk+SRfQdA6IpP+XaKJ/HkOelqNAD2I2Kdh6ZirxJ3Sylv+v\nqwWT/NG64OSXdlbLjJOGsoM7IcST0BGu6qiJphFdA2s1R2z/D60fMQtUcRU4\nJraz\r\n=HODd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxR/QTKfc1Ez7PXcKzpanUG2zMDEuWK8uNJtq6E6limAiBSlj7EzfyP2/jivCN+SE4381v8cg/Fz38oFVP8/26ATw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0_1642075768935_0.9020138009534417"},"_hasShrinkwrap":false},"1.77.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.0","@sberdevices/plasma-icons":"1.64.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0","@sberdevices/plasma-tokens":"1.15.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fb629d359ef02922885089d821f8d822511fdbbe","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-MfxESScHPqpTmlWDZYHGjbZ7kF0KYelI8O8Dr27FzClzGn7Avl957iz4pQgQKxJVxbA6jOYKZe7YJxgkx5AsGQ==","shasum":"69160a1a0d2c6e5935f156ebc15ab1f8eb036278","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0.tgz","fileCount":898,"unpackedSize":2392773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CRwCRA9TVsSAnZWagAAaR8QAIhSaHOUdNNDLR8CuvrZ\n74a3HTp8/cKjfQR93sF/M95QvOorNwBTGE/Sq06MgYf4TCE4vCjX0JSTphnA\nkXZJX/gavlDJGO11XwkVW4Q3zCK1CpW5zCedK5QRhKIkkiRk5BwfN0TGgPUA\n63o8CNNi3p6//No5hSRSgim3FQ6SXxuSJGoYvnUVpTIGVDnfAZOmYQpCz+rR\nP/uKUbfZlZAC9oLICpkoTs6RG1UUywh8T/Yuxbfz7AeApkhTQgxJrJc2VQus\nyjceKF5DLXQZAqP+NmLIlbQKATqsULZukAgwSHK+KasYlxz5U6x+ZZyVRkLH\n8TOXlvm0EPz2ebq8HOWHncuBemURYKKqQVu2jTqSTtq7ZeUkJZ92dYcfdB6v\nl8clVApqkbhJD3EJLpbYCPGBAfT93FN2YIaRLy6NaHU/hP3GCa8pbhzGMHTr\nfFoat8E6tOOxgQ/E20kOXFGTuEpcNe7BMKBNdIrLjPEHLneyL4Ov5GSudrUJ\nhrSvXAMV188QUVbl6PPeO+gY9xbMSOoh2wtPBKOWHSQL1rl4UNQB2IPpCJbM\nadg5Qo24iQD/qQ1fmS28CpATwsM0kxoL91ZBMQSovkx5bTsmZMVcYLRdbFWG\n1K1XuEdJiEgnBZRVgSKL8SaqnJ11R3j3MxTLr1+g0fVI+NW3qZql5ajQPesT\nmJcE\r\n=GJzM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAIue18b5xnLX5U9Wty94Ff/x7VPH/xivwXPgBrikTVwIhANsL0SE3rvCcT7B3tF548SCDaXLrzbUT+iPBjpWqnlUF"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0_1642079343859_0.7418280951413581"},"_hasShrinkwrap":false},"1.76.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0":{"name":"@sberdevices/plasma-ui","version":"1.76.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","@sberdevices/plasma-icons":"1.63.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","@sberdevices/plasma-sb-utils":"0.45.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","@sberdevices/plasma-tokens":"1.15.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"767de126f33086cbf07a44c7cd78ba2982a1c138","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-tOc/AMjo0iFMNNpb7FWgG0Zonllk4M2KU2qBYy42J+ytl7UTzXs82VD2LJ6Y38k7/hwI3feN9ebP4rPnnZNRSA==","shasum":"d422ad0e1c0a3725f690218c7f57c11fc7ba1aef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0.tgz","fileCount":898,"unpackedSize":2392883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CgCCRA9TVsSAnZWagAA22kQAI6N4xWgWVk/EUXbFqbH\nCDWwNcdG1Lu3fmpnEVEx33w4Rn0yQ1UgWJrFYOeOxfq15N1QUl9dyh0R2jDg\nuEJFirnvZXdncthBTlMUqd8kkA7mMwbBYCRigIyu/8ks88P8ENwnedIy1pq1\nCZCVHRyB+x+ff/cc+PnXlNh5DRkol21ooSyquD/DQ3Y9KWf097vJBkEqVRv6\nCfxxoYjXZTiTqXIk522HTLs+KYkroGIiTkQhe4NUss9rTnhk+RJA/e13C790\nTUyZN5GZVNoAiHAXMGubqTV4dvmuE1NcgMMSEg9B/VVmTfGMeiRAf5lZqu9D\nlx/voMIxgwBTnxxBW48XUbK80qlVf8ARWWEGsarbH7519PUlAsbqVJ+pnwVn\nx0eQ/1eMeIJbERL5fDNAyybszCfP28gVCQmur4BlkJdjp4cwMgj7Mz6cIRX3\nIXuNMZZFmrap0dCD63X7JW7pbssaujvGD0EWmshsk+bCnaCCd7Ah7T2qZdyH\n3caKA8//+HYnEHiVuWnETBvp6FgKlCEuUGIbFhArVSO9aHpeTA8llJQ6xm2I\neDwa3sOrG3XEzsSiOhXJxYKTgWjI/qQMg2ETrnRGFHsimv0ucGNlxAwIISCV\njEaGwTVJmAJugQnSM6dr0T4Ercgj8iQE6rn0SqfBCvKTASmhws78JQDgo9lY\nVNne\r\n=Qzvd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm5gYQEBul29og7R6wTn0wsTyzX73XFo3xFodfn1p3fgIhAKh378p/hlk7HtytQs8QVzWco8+bUmODt4DMojXU0X1H"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0_1642080258560_0.4479365607531365"},"_hasShrinkwrap":false},"1.76.2":{"name":"@sberdevices/plasma-ui","version":"1.76.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.63.2","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"386d3de7a9cfd27ee131b1598f01883e8ce285f9","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.2","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-eg3jKYLlwYnWYOnev8krxRdjB2onuJhCkAdDoQzVCZVNjUbVHu1Fiht+itcOuWW4hFz/Z6oT99PKCwmgcG6aHA==","shasum":"b9585ed3c08e35bffd3c660e32987828ad462a88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.2.tgz","fileCount":898,"unpackedSize":2392781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CljCRA9TVsSAnZWagAAyogP/2OBMO9vhflY110/SBWI\niOLdwJOyqlxiDLk8ekhhlII2ChK1+xoltCdrPmHdvp4vRLLhiy4r1eAj4VC0\nDF7Vhj0pdgi41/FRfFJlde+ZAlLCHZ7LtOWHjWb3HiAr7E4XRugPWY7vBMRF\nCLLmYrWl2arJ99U5bIkNxc/brx1b3lWEuQu030ONrifaeFrLjLLGVNQCXDk8\nKft8Z0NCNprNl5vdUUeckTjipL4Ovxm6f6whemlbGkTB1UuUHkKeaNGC68UZ\nHc/e1Unt5n92oZyRAPus0c9T7eBYzMBAt75zBrpm7d9mLp9tzW6z8V0N9Jsx\ntNe1kipIxTHhtneKhP3QmfLfFV8tDo4lySGVf3l+8aJdU79riDj4lvCZL+YG\nf0Tic7AZYfHh2nIlubS5F2vqym7IL+EoT3KVmxol6qIPO5CqIccUJMEd3zlG\ng+8P8S0s8DD6Apk9prGH5PFc88M2KKy0M7Gqy/JIqWYEsMlwWMTkQnAgrpFJ\nexECt2z0LNhqVUzp2VGj1JTR/Nxl3//AzO53NeYRcfhmR2JrZMom+EMJT+fv\nj5E+RCn8Z8Iej8tcfTqgPD2esqUTDhpr7++n9x3YK2UfNzDN1iAv2mYMz/AU\nA5X7khEWqNYwGOT7js3JlDvroR1k0reUbkkoi96bKTT8rBso8wRjs02P418h\na64K\r\n=W70j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxMX2lECGHzaJtzgbsX3MHes1UBj25J/NVT4v5/NixpwIhAIswGoayS/TNcTGnmXUvADhS4BhsGNLzUSR2WB0s9lwU"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.2_1642080611377_0.215285017715664"},"_hasShrinkwrap":false},"1.77.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f05f54339c4daf1e9c43b120cd5117e1f30ca1ed","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-z3F2dqqH6m79u2DqFIOujLEwbtZkHHl598/+Y3Il0AqLqmM7h1SDlUo5fw8ukYlzhKf5JlVz18/fkZxqd46Ldw==","shasum":"c3f0a0b7ab8d5177112f980a9c4b3d6fcdb282aa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4V+SCRA9TVsSAnZWagAAwPkP/j25ozVdF3b8W1GYgRvq\noFsEcYAzi9lhdBIu3lkSDoSFzl9FV7srYHcPdz2LFJHTPigzj00AcvIuHFpG\ndf0Clcdan4yGP9Q76ltB0bjQPqrwUQpG5Pf1sHpqFKT3Cs85fQF1p6jWmUu/\nwKrSVUiEs4ksrxZu/4KUvvvMLUcAXRVFYDREi/tzGDtaWP7uR2cztaIM+zgn\nuAgukbtFp7BB4ixGm98UcYRnZufYHUI9csKXVow0NRpIG3beczl782x8ry+S\n+Rt1TBSPF4qVh1rgfNQ385WmhK4rdrp4XID6QejvZOna6BP0Z+pCetrc2LTb\nPTpOtiZuY7qWJvT5P1vegUsCFAh42MVCQWr1mbuek65N1bX3D7ZErEgTNIqJ\nGMS1umg2VUUoKH8bJOcwuf2Nj5r9iY/MupkepbFAElZCKuxz4loQ/XLE40ef\npciAh2JJixHaiB4fzp31tbj7e697euuzkEC3YLMIM+lMandtEuNxcXbgHphZ\nRc8Yx//eI7e1Yk8p/8j5I8eW66hqoUtitVvbDiKE5hfTk8RWOLDxGsSCZkxZ\nC93XIMFPVcT//UEWvapB6O/J0KPFTiodtNFi1M51lfHHMMZ2BXYbogUhKeYJ\nXWteaQShy74jsRBC6+K655FvURbuDRdRlNRNDie2nEh2vqmBvzCUnWaGJQyV\n8G3W\r\n=wkNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0MrPx0uxIorVDvKM/nCCAPAqoy5SMVPj6DMmjDk3VqQIhANqDSjT4cXIEbxP9YHloCUZJ9OTlk74PrXlJslmPbb5V"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0_1642160018020_0.7386713179015814"},"_hasShrinkwrap":false},"1.77.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6923789e5654cf6870cf2756eeecc52aa9016c11","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-3RuzqTe0I7XS2k4Kf6jfGFBE3Mtm9A11I3SJt/ucNHZoO8rD8l/jvhrdNqJwFtVHAEIOla4LzdIrU7JVeAfBWQ==","shasum":"2342f7bbefae85c101f6fd6785c3d19d21b4ef33","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4WdpCRA9TVsSAnZWagAAEcsP/3VZow+nZvYWrofhKe2G\nQH5qQcrnkcVSophEtjem0ICJmtlV9phrgVlQFPdPb+fYv7lIdSieBrgHMrvx\nii868Ur9ezaLJR/OLVZtnallBAXSYtndwpgYFhbA7TdSjYm5pbZ3zA1SGBES\nccDrBKK9JYkhdRTtUSQDr3WF7Z+ol8ycqaoYvvc2t2EX68qtJJGHNoNVrX+y\nGmJVYIbk+nURRBIddhlbw+9hVjQlH+fYmxzTCiqVTF32qS57TMWbrc88IJXK\nFb0Q+JvfRERnEQZTlQwU8Q3g+cm5vM4L5RmiZ/06T31/YikXwX72cKUIlvEb\nNqHPSxkDPLRdlL1JbNrSv1hPnKzEoM9UZb+JbcRwG3DpxwgmUY2XTkVhfzwR\nYZixWD755tRZX4AcdQqmzUMW+v0DOB33PcBIBSFmH6sZ+WqevSDEuss1Cnlp\nDWsf5IN7gn9MCcNz6nwOxgImidFN8Od+YTFHIPfHUcgE8zxEyMPecBq/hLO9\npryNwmr0mR5rKLGEwRMtr3PFTnDYfREbnfu2KMn/NDW6E61j7mA87ioLptMg\nDm6b67+e1oVJmhg0IeCTqS87sImhLPdcfQ/yyXrWvbKa19Y3kN5TJtCVl27/\nmH70KzSSLOPjAI2e88nIQZgQGlxIwEZC78ssB2ekntZZlO4T7wdYIgFZCqpE\nuEgv\r\n=OgjH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDd6qb7OCTBt3OvpYmFf85ZG7lUgBwZxOLTTetkFq6PHAiEAl2KkAaJCVhgl2LUUm9QSzaBWzcfZXxZixeuSBFljrr0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0_1642162024982_0.743359355472669"},"_hasShrinkwrap":false},"1.77.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"562f31f534eba22dc326cdc681c95f83cf1bea3e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-/Vrdq2Zn8PrA5pK1d++Nn2YaNn/7w20F7BHJLvXAiAVeSsYXDQ0Tlv2XzPMxNHHhAaAvYvNm1AddDWGfzcOBrg==","shasum":"2f0b8e2e74e71ead4a413510705d9fd6afce6abc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0.tgz","fileCount":898,"unpackedSize":2407709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5QibCRA9TVsSAnZWagAAGgcP/19ARYDFPD+gIaDb0H2f\n5vNniNyfFAwE8Lp3E9MqSveB2tUfKsfqr9aalvbBx8GEDSfLxKcLanh+LX9G\nG1ePBhcR9LAMvzqlmA/FbXvtVo/M2culM5X8wOEREORBjAZJ6nrIQVJ2hiGO\nz4RIeAkIUxxV3L0Z3XZRlDmc00YVljPcZmMfF/fcsLNSIm/uaIuP/UHk+usy\n/NagewiU3A7iM0XpDZSGwemeKiYuvLaTHj3AjWSLV3u3peznGDIZAxZLFe2H\nlTsRwbnoecSdUf04SLxE5HMM7Z6yJZi7NcLk1mX+zLHM2iul+g36s8PC4Ujl\nPf52m7ZaBcYT/hqfKXJJB2UUxwEpbIWBOgYN4E3C6Ezm/Z2uGRp+dnn07E5A\nUYEdbKSac4NXhj7JcqF5quJfwRpYnme5dtOMLyEK01XIwLcndQZWpVTD3M72\nF8T1Prqd23P+6nv0FR+gTmMuF0XV0SCWH9is4hMiz63cnVm6dhf1zFtwVEyH\nlfaDu6LGPckU6suqeEJqeBD4SnD3Tc6QJLh5fP2xdGp3mK638knTKAQI5me2\nnkmvEQ95weh8pjKJHXn0FFM2ghB38jaQV4iA29TRz5vAcyfHDvxCgjRTgjnF\nS8V8rOXEHpwyRzBYAS66a9ctd3MiL81wDZ5ZMpFhw549cSsuppUQCAUThm2O\n4d/n\r\n=s51r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKhS9AUaXVwp8j19Q/p1olLU1E9bzlfRPOYxeS3QmpQAiBOhnrbsj5XA2Ocd5sy1EpyVftc1besAS434UTGzCnbQA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0_1642399899493_0.04126011867734691"},"_hasShrinkwrap":false},"1.77.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-6SrjQT1JdZzN6CiYjust9RP761rh06Z9v9zuGgDrb5Ci08/0D5GdYrUa5hnuRs81ydCpFDvlNHgc1LrzAvffaw==","shasum":"c426b1b05cdba95c6c431f05dabee20476d9cef6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0.tgz","fileCount":898,"unpackedSize":2407709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5RKZCRA9TVsSAnZWagAAeD4P/3soso61nk6QMFeQFp1K\nKpJwBXT5j1QnPgNsPC29WcR241ivz3YN15P1NcOA0g2Zd7ncxst9twBaYnIT\nJh0j1CmyfOw1ShqqJyOwJb03aACm1r8C6xBBzsIqjNtdVs+7kkjcMeoICmuz\n0giUppm/suUDzAGV3TkYAw1H3CRtWcZ/0dmmx9MoNqHTxipjzPHDa26UCas8\nzcz4bCw+4S3RvKmtLA21LS/DfKMd4glli636tQhk5zJMMB6rkMRfZoThlU5q\nmF0Ah+uWjLziYtywwQblP4fLPB7jXtK6h8BeH/7sc+t8wX4VcOx9D++clRp0\na4kOvJAY0gEjAFucn0ibnpxvM5stugftUtTRI5x8KT2TKyBzo9u+mNY1dpMi\nEn6pFK3u+eWijWNa22EbWmgMwMIpdenKKqw+5JKpxKlqMwsFv8/4OYN1RG2C\n4XWEfcPe+ScYrv/p5UQyPllj1yI5o81SF0UeK3lorg2jjPJ+9npojqgYDjkR\n6fS/CypGCAFE9t2iHA1VVDl0u5UXy7Txaf3cWdLXGhUOMd9NUMRza4hiVdg9\nC1A8N27p9CGhBd+8kY1Tl2zx89AOMYnKymo5csQ46VF+r2SDtgBg0fuzLiWN\nXmesxCnLA5wgDXQ4LKQ21QGbuxG2OfuBsjmQSDwrHDGA8KEcK741iOOlNlkF\ntHmE\r\n=YKY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDyAOoRh02LsM1WHkGJCrsUckS5T5XGnVXetDjj5BJirAiEA9huGgE1/mrCTybmpBQyjOIxYP89Hna8H6+mYrv7cnkk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0_1642402457250_0.4478451980236431"},"_hasShrinkwrap":false},"1.77.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fcfc6c621e64bc17a579c6567415d4acc54b78ab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-G3fIJEuAzQ1hxzyXNrIBJoAxWyQGnMK8IfytSVWc62N6zoYDit425hShH6IW0Lj4vWUMyDIyO22OPG2vaqToYQ==","shasum":"1ec4f89184023be83f90ea8847c4c77eb4a69de0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5UNTCRA9TVsSAnZWagAAQ6AP/2pIy8HkFXv0tdFOdP68\n/j0gxFHgJLmJDEpqJlRpdK0rtoALWyxOBbObSu51XxHxIlKmDJxx4ExEJt+i\nLzo0+cVCDUFoDy+jAH/xVLziOg3FU5OkzP730Hb0BhsuqOqJmJX2evXVg3p8\nfpJhxgADuj2/AasCTakoSSCvk9EgdQTAzpUIeTP3bOMoq1aN2HY1daX9FoMg\ngmRCVjMvo3Dul3B2n5QcYGIrXYWSXeoYe9CkWUS14qjgtW7AEov2rED04VIs\nSAoiNAaXhRZOdNNzmv1pF0MIyazwHLT8TuSf4OxJVpC6HdjQ391D4I2TP4I0\naf5pXo31Pda1ERn8nGOK96QbCmvFsBJyOvi6lkpTlyX+gcrvtRFzxEa5o+AX\nNfOyXlOdHdqyPaNfwsLBp6O/hMAtN801RNS6ciJNZlpCg4eYZC8fRgdAugs1\nKxDUmV2AN0cvyPqqnKoYhTbQltKO2dqRYBJh3lwOwdVIKVFtjDYvYjF+8NI6\nv89BLuMk/4LHxBNsM/59C81HFKye7rpi2V2DR0HC6XmjraoKiYq7hIKMc1d5\nVFocM6WwJZJ0WOMjvfxaHCRwuoVeYTzp9503Z+5juspf5Okqerd+siIsfd5X\nn5C67AJwXkMFA4uda/CNgOl6NwYbjCY3WuiAaUiHcQEuCES4PMdgqOMC7Cjl\nAj0j\r\n=nAMk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD54sJDvEFHvSg/4NoIpXOptgIS7dzwVPKNZI3KwINvWAIhAK08uE44+3zj3wWclwaEK2USUmhBPR3rn8Y+4YckRmUy"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0_1642414931163_0.3782951950774096"},"_hasShrinkwrap":false},"1.77.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"04ef34ce3ffd86d730c3b03098bc226b9813ce3e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-NyjDxWA8jeFCJ0g88ohQlxH2TVBoO87JEGl2aljCvAf2GHkh9/kFtNyLnJrH/B3/mkJ8aR1E9Umn2RmZWUnaYQ==","shasum":"30d1add33f0b09cd9cb6504c842fb319b68a3d98","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5qUQCRA9TVsSAnZWagAAgQYP/1Xk2YAcufJizONI2nya\nAL3eN7jsl6HcoewC3XEMxstSWONdn/6DG88OobgQW7Co5JWnr966sec4Oh75\n9tKHGsqfNABi6XxTMflAzEE1V5lzYJejtZc+ejGmNXQ7EbWlhU8x1VBJZlLB\nb4GbZZGIq8cAYf7tVE+huJcBnAY2fFyZavulFe9D/2uEyTe0doK9euO0cyAZ\naFS2zI15By2SlJPiXARhvUbPW6Qhm0wxnacs0Vx3LvUs5ynGLXXWQJnn4Htq\nKyvcTQAuiCgq063Bh7xIP3Ucg6EK0VC23Zk7vl/HdzDRQMibqORPAgu6M/79\nIb68AnItA9LTwmZaDm/mXHLLM3P7FDYOxnqprooA+8lJkh0VgBjU899KDw+a\nkG2QxzPQmXKMFxPL4YPStnNYWceGhEulI7+QIW3BID15mbO0KYR/g+gxVsFH\n67MraDjPgn4hKpxaLh+RS0kJxfD1uAziG9uph4BJHsUDbDATDxskppKxC+jQ\nUupePBYoiK2UCC74bDPuXYASTInDA58Zwp1+ucdizRYe6STCpt7eVV2bo5In\nEpTC+WT/VuQjAmUE24kgqpV/IQeksNVFa7UHKIlNTbFCyaqx8Cz9pmRA+TUV\nMkQPdHhc7sf9iD7L2EbldI9XQR61miVEdXbdvoNJnK1wR4MfBfeWF+flsSdD\nzX6f\r\n=vXeF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmJSWLRDIxiAOIkc93qVorPbVoTZuHE2sXSk39FoctIAiEApTuCbFbu/bcIFkaH4lQjp9ZXll4AQSZofjcVXvkR0Lw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0_1642505488184_0.24096348230768982"},"_hasShrinkwrap":false},"1.77.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6050dc4730ebd6c1076f9505c32be018e201fc61","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-L9/pRyRQzMF4WS4o+cW+PHSBJqqUrtJYZpbCYAY3PCRaif8x2Fv8hZ75lwRfxs1RS5c2dWuC2iI2fa4gKBT/Og==","shasum":"5f6b1372d8252250fb6fcdbef18f4d294e6c8287","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5rQdCRA9TVsSAnZWagAAUxIP/A34/g8Z2k0uLlnKCfqA\nyYh3cUap8SbBam5z7fdaQqlUWuCNH4qzDMwWDidU84AsmpRcePEg0YHZJLIw\nVFCkhtO988N58/s3zF42njYYXHlS+JRuNb3gRjssSi3vWG5qiAKzF4+A3BgL\nxltK0VzXu4xPH52hZpotuYhX4E/LXRV/ITF0dgl3adU6YJu94kjFjZIe+w06\n+/6ZHTizwXsb/6zpLk71qC79poaAzJ7v8RqX19bgD9+gdQncAeI3dh0gG0oN\nlONEdlgl8YsKcu1REp9dGJ0uuDKJLOinG/2kTU06aWzquUYuKt1L+xzadpWw\nQbRxX9UQPYIZmQ+h9G87L0wXzyRGCRdjgYnBDysvasgn6CumYKW4Wf+RPiGc\nPTcxjAZqAq9hXGC0wgGF2EjG95qWOvEReVDcGVOT2qIjRafXEBCMciVXomqW\n+MNZ6wk3TeGxIRsxmBeCrHj4rx93OKN6tUGaYyJNbnPSQMQxRapfMViafWyM\nclDxOAMdxUtCMwixN0Dw7HrJNPhRTS5IYeeQe/vCCjM+x54a2E8caPDVHIlv\nZYxeRZ/UDUIokUuLthe7Y9sCWBZM1C8L3zlT6T3rCmkxTECw0T0i1/Gu2KQZ\n9iuSHhJQGK8rNI3TbajNj/2qcjvDiFUhI16H4932CCZ7AD4RRrqYRw5IZybQ\nQnLk\r\n=l8Pf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACD15PQkr66WjkMvTh584tXG8l4v+a8LJl3EEjnPGPlAiAIhbnmhyHXtrT/IJbKTGljdUJzTSX327+RoByaIEsf+A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0_1642509341356_0.23671905063178866"},"_hasShrinkwrap":false},"1.77.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0","@sberdevices/plasma-icons":"1.63.2","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"deb9f266f833b342b540bcdbc889b23d12014775","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-Kq8zVE0OGl19pe4vNVureqInDEOya6fekZuJO3ClZIv736D9CCIB9GcrC/pav8BSQjUQ6BxvNobzQLxGuDP+Dw==","shasum":"eb588823621a02fa594f5ffc713c9e5ec041fb7a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0.tgz","fileCount":898,"unpackedSize":2400973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5rsGCRA9TVsSAnZWagAAKcEP/isj1Sdhln7O+1hndB60\nvDR4Fg88J35HkYdeSgTLxCKH4GPxBwNojBXdv4bHO1cLgpu9wf5zD1f72aen\nCyBvgZpenbHMaQwMrp6ehOdTWRAD6Qn0zBBCyyKYW0s0WcjQq/u/5sV7HI6f\ntpqYwJTiAGQornS4q2y3l5jGMwY308KMKNZ8oHusa4mdjLYDkrP4zv5RGIQ7\nofQVMC1rq6FBL+4OXNADfkNEpP7k7oWkBUTylzeig1z193EV3nzof1EsT1Uc\nWBZOAExH918AyMUG3LpwA7R6pvhOdk30RGSOwzKJVGjf85ZVDjw95SMC40uB\nGaIhkR0phfNJ0wgLHEPqm/aeRgzhLtv1qJqJT6clHBb1ShyTEi7V5p2D0vGs\n7sG55WjXEPNOpk972c/kv68H2WoCl7fnaHEUemHByKJ7D5NdaW0FWeUKWD1I\n8m0PuwMCdYhSiXarvzJAcL+TDdylvBULJgg1IcxvTI882gddvEgAg3dlXSmA\nBH+z/bAJAVDZqH2LiyBfWXYeZ5FjSvRenkFW4KDf8sLNsu1Dm7V0MiIFBvCP\n+E6ZR8Q6OoCZUshygS9hTHr/ymxZ78JfhmjYhSnpdR8tyBnJwkwszy7oXn0q\ntlVJ07a3ry3sN6y2av24+WghVud75/Nwn5NBFCLU8MXZ4eZ0YhVBaYsDNs83\nNoWT\r\n=2qLB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5xn2isBzAYHXHARM2IRr6wgUeezoAG4UqfQXUOKXjWAiEAmJGQFXP4QwrY7Ii27rnzUTa3ytCyzFNZveyQ6e/HmvA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0_1642511110195_0.5206783163101034"},"_hasShrinkwrap":false},"1.77.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"79de2ef9b8863cf268b299a9cc975128e4cfe7fd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-kSf1AQg5wHA+/Lh9fC0vXlTDBUoXgggs7V12dL04+xQfsmlXrLtAIn7GUc7Ume5y04j3UaOHLqQJZUqy4wbeVw==","shasum":"88c23c5ea41358769fcca8ac3082f8e5681509e0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5r+eCRA9TVsSAnZWagAAESQQAI4extRj48K73Hao/s0Y\nCxYDnAwmy0UgwKq5xXCpPVMZpo23bbZn+zLykzrOfw2OZvg6qVl1nFnIPNxF\nFryuh3S3gHuhu8iXNYu/l8J0XT/3Txuad22eBp24AG8clmJupdRVFlIGGmqb\niZsprtfph2pQv9NXVHNvgoL04naunozfj32gU7g2i59P9cfDaxDvTEBfkpCs\ngI+FLelx+uWdjnDQOtUBMJ+mm2yw+lRTUdp65MnanzD8LSIpVXKfGN9ZoO7p\nwsZshW3dT4eSLroEEzBKIASZG8MDfjK1zv0Cq7YIl065QaVD+uVLgEYFbdJK\nziFB2OT/PwxRCjVGlX3m6iA9Y9ycYx46KiYXiqKvNFxXF+ntsVJANk7aQzm5\nPexmG0Dt17rtl1M2l9S76VUI2WDCPvtPpZBGrvl9uZ/MiT7MevlZwm/xnff8\ntSkYLyAiqO0oB8/Ha1u3fcm4OJGUAoZOnSw9fY+Mw5eMZAesLYpCTxPv/3wC\nPH0/Zv4VnxZU8QM2uLa7q6gRQZPPAqVFHZlSaVrwOiqwPVkb8sZr8/lUlzx1\nya7MaCRL5UxCYmZ1Px0efbrSJReALIy/vf05i2lqs45LqInRtFV9nHyYeC5q\n3iMLvBs6F3yGQ41jVcTRAgSyIGELKmsW3nmX4DHP5dFd9eTYZQiGji926/rR\nG8vX\r\n=V73A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlSk7N0jGi4jVkg9LNJEgkB1f18/lChoAUvS7PGRC3fAIhAOZSrQbOrjeNBMdW71Uyzl5wKcc03KhrYjm+LRANMEll"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0_1642512286552_0.01947924126976952"},"_hasShrinkwrap":false},"1.77.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fa100f6355a8986bb69aa5c9713b9e84c4f49e61","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-wK67WOVzt8f03zKWoy2AGini/HFKvObc+6wyF7FtwGW+NQ1CXBp+QQulj27CDpbwbLjLSVfAlME/PqQyCNR5mg==","shasum":"c974b6fbb9df2b000e104668d86ccc02e2cb348d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0.tgz","fileCount":898,"unpackedSize":2392796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5sIQCRA9TVsSAnZWagAAl9QP+wThZ9Egv9bgXM93Ur1l\nbe8L/vjuXsuVNNS5hyzhmSQ/Js/VmVVcuTxi21ptVDqZSetSlVJign5l+XIJ\nKxPR1ead2cl1tVxTYTdV475PE8+bVOcH0vnxBqfKUPHeQin9760/Y0kyWjGD\nKK9vk2FYXQL41yMu3m5ywxMRlyHkvKtxawgvLtF2TVDeGxFvJN1vcptBndXp\nXVztIoB0Buv2CGLoV1eLtty3K8oq3lQejbh+j3UmswDHoIzzRGPv6rk3g/aR\n8kA3LcjCz9sVXL0A4iQ+ZXl/y2UQZMtXqAMYPeeeqjCtX0FVtu5qbSHbayjS\nvo+CUJI5NP5zaqhCm4JGtLQLj++5tlbVhLwYmVx77lcZatKe/XjqrxF39bb6\nMxo4aevCWQWRmiz6TxEy+CaAgXfzQBvEbc4AMlHlMROr37vfGJulhvWMYbH/\n2QJ84ykA4AMNrbiUvQ7pQnamUvrEZfej5S0FtJptPtPVVO0i7/9f4SlNJQpU\n45ceMzrJbNilre9cgpgzYNr4tUuOtOgEuQig0JB213F1sdjL1uKz2031WDpI\n3slPcK1tHzlKspyQkJdjTAQ3gr+rDqER/OKGHCMD0NXeiSQdGbaxhBTDgA82\nenS1GJQOUt9Jo+nS7cPeIH84/dS/ufG1DGCjLzqY5x4dRc0V+rIzdSskoF38\nu2qb\r\n=tD45\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmPc8TImXtaFGcpnhIsaBK3EjIzkadPnIyhed0wTmTkAiBx19u54xlAb80Nvf9XeJvv0YprsH7txsdLulesutUhtw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0_1642512911630_0.8073408705760079"},"_hasShrinkwrap":false},"1.77.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"22df173c8ec75edce279e19f6cfd45b71605d0c0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-taNXVPAwEm3HOsNxmjzyvc8Dc4TLeUX85stDpxaKXB4jWatT4VLrk9sRSBOEWPmkba35oWuYij3a1Vl5kgyWTQ==","shasum":"571f650bc5bbf1e1e29b6174148cf3a8b168ea3b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5s47CRA9TVsSAnZWagAAXycQAI16PEiLfYH+82F/Os0R\nocHSCfJuu2u3cx3qxkCb3Jz56qvo9PiGE16oPV+7CnOWc0OBcRPJBCt6yxJy\nDFpJfko65LU2iGSPWZgzUgZi9P8Mp7HQUaCyVUHCT1mD5HGg0YRIswtJSeo6\nd7zvH0FpJCRrkuO/QwgbnEerdBc1mqSjRbpO7ITpy3lOTSyXOuTv16VMbna1\n1FACvSjDDMoKIUoLxpsz/Xa3y22ozFHipnNS5T65QZeF+dy3Y9nKOdu/uHV3\nr+SMgvIG2siClaO5KgXaRYE/UTQkV2vKLCNveUqIt74idwyJ9S74GvF210vj\nlQqbZPu4mrWyb2TXf1hZmUIl5no7zZieKRYhQv4JCyU1qufEhRqf0jx31jPN\n6cmJTxXkd8bbYzjzm96YUM744DKmd23zgkS+0mpiNCfna/yvf63HfuqH71PQ\n5KSPKtAOFsqlXtY+Olg2Cl4w+uz0TQ/hVnzd4Uhlkv9DLY9ajRMgZcVVkVYW\ngq9b3MjVgEu2RE/kUNWkBV3Mlvose5oy0jFZLw3mzBA+dBvpqkiGLtIf8K0C\nz0iuKU3BsW8HALyY7nlB3rKIe7K78eLavzXdDjtQ1tpKdihsDL/GbGxriVcS\nG13KSSBp7KEowDSnxhJt9wwTTFtodzAZStRs1ImOzD98xOqCw620/MwPRhn3\n0meC\r\n=7UiG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKR7zo+eGfj9OyzNvrvRT/+uk0lw/sChedcGc77FSYzQIhAIYZQ0rT5JscGVcaA+ODQeEnQNdO0wq9bFvH+N5tW9RD"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0_1642516026105_0.4419339073474893"},"_hasShrinkwrap":false},"1.76.3-canary.1045.f7a52b5141941bb23433d8a5a536414eaac79f6a.0":{"name":"@sberdevices/plasma-ui","version":"1.76.3-canary.1045.f7a52b5141941bb23433d8a5a536414eaac79f6a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.63.2","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f7a52b5141941bb23433d8a5a536414eaac79f6a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.3-canary.1045.f7a52b5141941bb23433d8a5a536414eaac79f6a.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-zPni6WCZ9ZHN4n+pRnArwj24uF8DCuBenzzrWCmvbhLgZ45CGfbkdSxK3RjZdBPsL1CRjE20+unll/U6posOIw==","shasum":"fda7f24bd5262c2022f20d0d527110a1efeaeecc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.3-canary.1045.f7a52b5141941bb23433d8a5a536414eaac79f6a.0.tgz","fileCount":898,"unpackedSize":2392771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh591GCRA9TVsSAnZWagAAUpYP/R5dW517ElldPVB2L55X\nggsC6vHoXSdsqbdJeOUxxLX6zOxBlI3qSzbNzi5wC8cqTvzBrSAt1AaGzfWt\nVXKnpfw/8gfYq3YbVu2LmQl3HD+bYu9UhjnALA5YR+Slmhg2/+LFwcOzGjlL\nc7Q8kz4zkz0oM/VGsw5jVe19EQxutkjLB4FMiorFBthry63mNS7IgB9n3Ugh\n4x5m+iCztXLwqhirIhPABz2vvwR+YhV217GT487cYu+fINTsKR6u9NcJSNNS\nfQslP1ztSmNCyRXI28qeU5U9Li2blg3bkB+UJ8Q1vFrXs+HZy/G3rUxsWDVV\nPoQXYc7HrrELbu/CVFhWyrulpyt8sC3Q+8jbXOpzhhQO1s1nP5tbCTO8Adgz\na/nud5i/wh2GgqIMWdW+IHvBHGDClk2tolLp/MQE9hKgoUrnEoOA/nl/CaB9\nd6hL/c6mgAt3bfrRiI5jBEE2uOELOiDc17HGvbXRNuo6hvSVJsK8sDDwf5wL\nxlIXMxKzv9ig0aVwR5NxX6hIOE6kvM72MnZDshQT0yK4l55KGW17Oaryhe5P\nH+wDTUHeKutfDz1WzZXaBCHmWIPEjY4Bf53BAO9hlTbE0AJ5ySrnOWa7phJu\nZQo99vIVmGaIdYHqY7ExBN3D/crU/PXlq0ikI1MLyRLSOw8M7+GtbaGeoV0i\nZavc\r\n=q/qT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPk2CabT0rfIE622bHPWc4pLnLL/oB0zjbvKaxUGoWiAiAKsEnd3lCyI0tRsfSEZ2nRzelsQmCyJHSLfxhT9LVfBg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.3-canary.1045.f7a52b5141941bb23433d8a5a536414eaac79f6a.0_1642585414152_0.7564657948954774"},"_hasShrinkwrap":false},"1.77.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e192022042e7182ead1ef78aa5157aad377e2837","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-vxuSM06r68HrJVLe3ecI4ey5creltale0FFQ24NQZO/Jppm61wyzWSqqwoiwNoKEZbD5QKStEomZTzBLZVLFtA==","shasum":"c23e2694bde425ec9e81fc18fef1549a87803ab0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0.tgz","fileCount":898,"unpackedSize":2408023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5/i5CRA9TVsSAnZWagAAweYP/09PW4TL5uTUd082MDCL\nK/unReHNXdVGwzcqyNY8D8y71EpkB6RAet0eDtLGdybiZPbqs8rrKzYAoQyA\nF48nu78fpEcBTnUgmsZMPtJJrwroYPBO6aVvDOHf1+HHICEMeoequlRHp3IA\n/anQT7rx8jytbKZqJCk2bhFDkWk5EH7hFUOU3OdgJ0tYFHOyDRO75I2YTJ94\n7r86DP8e8itQL7pL9Ffft1cOct8AtwIxJb5Us3Oxm2pn/PKQFXp2x0n3+SgN\nZh6bZKSs7GDQsZzj2gbFDLxQjcmdyraVKuyC2yd6/A157tsDJwm0Cj7c7fNw\nuWSKQ69zdKqaA22lUN7SVPJBfnMN+/jvrA/2fT91PGXmB3wQ7s+Ie/P78aOf\nS2fDEsG4zPjvK/s6X/iO80A+V00p9eqywI2xivXAjAqG3VGiOgybaM4PX9ua\nHMFN226laPDdjywPzb4xOiUQWynHrXutL8KhsclZTY32wF0awinZ2Tna787Y\nmnbmWHZJ0nAM88PYve14KtP1ztCTbo54iZzn2TiYNxWpSz8QP465a00Qx1iV\nmOoV+1HIvHrtFnBd82V8KEnmXiExQ8Wcv6nFCIkDFmG9AKHZ/U74PSORe6Zu\no5KzXzBAughAosOuZIds8FLJFqVYJk6wRQKVHc8oYi/MmXU9vJjIY+ZEX9d0\ngnH8\r\n=A1dE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUxtfKZ98mamKnlaOH3/hzdMsobZKJRKNFW1GUif/xkwIhAJiJiazbjeKiVkY25sd7dq9FNAebtAhDxfInbm8Pe5yb"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0_1642592441129_0.5580351882017245"},"_hasShrinkwrap":false},"1.77.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"00868d5c29210073fbb140ef1d227eed5d18c822","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-RqltJd+ON+NSHK+EG6TsCCU6SplMI4XWjp7VuWT+NMwUpEd3R8KDoFDrsSAuNhgTAvOU78sBTLYNW6ZKWAH7uw==","shasum":"4d971d03a0a8698c75e0de2e896374709ae308aa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0.tgz","fileCount":898,"unpackedSize":2407901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6BEFCRA9TVsSAnZWagAAAC0QAIWC36QwLSx7kz7sJ2gG\nm0SaSEljH3jl25DQZAOrBi8rtZhMvxsJal4AX4Q9ae06mmg8ayfsZFk0iQsm\nxRDp6KksPuujLiX4q7SWxzFFrmVIXq3sT7m4Gky92T/s3pUKEjxNvRQrpwrk\nlCCcDbsqUxfx1AGe1dRhthd/yEDu7c7lJrrlrJQc5vOT7UMbJEdSoCdRh2d5\nkG8hEXoPvJjmhYDyDsrQBPEoomBZd6wxRGiy9oK4+fcNUx5Fh9CLltopNXsg\nkKViuqELa3F85e+o3/HhlT9LKxWQgYDn4utGpEp1aMeuo/Das46B/VKrz+pT\nEuCo/lY4BhDm59HKczOkRiwXGhZvx0Bmt50gYJc8MpnEe/NYGy0Q67PwQeq1\nCPPop7u9hkXOdMdm7ShyWLX0S3WFZWxuCCrvsfx+LFOBmSFWinwPKDq9f9RQ\nzyGHTot8k2tomN3yut1IvgKTrwSRtSlEmZtmnfUBmT4YvDsbYDQh0HvgTD6l\nN3ES1GT9jxgPMj1GszXEdkDytBCwfjyBlVQOoX+qNlfFU+r+WOiF2x/jSj0b\nI8IzElqGLVHzg2gfJ86znKy8ZUSxYARuBPzh6mm9H6YEhdHB+00OYkEzkIJD\n+iKcWFCRhAv1MPtHlF7lSMHRKDwt45ylS8DsXw7idyORIAMlUGyr+ZboTSjT\nqD/U\r\n=K5am\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCoQID8Ppytm7BiXSzHgG73Q5vW63nB47NPPlTB1dfxwIhAIhhBF4AP4ZY9zvkkYmTP1HdlRPks1JkLraseVg9mb9G"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0_1642598661046_0.1338905626492939"},"_hasShrinkwrap":false},"1.76.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0":{"name":"@sberdevices/plasma-ui","version":"1.76.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0","@sberdevices/plasma-icons":"1.63.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0","@sberdevices/plasma-sb-utils":"0.45.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"53ccab2285e34123a0c96ff0686e14088421ce63","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-Emx+AyEbW1wRNOzCbJYZIXer0QhEK3gdUO5l4+1tbA95jLQLeCregM/f5HQWUL/mCdNDx0WBOEORbKYC6HDEwQ==","shasum":"1b10b7232bfd6959a5bc1fbf1218cc893fa2f1c5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0.tgz","fileCount":898,"unpackedSize":2393056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6Bo8CRA9TVsSAnZWagAAaj4P/3UZi0GW2nTEI8SoYZXr\nkpWMwKNBR0Zi+/AUTD75Vi9UuzO7p5ShQq7DkYwZ30/gJXif636A/QPQadTa\nKPztqm8pDXZbQzww0hMzlFlpsHEknebUhArGeWslMhlwGo9ICzEurg1n8lY0\n5YIHuLkDJnyfjvR4SdjiIjlvKo7Wt5VHw46/5V2JeN3KJTkqK++AnjwHqpIj\nN0t1ZtQTSrWnCYXvQ6bXus8t3ZXsn9kTN6tJJ9uQUqMM/AuvF9Mu7FKIiThy\nW7RjJ9PCl4yByMqhyiHFX7TNlDjCDPqDVN4YmH38eQ42aHxEw9Njf5s2JPVT\nPSuOlIYsE/z14be/xDmFOVtKl75caB77tc4mvxRRdK7qdEWh9Qenm91nqP6l\nz+1CWayDVx5UcmJGdr+UyA3tFpSosc0nIiY64OS7Cd6HMnyuJepZ5IQn6xl1\njTTDtTETnN/XO7dpDmQjtL5RsOFkKxDXuFurwKF+wIUyILrvW+crvmmpn63s\nvzmlfIJfDqyNTsookCyZzxEqw/JaYL9QD+yz+U7ISbyM/T0MFnbgDIXYZ+9h\nI47vfU4Fku6qGKbwLc19/V6QS/KjmIAS1/QJShJ4RYuUjqrZorNbVCTd76zE\nLwvbJHdbRDFV8h5AZwEODoLv7v0pYmGJdKvT41V5JdQUVMhXIU9U538RfERi\njk5D\r\n=tyYo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBYaz6d1cuBnvPzZLewGIGjzR4tmZ+Q3DcsQiXGcNWWAiAmRgJvFuWvwReowShx+0nuGBb9ruWC+Jo0NGwmLdB9KA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0_1642601020735_0.29774368311862"},"_hasShrinkwrap":false},"1.77.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0","@sberdevices/plasma-icons":"1.63.2","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9713a84f5f685b5f488eba2b80894f0e8058283","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-+aAKmKzYjlcQfPfIhniOrtj3woD9+5bTu0mjtzyHyiR19PJwS4jxHTcS/OBRFQKFww1M8MOuVDULIF1RA91lvw==","shasum":"08ad7fa9f8441ab7eaa7736957599378b23e499d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0.tgz","fileCount":898,"unpackedSize":2400973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6CRXCRA9TVsSAnZWagAAUHAP+QAO3fkZqdlr7ep70Qec\nT8Csfqb04u8QeWwydlrzvb5txREkOVNYQtClvPIe5G5DIYXN69lY8m54HHVu\n14rip9gbfTakbGv0kthoH3mSGZkhcMLY7aAt3so4xPTEO63q7JE4ltUeOZcu\n44fKN/EhtS6HQ6ZtvLNDxvPkl9cPjnASbBwDSlR2ipRJo8edfJoZjbEQBN+1\nJufS4TOAfgBOypk4tMnsVOIcG56X9HDNGUoiW/HKKuBQ1BFoxqYikMY8KjF3\nqQIMqW1mxuOV661nL+Kn2HZykD0+gHkyFbzeCHjyYBHi5ysXSRibOoYOjeP0\nGWjSra6pY+h38aPIA0q3Ya4vXWK4VhSOfYsw7NMdjXTCggmouGfKJ4at0Jj5\n+LXmd8NpewAxJAqSSsXtejCwBqavq+I88BmJmc3DYNCB596IESum5StUVPno\nMyy+tWrVZSinaRl6QnL7PNIWGQ/MZ+a3Tzh9ASdZvW6kH5QT96azYDjcTeUh\nQP7ZyqQ5aBHXUb8Fwl3QTxU7rrnpchAaEvzzBQhS93WPh55859MFzp0LiBDu\n2o+Bgwkc/kaoGX6lJDkEAbKZeNi4EDO7CT5MYXmFAepUOMV+RRThv4KP8+KF\nqaJxQj0jjoiIjPZ0nI1J8K+r5eQgvYYfLuHTGT3awG+nbMYHt86nhvl8d8o2\nVaCD\r\n=785K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbRaGbF7inkENAkiua2C2OmEnyf/XlZRQYntMRmQOExwIgTUrSBmZHVmukPBA81U0ZNaCgqSeqhhLBndoJeKoBbR0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0_1642603607398_0.7475669063165595"},"_hasShrinkwrap":false},"1.76.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0":{"name":"@sberdevices/plasma-ui","version":"1.76.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0","@sberdevices/plasma-icons":"1.63.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0","@sberdevices/plasma-sb-utils":"0.45.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ca5a43940a9f880302613bc6c479aa60b4c8e882","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.76.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-AGrzC586fvSLzLbAd+K/XxLGUUO8uZIdel8puaKoUiuKflOGYXxSR+F4QhaFZwb82trwYq9f/M5XHa2W94AJ6A==","shasum":"5a55afee8a8b8a9934e23b99a588cad4c1aef7a2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.76.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0.tgz","fileCount":898,"unpackedSize":2393056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6CgoCRA9TVsSAnZWagAA43wP/2SJlM3JVpLS8Ccp8YNK\nVhLYWZy1hZeBTMPns4mFMT0VLxjF528NxXCj3qfwZsNjokVpqa/E+7QS+wOH\nl1r4xmB1MKEzn2Ap36jrNwKPt4g/W3ux3+BTL6p6sr0BjwL5BUCKIa6eCfoU\ncVyErdv4hrgy/xtRK8gGixfQWNFeQ/H2pBmIDSXTIXyeXwFfiBbB09YUSqsY\nJ1a3QAK1EmwlnK+PTrs0JBKXBDCZ31dj/vhhC+POs/hyYdyhAnvqEFAh9wGu\nYcoACElZ7CVb1JO3MSw1QHedjeM9qGP5JrXWxYyVYJuiA5I4nXzyzwrxhjyx\nZsZIICSmKxDDvnWr+h6o+qIzLLV4EnV21uGnRUnvKeiBzYfAvrskzKGZTZOh\nYmGwvzY2n6uP5mY9qaeD1dFEy4sRuKc4WKiBemP689Cn2IZUH4KinMpCEsgw\ndlsgnRNvbjZEIaNj+4XJoqr+s6b+7uroI9KtBOIh5eixs5TVnkK4nTVWtUd7\nMKjJYoqV4+JA5syUBBTqF5QrEAnhvq7UzZaH9GG+Ze6kHrLvqN4C0qp4YkjD\ntvx8QfaiBWxV0ymy6vDx+znQ8mfXrW4JLKeE/lg72bfOpcfHuYRw3m9fGzaa\nRRd2WU8s1ic0kqjDHnGmOFZP2fws+gcaqIo+CvY0H+F1DH4ceMbiitMRyetB\nOs32\r\n=Kr4a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhoMo6jF6RxkzTQ8UHrznT64wDKGbj8vT3sFuCPZQ6EAiBAbGtZSo4gQDA0f/hDOp5Hr88S3lFZbVfToOSz/p7PPw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.76.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0_1642604583807_0.1891141664085716"},"_hasShrinkwrap":false},"1.77.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0","@sberdevices/plasma-icons":"1.64.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7f0d1866e599ac346bc0e2080d62dd040ce55e0e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-hISWkYUbpyigSVOu+a+B8lEN8umy8qSsiPmbtoWHaVHOpR3pM8argR0RMH6DMxesktK/+RNEATWWpAjdnBM0IQ==","shasum":"4f86321ff8a44b67780a93913a9de51c30c3cdd4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0.tgz","fileCount":902,"unpackedSize":2418334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SqbCRA9TVsSAnZWagAAbFwQAKO2NbOTHofeTryYew/p\nfr1CliL0A3NZ62OEv3JecGxqtQoG8aMKlgMUnJW5nFt5QpOLjeMGpX+0tzuc\ny+3qUVc2j+uh7UblW1EoOh3LB2slnwtmiFNQD4rXyxyCynnRFPBMtoYlLQ1v\n3xTeLbjiqlztu/CeIebegCfM3VC40C0345fTJ1BEtWXaRefbW7ItjxEHirQp\nu+QKMv331o65whJ9aL8E1RQ+0/NzVv2lc3jn47wIzlOpFRmTFcWWO3qvZrtl\n9DN4NIhzVZxxoJiVCWK0xXcHFNJbK9v9Y2vJSWvaYLwvRO29ugvAjh96mUlf\naYm7UXnKMPttmsP5tvmf2VOnocpS7L4c0khd3sa7g1EeXs4lqQUuKjtFF6MC\nWd14DrIrCMezV8V+uCNTyuAEOLFn1m+R6xm4ka1/neGlV1oQArOL4QwZai8a\nINQquVKvT6iS/Df9uHHx0lusNtrBpD1CTv053ojAKb5F2mbReJfGXsuQ2hSk\nOwZUOdL9rANB024o/88lAFwPCiR3fhr5XiVCKMDSjcVYZgjXC1kJO24eLU8D\n10E70BnIjQIAh+Zo7+u6ciFFdCvxL/bWwbyTsiYwTKXCFv9vk44xktrfssRo\nLPY0AjQOoWlzOpHen52Cf2DNvHls8RZ7ZbfHx4tclm+Rzp0lOzzYbKuylvj/\n2+/W\r\n=70wJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeZaZA60ox8TC+Db0FLOg7skbZMjvlN3NRtNSbC48H2gIhANEfd2R4dozDjTE/Iij8eU5YW7zJU3CY8f5eqU4N1P4l"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0_1642670747439_0.8579333462834322"},"_hasShrinkwrap":false},"1.77.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0","@sberdevices/plasma-icons":"1.63.2","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8d402d813a22b48b0dcb8ed685314f0f80847de1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-kHZfOqL+QUbGCq0p2fp6EdiytKnB+1zTJi/YPU/GYfXMkEHI/piempv4U3H18UKMZK7/ClZ8biNNCuhOuWWCMQ==","shasum":"2d747978ad8447ab1423793fbc97486c553a6a49","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0.tgz","fileCount":908,"unpackedSize":2424869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6pclCRA9TVsSAnZWagAAA9YP/2Ittqo/KAHy71b8jlIu\nLz+EZYD8pWfitS3dkYtwN9c8onhiil9EG7wuSC5ecVG/PUq6OaMoRRZ6zvLq\nTswL5VAl1X5P7A1zlDv/oyiEkpYHg1YQkCOX5/loeh9DcRRS2uLJdJiuXq9Z\nyiYka4kMfwseaHZiqiFLD4BRYm51rRQwuPBV8qJnq65YA4R/2obSPCBh/0Xu\nH1Iypmzw80VmxofqKndijzj1SJnpA4YsQku90wwgQeiO8vdp9oyujzjItFhB\nOp56i5lWRXWu2aKigI6QUk92uxDKtsJ74EYkgCXO6quFnZfhLSJsw8PqRu2o\n2x4ggt+Df0n1PQ4jvCpRIpZ/b7NBkGklgM6Pitw/ry81131XxV+V3335g8yU\nnqhmc3n4vyVexPXHmfzJXnQ2ZE/jGtyEHyGRBxgD7h7nFpLsOUkHyuTkM07B\n+NRUleMSxPf2/ezgPUGAUkGdpWvL9w5SE1JZuHxNonElNG8WuVvhqiaMrWNN\npoaDMuVC85gs01P3yFcJ5IYsCsn9bQ32nwB+mAjiGJkfEO+Sgp2MLH8iXWma\nnLosF8WSRkNqcEfUp44St7quSKt4l4p7PoSRMipfsYGfyPpq/RJ3irjBjtJF\nuqFcjvmYHLLAqeU/iPu4BPcBd2n1jxYSQ2Xtqjb4U2KNyjFtr4t/PzN7G33m\nmbsk\r\n=2/Nn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrAvU6hwhpRchdtJE1n8QEKDxezcDKjD6lV6ZSA+qI1AiEA9emhy4WUR3ZMEIWXFhx4LHtqP1sNqt8OmgKir0vC1YU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0_1642764069014_0.055107955350900406"},"_hasShrinkwrap":false},"1.77.0-canary.1051.f48ecda321383de949e760f851aa1eb9a5c3fdda.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1051.f48ecda321383de949e760f851aa1eb9a5c3fdda.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1051.f48ecda321383de949e760f851aa1eb9a5c3fdda.0","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f48ecda321383de949e760f851aa1eb9a5c3fdda","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1051.f48ecda321383de949e760f851aa1eb9a5c3fdda.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-UdjVPFRzn1lawtZggI9Czwa1qyYfwCOOW+nvZGuvYQMM6VHoPgslHCWG/xIYQ0XCq5QsuMLdalEKvIo5dDTsgw==","shasum":"89fc0414aaefa51650f646291b6946ecf7f04861","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1051.f48ecda321383de949e760f851aa1eb9a5c3fdda.0.tgz","fileCount":898,"unpackedSize":2392891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7lkxCRA9TVsSAnZWagAA1TQP/i2S2MybVXnaVQvB24JJ\nklHfCrZrVS3hqmOoaFB49etIVEN5RQXmgS77aFZfZ99cQNuOoQ6sKy8hLx3q\n18Q484WUtl282VD0/qcSahxKg4YgaFk6uZw1XOlvKXmXU3d8G/wvp7CaCBCk\nUhYuaEDSTeBJBD66gyVtZf9DbtYrOcLerkHOWOAs/Bgt/U3VzYgVQ1m8r0jZ\nvWw02UV+ylY73BEjmN9EmAaZZWgRoLDufQUipuFWn1JowEXcuH7e72JfdeRZ\nkTPEvTYzKpsxr1LNln5bJCo+iJqAN0rRCyKfP7VSUp7JbuRWirEdDsGR0Kix\ndvr85qP1Y97MtIQhLgUTOf3YnWJYYWOyerpKv8v4ZWmKeLb4FqK9tYBYusJU\nyF7tIxE3uJU6kBNfRPH34Ob0gx9khvJ+4aJlTDbwyerRHXHLeqvrGEtJD6l3\nnKukn4FriNdGiBh8PK8s7+T7CrdZnc5vfYHdGkIhqpT7vSZxH4K9P1HIyHBx\njJyVUECS6QIWNqXL/PDRJUsawiVXG/LoNR5wt/Ip2VyvqZ5eujyXHphbGV+q\nqw3emZ+qPcZ5ddzcottvoZ7/Ovt2wFULwti3FCa60EJvDY4NKX1vyYBl2Iqj\nAbJ5Ih9LW2tmJbmscSPNQ6ogxDBV39pKz9lQnLmByYTcKVnKPuJjNgdu8jXd\nxtnG\r\n=mkfp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmvJ3P/n3RBwSI1OkzC4z/Mp0YQ1ilJPF/vRoXrCQvjAiEAowVMOS9NV2vJX6Tteh0ax8WFFYpvNW1qkU6p7DlGT5U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1051.f48ecda321383de949e760f851aa1eb9a5c3fdda.0_1643010352965_0.785937196139429"},"_hasShrinkwrap":false},"1.77.0-canary.1051.9103bdccf4b605a8acbfb09571e7eb15866f98be.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1051.9103bdccf4b605a8acbfb09571e7eb15866f98be.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1051.9103bdccf4b605a8acbfb09571e7eb15866f98be.0","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9103bdccf4b605a8acbfb09571e7eb15866f98be","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1051.9103bdccf4b605a8acbfb09571e7eb15866f98be.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-b5xj1JnPM5t9sGPLUkI0b+MoKlGDWsw30NXguTsFxTyZroWS0K88TWnx+DDljnnwrlkfgC9oLozJnkAtxCXcBg==","shasum":"301451c3678df4d9fd5c148b8eef0be14336b8de","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1051.9103bdccf4b605a8acbfb09571e7eb15866f98be.0.tgz","fileCount":898,"unpackedSize":2392891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7msQCRA9TVsSAnZWagAAR0wP/0yc8RaGir6MSmR3wsw9\nnQZZi2Cgisxb3bAAJQlIUY+S86ZgRvA8M0HSgJCNykyl0aOQ2B42jy4G14x5\nbaosgIIx7oz7ndWMkNaBjyHsnFXJbAi3OY5j3Qu+bdU8EsQJvDRM62R6nw3m\n/ivIn9PAte/Hccg17LUdYWjYQ3Yxz0MVgMP6Mkme5lJpLomawWJt8wzmuarF\nntCMwZyVkpnPCC1T6PClOoMb8m956JPtYMLMq+CBWZtZpAfFdDTmfxkvUCo+\nca1JaQA2mZoIZ5I7HYUmu2VIKZeAa+yvY+6MrPuFBLcLX+ds4psJoh39HU2h\negv6hQn99TPnhLZmmoGtvIeweDS9mh+L6j/eLCOdgA/StM+n7rH5/JJKmNwt\ntst84LqStFue6UUyDrQDlPby7kNfmqWEc9qediaXET8Vt+wkahOE7TCkympP\nMxtWwWTVZGyTDp0AD3B4fBseMbU+XnJx4qRzaNVyOHO5QhuLzIY61pxlBPaL\nfUH8IAemoDsXy9yIR2IDBQlF2v6gqyUD4E9KemROQMF4V91cUeScxLMP6JdI\n5/P6U4KKGdyt0CNC3FgpHCyKgiDm2gUUViBY2hOdkf3Ug7HEdyrDUla+B2T2\nHzyoRG3/34S10IjBW9sZv4HNSKHfPGZ+RSPThmjfnbX+bmk18qaK7R01wJUl\nq8ps\r\n=NT+r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDV8OAGmb7kk1+qResnIVwXDT8e++g3xrlVfco3dOpQuwIhAKeOH8JJ+VLAIIRoeVo4XGff5jtJX+LlqlQGLBs+ZAqZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1051.9103bdccf4b605a8acbfb09571e7eb15866f98be.0_1643014928295_0.1657210585372444"},"_hasShrinkwrap":false},"1.77.0-canary.1051.b3de02362866c1489ae20ab5ec82924ea1a4285d.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1051.b3de02362866c1489ae20ab5ec82924ea1a4285d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1051.b3de02362866c1489ae20ab5ec82924ea1a4285d.0","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b3de02362866c1489ae20ab5ec82924ea1a4285d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1051.b3de02362866c1489ae20ab5ec82924ea1a4285d.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-jc31df6amaesOKVWV0aC7jsegkqayTfpNusD8DGqoV3DYlqd2hdZNVId1cDMC5P2vugT1Pdfi5jeUuLbyF3oxw==","shasum":"dc1b703eeeaa7e63e823a2de290493cea5360750","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1051.b3de02362866c1489ae20ab5ec82924ea1a4285d.0.tgz","fileCount":898,"unpackedSize":2392891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7m0fCRA9TVsSAnZWagAAHy4P/0upwbGonH6k2SJKAQYG\nkqBi1h35qd5PK6V/HQ4/n7tEKuWihKLHzWOGf5y8eqlvPt4PyT9QdRPc2YPB\nnXisf3pEHcC/pzHi3UKH7gpau/C9KhjKODYnAQkEJc1KmtwVSqExS0BV0TIl\n5M7hrCxnkAtwEGW8Lg+zLb3RUh2r30rKvbFxtp4FS1b80faHgvyqGB6yOR0H\nbIjPUSMAreqhB330aLt2F/j8gukJeLjIF+ol/hFjCJ8Z45gCFgFEpwxGDGlL\nZSHh3tknxRDguGhEzSomu66fZ8t/B5NHqt8ycdivjg8MfJFzBZOnZSYbJFN5\ngc5EuH1N5LsP/OiuZ0SHAEpP/RgN0MepCbJtW5tVQg4qwguP5d2VzN9IkQY7\nacmcPzle4O3JPfTjaY1sQx0HYWgnCO+HS0ANoZkx5QAa4JWRDB7bZZr4skhQ\njtbzXQIfIjthuhYWrUqAcGEOlZZzU4IXgdUHLPOPcDkR9nj61CaarCBBsrsi\ndC8OF0gAInpNLTLTbrcWgPkpRdZ/qK08TDB2w9Sxvgup/Ng8gk61wnYGdBJN\nS7mEZqRLh8o1TJ9G0p4f6j0J3PfcGW/SOAnP4d7/OBQ+VAePg6lwt9FhtUU1\nq/fKUrF++Y0sGzAVxp5MimrhVGCP8I3Ha1zkdKuhLJCwnnn1tB2beg4clBTt\nqy9x\r\n=VPvn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDskX5JAsHIz0NNBp6qW/dffBAXWkuEL++xuumvsWM2MgIhAPnkY+NMABq/eLRPUJzKkENsmwEenqPv3Vk4msfxRekv"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1051.b3de02362866c1489ae20ab5ec82924ea1a4285d.0_1643015455028_0.5874507324027993"},"_hasShrinkwrap":false},"1.77.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a7c899d5c0cd5c8ede80cbce769af69c762d1fe0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-jvo+Ui1q3Ivb/B8AnUsjHNoQxYuwJOQa7g8jZjTTLDWbU/46pWSf0GwqhxvewrewZJryMeA/h5dYQYLGGQKkRA==","shasum":"3b2db6a9d3acd073b78a5d4ce21fedd3af1c25ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0.tgz","fileCount":898,"unpackedSize":2393001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7qlICRA9TVsSAnZWagAA5GUP/1mUlwJQ5f91oFUrJe5b\nwjMxQZyTfkFY1aVDR1a8Qt/2b9UNEJl07RZDpz/kxRej8LnDaZuIwLgg+y+d\nVQVyoQoGVx4ub1t+F5UTv/4p3g9+Ovu9oJpZCSoqZzJN3y1yxJWE0z6fFDjF\nko0qSNwUJY4g+Z8+1CzyJNrE280gGu509ckg3yGQlpLN58XXe7YY/RxS6QfE\nt9189TEjttDkEjdoR3laNmcVCi5Nju3iXkNsKyKsmjOokez7ojvVbtzk+6Cp\nchJiN5rPOq3pGqFrAwFmOFyaBPTsHG6jhLI2drOXtHlrBjmfZftLWZhzMzsx\na4bsLr8XPnM2Y9ANm6TwoofdVEV1sAWyThcqYJCpjRCZnKDHSZnMP7RBkMSn\n15O8YYPfPvXRQtF0FSpoCD8URQCKAfk3s7N+v+PNMIWDqZhuTRhjGNPBd2z/\n/sAg6l7RVlDFGBGNPEhoSN+0swMfmBFGQe8eeTLU+e/F5YZrCY1zd1jEdLPk\nFeyk7MAZnTYSG8gzQ/kMK4dZcmHkHuDoCDgGQI0cSdyxOwqtKifQL/jcXtKi\nIBc0P7TmkkOqjIl/C0x/mUwj33CXHPIv3136uZOmhqxf/hs2/AusdarbYULS\n8LKsz+HKyqp+rPVCtIqaZwYGMZykeIz9GYcYg+MRX07FJ2HX/2I/ELdz2mxE\nQcoo\r\n=R/sr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFsB23f3NBZkZsEYXWK3NR2wQCZJwUzyYCsOh0sANbIwIgM4G9qAEYZ1PtYZTal6LC75yRwAxlyJM0UJOjqOo4K4U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0_1643030856398_0.4163739301765541"},"_hasShrinkwrap":false},"1.77.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ced5809accedd1c89bf8cbbfbdaff6e7232c088f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-M1SfJy77TvkWYDXITaihp79kCoN2XzsWaoYZWZqcCSpKpIT7WJD0pPorpCGOdduo3Q1Njk2IolVyajXJxhAHwg==","shasum":"f10b5e2b2b3818a66f021aed5325452b4e19f2d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0.tgz","fileCount":898,"unpackedSize":2396120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7rFFCRA9TVsSAnZWagAAckUQAIsoo7Chl+/3FTsMARQ0\nYLeVIbRNndQvgs1tZL7aFCHK6iO1OKX0Nfuu0sDqIf8cLazP1383F4HILkZO\ne8L0FPoX330DXRzDl3FLztkUTeuNJRvg5C6TtS81X1XVxa4T041H6aYnwsV1\nyzndtPSjoKkDG3Bl/wccQ1j2+1t6LF3CCSpU0cD+8suZy71QqydlRFlXjEou\nxek/4yY8bHeQU5iDWrsNEzxGvQujB7C99TUGQ5BTD3g2IflEeG3Z23phz14M\ntUJIBeR11kc4SP3ku1MvKY8JVnDRx390WXl9Tz1MycYSY28+kn8mfSB1BIYu\nAgExmFVGfwAI4h/oxK5fjJVV0Nwys0lJTshKnN7X7asISMNzJmFm2ecbg/nH\nG5Ek2Ps/rPDwnrT0Y6zMOUYGLM189byqe3yJNzWIxbJakrl1UDOiTeF50YyZ\n/GaLBmHbUPokHnMdK1hfAPm35OVQNAUWzfLeNMtqZOht5nm3yY/+3WRsUHM/\ni8ZO5oLg5Je+mq02wCyNPqemlBPyVPVXxrSNUmMM1hEFKyK7xRemXRdPf7e+\nl+9mRDbVgWbiuH8G3oDtrgO0OcKwWPuwag9UxLhyUT1YGBt9yuOh4ipiE9LJ\nYoAF1+Yc3N96X+36Jf2eppLLTEsPC3DwfRE5k+ORCUMQTAFyK0uUjFyJixQD\nrEuB\r\n=zzp4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/HJpy44h4zEC4O0Vr+u+g47vxESO/hYa8utzGYINxkAiAgsJZPFA7qXIfOEJYth2TcRD9Lmpvc6t2u+9ixojp1kA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0_1643032901626_0.41872725498731955"},"_hasShrinkwrap":false},"1.77.0-canary.1031.202ae0e7a1e6ede01f6504c0126dc9acb585ae50.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1031.202ae0e7a1e6ede01f6504c0126dc9acb585ae50.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.46.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.63.2","@sberdevices/plasma-sb-utils":"0.45.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"202ae0e7a1e6ede01f6504c0126dc9acb585ae50","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1031.202ae0e7a1e6ede01f6504c0126dc9acb585ae50.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-tl4K+royTzxFMNhMPwjvCeXzBus/nZV/HcOVEgVpk6NpTJB0OWE62Xoy/5VurQzPFpZ38IFAIv1ewrLRLXf6PA==","shasum":"9562ec684f0089e66070938e7ed2d607a97466e8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1031.202ae0e7a1e6ede01f6504c0126dc9acb585ae50.0.tgz","fileCount":898,"unpackedSize":2419523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7rqICRA9TVsSAnZWagAADPUQAJh57jQTRpfJ08o7o9aK\nGtqb0L2lTP72JwE9gOlXobpb45uDUz33AqrJqJOS250P4hQ5oUzH5+UnzOOD\nuKot0qkFUfklg7lAsKIhloywEGaMTtkJaN7a+UrN2Zt2RovCfyqctYVP9Vdk\nWPKDNBoz4S3lZhZsvMFB00YrwqUwyuL4ubFjLArh9tqbH6/S37uWRH7gHuBg\nvOEcoY12NamEW0Icyo8EobSSmJd0ariKAjsfFeA2jDxK3n+7OpbyO3n9XBu2\nJkkW37+YGG0IU2YdIHiRChEkuPvQxUnTlMYa6ovcytOJSaJxB1ATA+4fUZlx\nknwPNEe68CozKTNSWdxg6u6EexcCOcZpdbcZUc4MMXtDrNlnIRkXn/deh02I\nnojQhcLnoZdGg3xOYgTu48l/+CQgkWA6QTI7I2a5qZSG960xg+XhQH7GLNYf\nLVHukex585gnVH1GzOWPEjxUPXvoQ8J9eTt8YnnPu8a5IvrAEt5yamVoGBkB\n1R5hByS1Va6w1IPIQUs4rUk0e6YVoeGvQA9txaS9p9WZ+beRixnYCHDhvoog\nuZBO+MrUcQxGnZOm9DQGxdRP91bfIjMVgBWY61mxhBHbkvcJdpksADBKEQPQ\nQsGm/IizGMBypc0WYcnmoiCHx0ldSL/LojgFVJLp0QgyE5nVo8CJnR054tPY\ne4mw\r\n=wfmV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAZPlTCv5Y75hD4IeVEpqh+ABp2yxe41j/3CfybrXRgQIgbIKYUxWgdXE8xtFnt8J6x02jIkkAzRmDE3B8Fai0p1s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1031.202ae0e7a1e6ede01f6504c0126dc9acb585ae50.0_1643035272320_0.7285530105934548"},"_hasShrinkwrap":false},"1.77.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3e552c8e1e5e5c52c4b6b7108879540845d2badd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-MxloQRrSIcpGx/0bURPnMg69SSlP5ksgcgpzXPCnElpiN13sf8mh5rZebyzp553uin6/t1tA+jJG4g+fljg4cg==","shasum":"573763d8db9edeaff4a41c5bf6950fe3424e2d0e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0.tgz","fileCount":898,"unpackedSize":2396002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7r35CRA9TVsSAnZWagAAcz4P/ReKPHdJmOiK1ILMxR0m\nwaH9MRKKvSq4Tm5xHH0gka7g6PAfXixoL8RJ41WPdvn/4C4yHASTqVI54uMR\ndnmM2QxkPKA1oi1MrqFnDIrZbAOzm3OLUibQkHl1ZSIlxYTwIwuGfYBYDsIx\n/PECGvIMwZbp68d3VoFvIkhlXadTwGfeinkTQInhSKulTl19zyeDz3Q0xs9s\nuoSa99VUfGwe4RPqOmNgMToXdcyxsasYIp0aj53PyOm4cShAdIA/+Ex14FwR\nSxwQKCfJ5/2TKTrQhDePFXI4AkyNNAl9m1UMxh6u9IXJ9mp/L9NBUeRWkHe2\n8sXH31oA77DoXAZtiSg2Lq06tk9c3JF22yzGJyBryejxD2RJNbzPoYkhQ7Ol\ndfM9eRKdzAzosTnzTmriKYZkkhEa+/5gQkBSnS4HCIT9z7xvvOZl9cnwKSqB\nvCXOZGWWvGkglHZCMrUNnA26Y25Glw/1b9oI8WE6buQ6CJNECdi6GDN1Fy74\nvYSqIzVrDsICE5lbcf35EFHZzl83oTYSXQYeVSvvvzBZKnlvpi6OCIMiVxXj\nLik57poibfh5BOBYsfmfNcoSbjzdT7iWvz6UF6HHilLQBaGUd/9RoVF9yXQ6\nc12YnZCx/uf1z8MJ1R3PvD0KbMLPaNom51t63wzmLKNXsGD/SR3CWjYOZkYH\nIKo1\r\n=hKEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNKM8Svom1g188/yF3GS0I6dIlpF1ZMqiBAugOEmUunAiB0JmwvovxjXmOhxOVSLGz6GSft8dSxXq6WhF3DpXxhxw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0_1643036153325_0.02516872955895999"},"_hasShrinkwrap":false},"1.77.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0","@sberdevices/plasma-sb-utils":"0.46.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"577de6af98bd1ffb683c0597c923414019a80f46","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-z+rlPlw9L7aSo9QqQmX90fKzuOJ/xpj7MPK9AAnqUCkMD++mZkmn1CJkN6+JKei4GU077d5V3eWKH4l/l2MnUQ==","shasum":"de0403e92e2021ed828cbac427b367bbc4a0aeb4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0.tgz","fileCount":898,"unpackedSize":2396002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh76kUCRA9TVsSAnZWagAAxcIP/0GR0eBEGdYhvPxheGxC\nd6UIu30eBe64VxNEL1+AMyXkRbkRFVRjK9T2J1Fxy6vOYq2zM9iEP+ORrG5R\nnvexVXPajSl1KUkXYIso3OiuOzeO0OnDGcoySTrFWoZ5dRMBObeJ2l4VQS5b\nM6rRaZRlub+xAgTFsEUsGSbTzPd2sYL3KBC0VHuXRjs9JRd4XDsIdq4bvEfp\nU1mfnV6WPPCUfsW9bSi9pNOuU6hlqx0S8LEhkTWHTYq2EqPpMn6h6wL5PySN\nsUbFDdDQrr4oRbDOtdPhMe1v1EVIo+yDLdENzQ+HrjzHa3oMFxLeVS6lG5Cr\ncdJ6ALCi2eDeyxV6mSApG5HIBQTodfrnY+jMaYcQ1CdP4CgVkNegrs/WHR6e\n2hR1MvEpvniXBar7F4n5JC/hAtPF+X45xetwscAu+lXOe+ugBAmw67KhVxga\nIeQRv4LUUAUIfZITcQWdz3kxE+XkZwTYUo07UVyYJXRlhtpU/8JTfRjHMmxW\nXR4EXo4Yeh1QWpmiOSmiSuW/S6pki9DfzHu4DezNnFFe3q67Uq80pLyxqiup\ngiTSlIDnO0dxxa4LNpignsZkMtxJu+ZOGBtab/ziy7yA/FzOKVJO4M5t+Zvy\nAn1zfdy0ovgsc5Aau3RXSdN+mSdmMpwnTlmY1QXpQvbFfu/TbhxrFr7tvVol\nYQZ0\r\n=rXpC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuzgoU/YfExRbIf6qC0DKSaSiDLVTn7UIBZHRMTNhlmQIhAKWh/Ox7tW4WGaQhUDAeFBEEJlQNFOhuUkqMJMmJhB8B"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0_1643096339831_0.0793427312193189"},"_hasShrinkwrap":false},"1.77.0":{"name":"@sberdevices/plasma-ui","version":"1.77.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e7ee1cae6f5a3647e3020c21fecbe898fa07ac4d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-P0MYhJv138YRBF7qAD3AwME+UWmVN0Yrnsdu0Am28oNoYlVthoLSeX4VdE6kiu4Iu01cfNvNNMzNo7kFolpyDw==","shasum":"9d3b38b66b17c43fdcbb9e7320184f680b769097","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.0.tgz","fileCount":898,"unpackedSize":2395782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77LqCRA9TVsSAnZWagAAc+AQAI7ksgHwvIZp5qybcFgB\nvX9YV7ScvlYqQV+j65uOTFDdZVJiIioPuR4wELAA2/Pi0QOxRHBuZCkyV9JP\nzjVbqIeQrOSN8W92PWKcPdG0PplXxTIjvM5k3Zb+HHNoxitycp9t2Z5WKQYk\nijh0XldhIxEJ9BKVz5mWK0UahJEdgVsYp8EJ9O5XxoMBezNmmxQoJnKxWoXI\ngWqpPI04sg0edjy7hZiS4TFG1sTdhBjD4mGM/unatADBxBOE2LUBgsYOJCm7\nbVDoSoGXkVMla1O3vHc/EBY1eYWwoR6uqtDi6m2fb0VTgytLpZjCAWKTUq4t\ntitvRkieQqbOdvuN5TVUk1OhULOKGiPHFFzDIv3mLTkinf37Knh6HiiFct9n\naiAPiyf558WbioOxumkn8GouRqk499ee12ne6xxJRG5NiR+qybX4AAcEXzmC\nQJ4hrV8xIMOZ7t9H4fk0BhkDTnOMCHTIPoO6uwhleluK1f5sGfEGIKZ7Ivf9\nkoNBNUT63gONGAIa+zjZdWDgnKmfcufAbo+KBL9rjJe4ECFTUUvjzp7R8cNB\nZUJAu4App9Ea7z8nmfIGkiB4vIVfvy8ObJZQWEp3noQtXqVgJ2BSY2wtYrJw\n7levw0es+GT/hetaMZs0wiKYR3XokLLg/lNW9FcilOmVz83oqzEuNxrBHVb5\npY+t\r\n=hvoe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAskHlLvfmJpBl0s1xaro4Xdn94asqWUeEFMpfRqk0AKAiAu7B+NqF6ulcS8vYm/6FKlqbXmbkrAa5NSP1qg+jGa0w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.0_1643098857868_0.03029492701762715"},"_hasShrinkwrap":false},"1.77.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0":{"name":"@sberdevices/plasma-ui","version":"1.77.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0","@sberdevices/plasma-sb-utils":"0.46.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"64272db41a493b85096e9171e05209fe8e3040e2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-YBaNe0W87Gv5K7f5DgboJ4jzGMzIJbT/mj3BtEZ35IhuqfH0PfLwAuFm0clFIxsJqtxMbUhPYnzE2cNmglATLQ==","shasum":"20bc24b20a6acd48983341f09ad9b376df166799","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0.tgz","fileCount":898,"unpackedSize":2396002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8PAtCRA9TVsSAnZWagAAYd0P/A2ZU5cTic/QeoevT5Av\n2RhEK2dqv//ocMGe6bNH9PGiTdh3CR2gZuge6z/ltEtLdprvRX8LrCh7yz4+\nBojq+6OA6yrHuXkjZFCY5GgqApauIEvlB2/H9RTbHPSauRG9Q07XfFycbVxc\nRXEoApOSRXxl+Pw6gOX1UpXGK2uBp3ljUlRKuNS7OuLiX2pdMN4Tl7SkcZM/\nuW6uOZBTf0dtjx1QLUjD0oOQA2NumE0ezT+rC+wzaYbJo0GKLxF4nzs6IW6H\nm8FQz+DNe1nqQQ4ATNYzHN2wnx6ikOLruw9CX1hfdyGM+3aXRGxzMxhmtxp7\nmX2A3Vs0L+Kk6XP1kwOcZ1c/ZTapgOVi+bmhfh0swT2WjDRR/14vYOJDLdLA\nJBmfZxCoBegGnZGSCOOnrS7ZuU5EcNDCAxIF7GI2bL97DZQymAPk+QEJROYR\n9EUM6LLvL9YpkU5R5pMlbin1tgzpbAkVLgxfaBVxi7wiyX8Po25Ku5XlVleg\nODOJWQYL/4f3Y1BJoxVxWxUGbfOcrWU6qJ88ne2mtoZDYpYd25KljPBx40Yn\np7d1yBC5w0UpQ8XHR4wQEECkLTw+UAfNUVlgt/neNMNbCyFqQqVREKSDtxNY\nvG9Hd71VplDWON933z/N95JjgaTnm3WvDXkVoybbb3VQhay3yf5Ny9g6G4o8\nZvxF\r\n=4XXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZpBvlcCHlWBuXLqCYsGSUFp9n2eC8fyTCNIJQ6D5BLwIhAInMNpA5QFhznA8elwmXmEpV18Z+FTc/8xCzoO8yK4/C"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0_1643180077610_0.9431939909596447"},"_hasShrinkwrap":false},"1.78.0-canary.1055.363bf0407f0f763976d31150c27d2211a5220718.0":{"name":"@sberdevices/plasma-ui","version":"1.78.0-canary.1055.363bf0407f0f763976d31150c27d2211a5220718.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"363bf0407f0f763976d31150c27d2211a5220718","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.0-canary.1055.363bf0407f0f763976d31150c27d2211a5220718.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-JaZpJ6mU1/UDVcR3Ufx0dTPQQHOOZXWU0iLG6+l7tL0QBG8jMTvEtKlOQ1h4f6T/DLv8fhm2NpuCnxHKTNe9gg==","shasum":"059e1c6110a3543722c84dfab4d3c34e781ad285","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.0-canary.1055.363bf0407f0f763976d31150c27d2211a5220718.0.tgz","fileCount":898,"unpackedSize":2427769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8QqCCRA9TVsSAnZWagAAmVIP/3qDpmboW5r09ZiIHgtO\nagPPxDs8TmFd2AUE2B2BD3F/8HTjrNiLlP2mVZdG4gJKdDvlON5hsr9Ei507\n4VnzpF/bkm9fo80LWwv4lI9CJWyD6L0cPieYTPJg6bVWUH+OYBoh8iaM4mcd\nWwXedxbbNWLn63ZvzSIB5ubwZ4lHYsqbZQcg4Fz6WSVgCxTNOty1sf1PwE75\nAMeZb+cLmWPQsUc8pwsNj+sIdZD2RI3l2BywlSF1Yd4+OkaF+2xIE4+bFyXa\nrMNk5c/1nNNFQTZX0YOTzmhPy4719/rTgSButGTm2Ho0rysnTfiAA4e+SQh3\nF14WTJpRBK0NaTsqPNOxHl2b5luUTvBtQloQT+v5N5w/WiFuDUwDussZ3Rtv\nnn+R/viQyXC/X5Ex0l4IP6LuJltCTEy8rmd2oF6J3cqlZb3m+0HetYMHao65\ncylW9Af3S3gge29BXXZZRlqYqXJVYDrakdXp5xNhjPIEFNujwa7SJZbjHpDB\nyhdSVu7jGU8kqMCk4Pe4s/hJQqOA9BOGmSghPLLtzfQSBNfBSLVmAjlvNH2r\nOWgfpV1liOZDY/hyMOawsT2kXJv88nZ9ZBgtS3MUZgKB/Vt78DBO9i6retYO\n/UqWziPq9C3UOwkIbubuzPSSJ4CCOvfgVxL6ZNqgLU0HFEsAovcwloyZftB3\nrOhF\r\n=y6qQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGHxvuj9E2tmn9gUV4mmAGD/RkwHZi6POCqdzMLF1oVOAiEAsI34enVTLudCCuaN6SZECOlCaewgWA06xjCbCgpmdiM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.0-canary.1055.363bf0407f0f763976d31150c27d2211a5220718.0_1643186818039_0.2619748041054928"},"_hasShrinkwrap":false},"1.77.1-canary.1045.d0577854b72aa4f189200dd348a61b81b5836e36.0":{"name":"@sberdevices/plasma-ui","version":"1.77.1-canary.1045.d0577854b72aa4f189200dd348a61b81b5836e36.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d0577854b72aa4f189200dd348a61b81b5836e36","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.1-canary.1045.d0577854b72aa4f189200dd348a61b81b5836e36.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-UWqkvDgW04GvAHekxfTv43NVqL8nCE1q6TF+Ow5N028xXzFTszZUV6o3bGqIDAXWq5aLsql6xLzxjyxyL8hKbA==","shasum":"7fbb090313254d749cba02d23efc3105716fe8bd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.1-canary.1045.d0577854b72aa4f189200dd348a61b81b5836e36.0.tgz","fileCount":898,"unpackedSize":2395772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8QrvCRA9TVsSAnZWagAANdgP+QG8w9EyiMqvI7h2Egh9\nkp6vHKUJJKCZwohgW5sGto3GSsrl8gqOQa1Eq/8UKVL8xSVhLqrkVnwwPvvW\nwEPpaOA/lK+2zEBFf0Upung2LmFqFz5gx9yYmXf72fnETR1GdWpz+JDhW6ls\nMrbg5s8fywg1EY2d9qHSSVTDW6BBMH0uPj5v0nVwgbta/UFHdIsDLmQFsnX8\nUamuWz+p+1TNjYY2GxdsmMy0jhBxIVZjcStu7IjA1m8PcsWs5ii4O8+WPgj4\nGOAG3XgKoIIaPW4sO4ZXsJZIFY+d69FVvSqrf8UV6WqCvT5j5z8ULh836AVL\n927je6hdZbXwsMrARMHXK3dVGOI9fHvj4iIlEMTNb2ZfkhMhK5ANcVVEGfV3\noTzPfNmcCcmLZDzba13cmAJRG5cFHlJJ6zLmEoijgY/N/yiVXO7XZNBT1tcZ\nHog5jhTmuG6c0p+no1xQxT3lNOHLqoUUK5T5jCoBt5W9uprXCNNBzZ3mxaex\nyGFQCLSBzETj3m/aFXzE2VJnWQFOwUr4tQJgnFoXOfqhIAh4O2lnxIo9RmTI\nUjZnfvnpFLjwgyIJyUQ+karJwAmpVYp/z6bAl6KNnme8ArnKi0L5CkRYkG/F\nrCQ0ogx2uQJgkChKgyeteEHj587NRZXWUJP1HU/tcT4fp5AYNL8J2ucb+nLl\nQh7A\r\n=0j6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQwlj5WNxCXY1/hyjNiWvWK2jz/kCZY4HZ1dEHN2zUWwIgGKUQd5td0mt4uonXPTFOrUZGuzw9Mq6NRjBHm+TGMwU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.1-canary.1045.d0577854b72aa4f189200dd348a61b81b5836e36.0_1643186927391_0.07243128293524781"},"_hasShrinkwrap":false},"1.77.1":{"name":"@sberdevices/plasma-ui","version":"1.77.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1239b46e9c7452794319ce63ad86b2c79111b846","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.1","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-wJ2MJPw1NjqHvXpIQiprtd0kGCO9cr6C8FhCiwvcb6IBkeee0ITCjQf1fdQj2RyrKN4aMQDHfeDljNm0eFCW3w==","shasum":"4569c280d0fb1138c8bbafb1c942b9ec4c542a69","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.1.tgz","fileCount":898,"unpackedSize":2396166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8RIFCRA9TVsSAnZWagAAzN8P/19ketdQL7BeAwn4tLCB\nkcL/uG/O//sIYP3gRkf02XHna6fbG8VUXGGm8yVu849kpI4tJdWqCv/rfynJ\nDVRdGhLwJYRdMNTLVBtVtVTBkP3piN2wNSMRZAPtwKBjl9u6Ena5ic3UaH+V\nuyqbVLPI80IoPeDnHpe69SCLATYeGJ7vS2PnkMtUGVR05x8DJ33Jbe2ZTZPh\n9ZgcrT48XGnFhyyDlLu1SrPY7JqHQ7yMe8IixBaYNsUWuguHH/zIniR6a4/x\noi/u3c+ITfp1xRLpCwZwhBF/lK1Xr5NKWA6/uVe908DowVk6wFxQN7CYRyRb\ngXP4oVQFDK7xTncY5+pd5WWDPzyOAEI+OdubQ1cy15N7K6aSDRlTf2D9KhhW\n+nUlHWgZf5e9uOgwUKVrWMNoOfOoZgd1itasbUAcDgN0RzANwLHRYk7Ny6Qq\nejY44c1A7AeDEtzHyw+1XLaH5ipN7Kxi+mj56NlDaf2dsNp/MSmP7vJ7jB9K\nHQnH54vv+OONeHpWBhV4hpRFuSOP4unThXf8jG5XFekNBkgHJZkqqWtNNZMP\nsr+CFbPM9KPlfPEpLWQvM2GxpN31jEPJLjTK9VXCWxKrQdS/Au4F/j+w8+Hg\n1bHkl+d56rrG1eqwT5gLb/h7dkVr8cMpRAlB++pu0OPcnd5TnLcR9DBVbcxd\nIHOW\r\n=JwXR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHH3yLZZJ7KiRqPdO66mne6hnRGEpXEgI2XrxZFuyiOgAiB02JgPBXkAxSyhuEomDkcycREUaJB2HbS4dYPHDSNqUA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.1_1643188741856_0.858106302444301"},"_hasShrinkwrap":false},"1.78.0-canary.1048.6ef4213dc6de18e28e487221cba847b59dc8e979.0":{"name":"@sberdevices/plasma-ui","version":"1.78.0-canary.1048.6ef4213dc6de18e28e487221cba847b59dc8e979.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6ef4213dc6de18e28e487221cba847b59dc8e979","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.0-canary.1048.6ef4213dc6de18e28e487221cba847b59dc8e979.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-X4qJZxXiJaCqNuo7JMNTSS830FPKHDvHJtBMtqqNWvgzelhCAqoJMl3sfFhnZvZeyJJ4K0vJiZMFfirE7Virnw==","shasum":"65c43fa22cc37fc2cc6f1a508d24b201b782304e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.0-canary.1048.6ef4213dc6de18e28e487221cba847b59dc8e979.0.tgz","fileCount":898,"unpackedSize":2395772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8RSkCRA9TVsSAnZWagAA0HsQAIHwv2P26XAJOKTlgTVa\npcXfkjhp/S1fa5QnfHQ2KPQG4fInHfq00FDqpOr2oTZc4kMNi1iw5PLhPzjK\nGM+XSVCfbcxGl3l4U/rfBcYxCt5+7fYuOHDVqwRVUJ6upEkxp01oYRED97Am\n4YyqDBRZ/1M7SZBTWXQlwUAnYRlKdCNMT6D1TnlKg960qQZwjVWUUA5cQbnf\nW5mnGhA4JTIa4P1AQPgijoa/jNELQLCU8AMTDFp3In/jvKRMp7cUc74ejfjr\nnpYvsDiOCr0jZJL4EZmYk6hcJ3GnPVvn5V15YBKHNTduKgiK839Z5G03v1hB\nEYN3NqPkguz6WXOix+eYTzl8S+r7/E+ZvK4LHHFV/dr9LEPK/5Im6yFjt+/g\nhbDcAaklaf63ILsucvJqe2hRbFmmr6lil3SN14XYdJMJm6x+pv4XHQME+1uF\nLDiqdzKIm4i87lMCCccyVdsDAflfyNP3GbSG1KPQTGcBa7jzqodgBSBDaQuK\nsK8LzlaH8ehxs7J4SC/i2Ekdw9ANj1qyVtfkdG/0QlY5LueMUo7uW9bxkWo2\nqIcxjXQqCZJwwepysGjbBII4kEtTgYs5QI97U3li7Spiz0X8BP2gt4ChmvO+\nRwWFC6INC+ty4Up5AN62NV6Vieqy0iLsKb+TjMM0niGm7lNx+Aw1pCiy9ws6\nP/zk\r\n=3mcr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDy/D5wgHFW1wJVsqQd9+qaP5FS/dcRagp+aSpYsNEWAAiEA5G9MmVkm+VT7Xgl47xidpU3jz7iCS6BlpANvYDpFZXU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.0-canary.1048.6ef4213dc6de18e28e487221cba847b59dc8e979.0_1643189412065_0.5671714147861899"},"_hasShrinkwrap":false},"1.77.2-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0":{"name":"@sberdevices/plasma-ui","version":"1.77.2-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.1-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.1-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0","@sberdevices/plasma-sb-utils":"0.46.1-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8e2a4710c66913d2c71f723e80fb74c2315f3bd1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.2-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-Bb0bCIv+U+q5/sZX9PMDAzz+4BOH8ruOucaKelzbKEdmfOLtL+/k3F62c7GXciFofRzMeII289r5dhB0igK0wA==","shasum":"a6218d0349ac53a93ca06714cd03c83dfec10c3d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.2-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0.tgz","fileCount":898,"unpackedSize":2396275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8SUOCRA9TVsSAnZWagAA2HwQAJsG8AVnOaP8HIDFbZQZ\nxJlMs/Qa7hxhe8L9hWfYWDOfmyY2lPNtG6UElbc2e7wdnHNNO9FwBPNV2yXv\n02cHf5Rg4IFV5HVo9pIheU1+2cTAm6j09wefRsZx+kOu09No8UTANhP01YSK\npPE6LzRQO5J6UnLCygVWbiSRFNn264mCjIT71yA8l7AqWFXiXrLHQKc22uG+\nZltlWnPFkRF6UXhLoFiXfoFlJpDWb4KQFVYThcTFSjOe/JBeO8Xs/rFnP7K7\nkgSvrGQRFKqDbLPTq/OoEoNs+bZ1g9S2YB94s12c4IPFuDe9yv5DLCtoKSwZ\nJI73gSGgZDbs4NzpX6oPnFkPs5Ca+1AJcyu4/yVUVxVOJwyS+v8JcScS3syF\nYpz4LKvmN6LgJ1ZdGZtGkDCoZg9OEfxILh4EYKEuCU6f9tZSIbkO+KrpK1VO\nyIyORChJjozd9KStHb52jzXANLIwvwkXSPEarSEzeotqFF8o2fUvxXZE4eOT\nGrj8UheZaaPuBbOEVvufJqGrIKMQTV9ZQ3QflrYe7DQd8b6Yx+wGG94xQhSC\nOOGVHuQCLOxd8c3CrsCSQMZu/0Vqi2iIoQcbYdvw1JnjWeikP8zW56ZXXoge\n3zQZEdUrj/B6TUq2tPwmesfKuEbINw06Rgl88DGQlb/rIjtqP9Kpo8XKs8NQ\nnrHy\r\n=3a65\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN7MnZFfPxQk7mCN3/YaXeNLkFm6AldmOPH0+sEebZ+wIgW/7AXaKIkspa53LzyU/yG+i6pR7epoNL7wMoos9Un+c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.2-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0_1643193614178_0.4235929766304085"},"_hasShrinkwrap":false},"1.78.0-canary.1055.300b30cfd472b5ec747019308070adb28870deb7.0":{"name":"@sberdevices/plasma-ui","version":"1.78.0-canary.1055.300b30cfd472b5ec747019308070adb28870deb7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"300b30cfd472b5ec747019308070adb28870deb7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.0-canary.1055.300b30cfd472b5ec747019308070adb28870deb7.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-gYB2CMrnN1bKRrteNnWkk9XYMEmluGOIXxeD0+ypvlTwJaWefry3PfiutB1Sj6rhM86kiasUl2FwLu+zLSF7qA==","shasum":"f8a4482f52ed293ccb253aeadcf1d5cfdf8fd03b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.0-canary.1055.300b30cfd472b5ec747019308070adb28870deb7.0.tgz","fileCount":904,"unpackedSize":2438000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8T3FCRA9TVsSAnZWagAA5ZoP/15969Of0XBPY4wuerhx\nW0AS0OrQ+lOJfreEreXDoin7JYRTj+q/adKQtqqkfQbg14yY4OhssxVFs/u1\n6Ct2zoZeIpeoZUmLXY5jCY8q498EyC9uIo28m2QOlq11j1PCuHKfQ97cRB9d\n90/4qeOKjaftbBk9nY6l5nXh4XvWC/NGTtKGva+iDjQUvWVHkOyoFkC/npmW\nATESv2UAPEsQ55AjRIbUxEc70f2HUPtdlCIfKtvZDnHPLpoExMsT2J3NZicl\nQpv5InjOmtIpcrAWCp/MrYa7w/MD3JsT9kL+u8OkHxsNorJ2ev7aZ2A4VT0M\nV0ifFPCyyBNbogF2ah/SuAW9VjQ1cU3Dt17dEGhLUsz3eMJtvZhrqoXoMEnU\npkgGMN00wAV0Mf4dSaalTYeUeg/Pe/VFugqDsgcye2ulaefb0PTPzhL/zrbp\nWdRDCyuD2yayphRZAv2xFPUsQGO0rC3WCne0vJQI1IHiZ6iFM54R3OHdDaRX\nQWobs3rkOjqCXOSD6/HQW+mwjHDQGb6fZGAM3JLbojIhQqUVYQt3cgotEkAf\novNzW3Xk7YWQstzTBZjdqhRnyJHoTb3bcAiiihFTmeqJFkOJT69w3pP3DG4e\naxb+nsTyWllcGyuQ3+11+R93VE2VWwI8IVAISQv2s3pZQiQhh2q1+zSjRXyD\nESzd\r\n=rPW5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN1GYA1nVyVQw/PqPcXNBsAWRMhlgVkOtIgkuNiaP5tAIhAKtiLMAcYcbt2yLf32nsQ3BM1vAJegULd72mSMc4d1Gu"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.0-canary.1055.300b30cfd472b5ec747019308070adb28870deb7.0_1643199941206_0.31862430572218736"},"_hasShrinkwrap":false},"1.78.0-canary.1031.7584e23127494db626e5a707285019ed8ddb0024.0":{"name":"@sberdevices/plasma-ui","version":"1.78.0-canary.1031.7584e23127494db626e5a707285019ed8ddb0024.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.0","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7584e23127494db626e5a707285019ed8ddb0024","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.0-canary.1031.7584e23127494db626e5a707285019ed8ddb0024.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-SZkvwFkbyAGFI70MedIUWSXZjo/YNH15aVksrP/ymVo62CSQRJm3geRMrkAWP1WvFavwJU/LCX+AO97FnNr74w==","shasum":"007e353c7766a9ebcc678138dd18811659f4dfdd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.0-canary.1031.7584e23127494db626e5a707285019ed8ddb0024.0.tgz","fileCount":898,"unpackedSize":2425038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8UECCRA9TVsSAnZWagAAPLQP/1FYpXN2RwW1CtAPJvmE\nIekWAHtwrZ84hvuqv/+Uc7uULZLB2XKJqzVflGOPUzc2LZaZUtLOVxqPs7Nh\nFVGBcL4h1oNin61EKj2gnc33piCMKlKNhHJPSHtQ6kkP6ebfc3F5NouAZI0S\npMSQzvY71C6ockonTMJbXg3VbGw6jWRsDJ5w6VI9M+nEe+TgR/AsmYZm6TZ6\nAqpd+oWHPgCiIrPZ5wv+qw9MbwZUsKkhD2EY73+cM+kgEXVlIOUiK27u36gA\nBnFIuuwPnvyUdO4F5at5IkbAogjsv378MH0YPENVlhf3gTLUWmgKmoAeS3Ii\nwsWHHmNvrT5AH6cewaZXrxjAHpIIl8nN6TMNv1JTtVGUHjgZhkqq13OqKfdm\nvTVk7Kbyken6I/UKRsnIcQkdH/AjRD61TNo2gUrxiaJk0ynoQA5Z8dZe+tql\nYLO0cWcO5KKlmyLeWPQ2CdUIkzpZSnpXg+bQ1I9g5OwpkmH6LEgv259eOLk+\nS8kD+rybHK7dbCEvOv/5u51ofirEI8HQuODTij06QGar7NBm9mrgjBpp3qoe\ndUubE/GrCNJRuf5SEs2rCWEHl5zzFl7YeWAypnj6bjH5/Ot5lB1xTsaYopr1\nyMz/lOff3Wa6iHMWzFEIV4eHJ4y5qALkKewPu0ods165ofaT3C3rD1CuzBDe\nas0V\r\n=LZFk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBTR+XSivxaxQwCZWiNiZWrXdHFQA8bGVBnJt5eODizAIhAOSDQMvU+zZcR+Sjw0an/ggtN/kZMTuR8BBYes3HzWAB"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.0-canary.1031.7584e23127494db626e5a707285019ed8ddb0024.0_1643200770271_0.6800434398504311"},"_hasShrinkwrap":false},"1.77.2-alpha.1":{"name":"@sberdevices/plasma-ui","version":"1.77.2-alpha.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.47.1-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"1.64.1-alpha.5+6f84936c","@sberdevices/plasma-tokens":"^1.0.0","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.64.1-alpha.5+6f84936c","@sberdevices/plasma-sb-utils":"0.46.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6f84936c89447c4dad71d1e726bb9f464b2f8458","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.77.2-alpha.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-ONLffAnGBugSXWSiTkNKiH/725+k1Ru3WB+8JW9vmhsD3ot3ZNzy0W004/u2BcMGQT0Mow4ZUNqskfEZmElqSg==","shasum":"d57c613ab8e8f3888b591d7f76bfefdee4052da3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.77.2-alpha.1.tgz","fileCount":899,"unpackedSize":2400959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8XKMCRA9TVsSAnZWagAAC9UQAIPksRJvz/m1C0YZ6S2G\n4WBtYXTo/Uf7FLQZNzVUioHF8gNYRxKwt1K6TEsB1RoxPDcIrSQzlPtNDo3H\nyUXEAUZTSXzMrDBEvQe0VOgo/0kX5PY4qbckMyVZihkyaqvgBpfPvCXSm7Ma\nv/+sjrqB4M7N5YndsRZLKUP3344TraUocUoA+O5pnnCcw0uq/eS/LAlab5PL\n7XmfLlsdmGiBBD7ADgkCDasIe7SqGxVpOcaKIoihEJjvkhjlpcskpwu1MWVo\nY6CQrwTakExcJuUMYHOdoyskPeyKF3oFNWqKpRmkfVEag2ZBDQ6LEqYrMXad\nToe1SfI5ajeFiYI6l9iqhNLei9ypHE7QT3mwbianBnZ/LiBaVg2ZfYVuSmab\nSTHcWPgR0/U8l0rBW4lgRDXSygdfjcLin+BUyv0KfZ6frPkcBlBnDNoOHPDl\nrA2US+Y3vTePeDe85td6Kqm25ExXFhZgJsd4aukYguplQsMprRsitoC2jC81\nWOcOwqZcwJZs3v3JjUusWOtie2+PVmQp9JGXy9qOx40zQQb4WhEiWq6aAeGc\nNyv4HtSxyxd6hl+sKXOfpH6m2Btitz/r8xHemeVjLbnS7kS6WNTFUkWMZich\nWCNTbT5VxjtctOdQFsuDoPfZs0PFhUKqeitCpCRvhBQ22GrPSsXAZ7MLcF2J\n48rn\r\n=Z5t1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPOIjHJrB7+l44vY08GdMh5O3rw6IAhuN60MW/wU4hDAIgXKsALnnliM8JOTFeJbI+CJv48mWxEOAvA+za3pJA+PE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.77.2-alpha.1_1643213452189_0.06031586494795671"},"_hasShrinkwrap":false},"1.78.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0":{"name":"@sberdevices/plasma-ui","version":"1.78.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0","@sberdevices/plasma-icons":"1.65.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0","@sberdevices/plasma-sb-utils":"0.47.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8207b5c369d9410fc29b1295a07b3571ecfdb81e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-qU4rZAhx1NcbjIYPiHRRjdUbibWUTu3vxHlgMC5hdqHSK273YOHkvBq4ioQOlzQjGxMispIlXmpDF/tJQNw0GA==","shasum":"84cbffc7ae91745d0211a9e3e7fc826e2294c113","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0.tgz","fileCount":908,"unpackedSize":2436336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8XV6CRA9TVsSAnZWagAAD/kQAJOBCL9xHqbI6wm321H7\nhuwDoH1dGqJc1Rx2Q2rPJixZCjkY01AfOGgSEMocYSxG6u3Gha1ruBNxRk7A\nS5EE6cIgKagWLAMW/iwwdYsJE3jSUECKoSG42t6OLF+ym2ReukcsFRyFBrYm\nMxpHmY5t1qUiCImpnHKjufz2g4gzsA/dV8KinyVHYAf9m4CdhjsweK0QQblh\nPfKfWxn7F9546zOAhnEyCmoOnAsj85PsDcqzENcK5KpUxO11vpJEha6v67UW\nTOU8NDyBxqFURXmozprHH6klMItCM9Uw1CaIs+weKrEStbY1VmvNm+otX77H\n7vuNxSCZ2Nffm7qTkaZPZuJ6PZpVVBm+2Ktu2q58xFiF8pM6jDLsUEw3kqMJ\nRkr3dkQ3gnO2IH1FJGEWUBcyyuU8F7QsKghRSX0Ouht2m/lEwYyUXEEIgghn\nHH8TIN2KcDtuaO7zNSw92xvp1IORB4lv0gXV2PjyhN1en18vYmiGpsEW1EpQ\nEW8PCOhoEMimsZXe5o+tk9RsWwCGplhSfprb3HxaCL+KQQXTfBC3rw7IOTBo\n/Dq9MEFnl6+W0+2sAlC5/AAvpEjwXVOqR1IuRsQGh7F7YW8DkPNDxC16dViZ\nfsHxQ5np1tbyDOLjkcePzcp8+V5n2lATAy362f20hBpepdfxuKI0SsdN3qaP\n4Txl\r\n=Rlud\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeEAfr7D8+dXJxwrhHD4JMtrxp7M6vMo1MZ2noPafXCgIhAPSeV3yXLSBGJ3YMq1tVZZpe1QNS5nzyMFC1H03abi1o"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0_1643214202151_0.6209846626170397"},"_hasShrinkwrap":false},"1.78.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0":{"name":"@sberdevices/plasma-ui","version":"1.78.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0","@sberdevices/plasma-sb-utils":"0.47.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bed176d4e344aa61f840b35e2f7bbd4838099897","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-qdq9AqJlaKprivkqjB21iEChRGkYEtThL539sXsi51D2eShmWYD0xr2iKucXlRqKxjkdZ1GOUa+XN+Q0LXDzxQ==","shasum":"dea1e9529add1a995795e141be037f705e09ff20","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0.tgz","fileCount":898,"unpackedSize":2411286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8jF1CRA9TVsSAnZWagAAP6UP/Rpxfk/dGwLrOqXHf0yt\nYFXOyhHPsauRSMySXR4lpdH0YYe2LGSsYOJoeG0A6zbyS1SQhhwxrkaOQz5P\nSNhzeBJGEXHWlwBfVGvEOGV/fNy/pf35wW6MSSKTwB5SCYQo+VHmU34my+LP\nOsuRGtcHkwZF29tsihUHdHMNBrsV5Gg5GJBvhVZDOcN8dpzVe0FAcfovnMgr\nNK4Hpj5OmWpFJUt3W4iQHsvMu/sbEJLCE3yQxzAq4CnBHu1DhtijAkGvpUSE\nADgzG8EcwmD7LbcevjjH1rh8oVspEXGmn56uFPMUG/upukSxj/Ph++qXIzXI\nTucDqD33KeivMA3igXYEMg+8Ddq47wJP/Xh5cH8K4nazugiJ6G4NxpguqwG5\nGcZet3AG9kXd+IMhHoFbr+SPcH6SpgAcUkZzVw1e0Sp7PtdfkIPB/LFz9VRS\nuXkeo3HaJ4hDyJAZwBth83uIrgGvE7BgjL33m2PR/DNvN+ldT7Pu8TlPzuAI\nGg1MuBdg3w2bj/G4GnohOUIXEOPtRbAtSEaomCtv3We2kdvzJzoHYUwgMUYi\nju//nvo60/UFIxDcJtJQT2yHcNbwoHINgmdQm0PX32ua2EsgDiCQKv3oy+MC\n3JGZpMV9Ri+/hfq5tTdxb1cg2+6uKvor3v10wNObQXmEizMJR263q4Zafbej\nSHut\r\n=Hcdj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD517UWqcAikjAgK117E9AIBz6n1DXVPt1NY6LYAkymCwIhAOcHo3dsmliqCmRdFHKEug08truTO1mUwMKBcL8oqdYp"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0_1643262324681_0.5665990798181251"},"_hasShrinkwrap":false},"1.78.0":{"name":"@sberdevices/plasma-ui","version":"1.78.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.0","@sberdevices/plasma-sb-utils":"0.47.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"31cab90c4dc05308c03778d42d1053d6b9c73d5d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-nCv5BHv2foew5QtRGhJvJRJThWt0TOP6a95iKT3M8rq97rgbX0ndf+gnxND+UrpdPvhA9vf0x+PJaIWImbHkfw==","shasum":"98fdab2bed654bc1060945436d3432d0c184cee4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.0.tgz","fileCount":898,"unpackedSize":2411775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8jmTCRA9TVsSAnZWagAAOn8P/RI09rXdDVwqRh5Yemq5\nUJkhdcczl6pfIwoY8YqEijzxrhzWStNK0ndigKVxiLPa7VY3QdPgQAxGSXmD\n73uiOhQOGBy7tuH9mtK/ZjAD+c3b88sqRuVYaHwfrFnA7Oz8UHRhyLNlIggN\nhJH/vb8hjQehfp0o40TizLKz5XfpvxdjHhpiSZCGc0eFcetGBT7Y1Hxsg0cr\ni0JUGilw6gDvGMhY5pUBK/UXT416QYl7Kh2iRLWfipG6+uWcYwd4yjv/E/8K\n1YAy/11QtGc9PHv5XEm8kYzTs5v8SSdAveLQLb+OMhvmPHdLULaBXT4A+Wc6\nMinqYBXfvMvzUTgvCmM0SuO612C5dlJQo0Rnoraw1TlVNdcBn95AFuI6h3S+\nHvNFW8qgujkHi7y3BWyf+HSKox4vjxLygzB/tysjdwaH0YWdrp9cmT6MwdtD\n7OAVSsjoFwLwpDHfuLyW9+10yndzg5Ru26OUXUTzIZjw1EGfNY+aRFhct2i4\nb86IyshISMLy0lOz24fNOx86K+oycIDe9jgVhIpRzrmknoxVsl/aIunyNWR2\n5NhEHp9bKAEatS3HKICSae3/Oe3VtoM7SsH94G39StcbtSfqv3E0XdxAFxj7\n+HircPANRCKG/3npBX7ybj6DtM7vEm1f+/116cGgppC/yCGSiuarKLJP5ljc\n5oIO\r\n=Q+VK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHhsMkJbomzV/7wvgzw+zCx7rVexgxwNEAdd2//VyYVQIgaOGnvDUwtHBbPTxBjhWWUBMzPf5LQcvLFGhkOFyn6k0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.0_1643264403039_0.24142424883245028"},"_hasShrinkwrap":false},"1.78.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0":{"name":"@sberdevices/plasma-ui","version":"1.78.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0","@sberdevices/plasma-icons":"1.65.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0","@sberdevices/plasma-sb-utils":"0.47.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5dd6b61776cea0c83a5b702c4c428978246cad1c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-vieP3h76yI6Vyrey/2uLhAlCSyEjb0T5zLoZ2Eg0Jo8FALv+iJJZ+AAJ/Fiw1AU4Sn6wF7+3kjxqLGqXasph1g==","shasum":"97b922eb3052c28cb4207c93e06c2a964fb65e08","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0.tgz","fileCount":898,"unpackedSize":2412050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8j8VCRA9TVsSAnZWagAAGG4QAITgi1kEcCDH1aQmwuY6\ny9Dba13xSozXchzHSD+ynz6FibKjZHwBYtwEy27NVBvfBpjWtjEFd1G92z9h\nxCpVTY8yUUFdmJw/dZQJNe4p/2Nk4zknw2PT8Jz+Z6kn4qNmiC5nxnD9i5jp\nSXOmEPoocml3Y8GEnlzI40KeDNftliITtS9RSMHASE9j3Vk52Txr6Ief6l4e\nwhjwCR8dFj+/9b8PDxzfbASjJamPIOkvEvShluO+7wZqOEMj4TqmJwa4nM39\nLGb2EL/VdqyYl9E20cxNdaXGZUjULf7q8r4MWzhKVfjf10Fs3a4I+JVtesqa\nDpcPHLzo05oKSFFh7Aq18AcfxagFW88pNOooe1kduoH5iz1M2ZK3NtPY3ksw\nUPrFiB0MP7nMHXCW6UQ6fHScdGHqTlPU5MpSdMd4C2GqURd4AyEMXCZyE2ZD\n5S+LtncfBYp/zyBwLTcYDXBJZ9yfFETlLRIISDnPuNMew5mqd5cOnIILpS6d\nWAfpf5Fvaczf/vI+RCtzo66okH0oMbqe7nF4238tA0zYD+DDGjwY/E2i+wRE\njGUzWhY2DV2gleEhRSeR5Va5sdx/4oxJEcKQu3PQ8aqiYhoJDI8mMCtlttzE\naxHjkeRBDDODYwdSd0aTJuqfRL8aJdhCj1b6jCjIsn21Ds5sQ4/Uajcj2r1X\niYlD\r\n=EuEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLmvHNXwByZMj2fQlytepa9FYWDLukSOvPfzpf8nDv3AIhAIPo2zv8RdpxygBj0FSW9fry3njdu7EeTOwdMNR1JbCq"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0_1643265813491_0.5553683132271305"},"_hasShrinkwrap":false},"1.78.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0":{"name":"@sberdevices/plasma-ui","version":"1.78.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0","@sberdevices/plasma-icons":"1.65.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0","@sberdevices/plasma-sb-utils":"0.47.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-FTk2akv9+8CZk7UYpNhZYBzMsVKVpLpnpDO/rvOgrM9Q3T36serEjfUI+m2Pb9H0hiJdzEs4SQJX0y4IL1G8ZA==","shasum":"04672068c8c7aaa9939d46adff19feb68dd4309f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0.tgz","fileCount":898,"unpackedSize":2412050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8kIiCRA9TVsSAnZWagAAVw8P/0dvSQ+BH2OKpDapTCDc\nvVy04DqQd1n4AKiQugcqBZ0djxW7uD92zqJmQ6iVVimAkotfEgGUh8BedCwW\ntQZ+I56musvVwdryalWCpwcuwih/lCd5jsx8UQnmGmg6uvtIsWwXUsTncNVg\nW9FwVKAisNP6rbCNwPr1c6cJVlc7seckCZeu9mAr/RPlFcXCBj/O6+lSQnRq\n7LlXAxRpwWKVEayhPKBLOkgrLMhC6O+fvVom/9kkRVDnHZe1nxokZLirZv3C\nQQ1iE0zyWjCiKpXjYCUvtRBt1QmyjQaQHhxb3qzwoM4pIdpVTyiT6o0PC1AT\nFSwAFiqZejPZ79Yvv109wf9cp42Ih0twsd4tTxhaWwFxWpp3Ux9+8wRH+RoI\n1M0WwpKSuHzpbFklweurgMlUUUTogSL1ZE/BzfHiRLFFJzekiHfPdCAN/ELs\nCOw+0F9Tc2Xn7xME1qsJSToSbH8oqz1kILR5HIvQ2+rO7fYZnJBU7C1oa2bf\nvl9qV+lErJ7JavLPdI44+I0B8vGOviM5NTLKnOlhbGVCF0PIbWorJZ3PUVmr\nCKTTAvKVX8SFA4mM05rWBxb71QvVONxuVMkfflnOuNky8ARTuxPyn2DEhEPm\nL2KjGHVmkImYq7zNA17KNQ4YIXbS9gqX4stTcWWEsF1MoBF4jwKe6ZVZiCCM\ni6mJ\r\n=aTzc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkybIUldmuFJv+mPBunDHL4gQJIv6ZSW1UlGW57BEqZAiB1QSHjpsbkxPhZtKh1Y4pXekoVrjJ9in/3z+Bnu24MBA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0_1643266594286_0.8389977330937042"},"_hasShrinkwrap":false},"1.78.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0":{"name":"@sberdevices/plasma-ui","version":"1.78.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0","@sberdevices/plasma-sb-utils":"0.47.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-xYADGYz2n5IpiygoK/IHmMLA2NrXx20jo9IYanOt4eqo7+a+TUen4SKgsTVjk0XA7vXwzX2rCyuTmNTx7MROww==","shasum":"7ef2a4e77b4da08888750159187a2b4e6552e5b4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0.tgz","fileCount":898,"unpackedSize":2411995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8kf1CRA9TVsSAnZWagAA7OsP+wUXwgHq27lZZ5yl67Yh\nN/+IAuuz9zlaTvPPCvXJXbPTyIEEZKCKSU8fzNBlRYELpxSC0ZHokPmW5LpZ\naT6gYtGRj9DkjYw8almL9571Y5AX6fvAu9HT7OdJ6GUdVtf6byDVYGKIDkrN\niPNFvs/jLux+SvRkbuq82pGAPnMX97534JgHrLKS62o2NxQq7cQOeNynbMNB\n/8AKacxTiQatiKhWOiN9xrUBNm3E0x5TRpUtzGtIp/YCPdjJqOG5D5OXvqd8\nEekQRmacyfO+ODriBbi38rm8Z6eUKWEvHS8St1zp5DAQ/tDSf9PDkgT7bg/q\nfFLbcIy+nJaQEKoqGUnR5akvfIYUg0NW7i8DPp8ZRWLAi/NLpQixxgp9M8y0\nNUejD5RtwcW4yd29bbBuY1zEP6ccKR8fBMxRY3K8QSVyDREcog2zZ25xpGWy\nlfvezqTSCOqiXQlgYV/nDDUq3U/fQvx5jApeUSA+HnR4mEp9GJrEt5Q/ObiX\nsCKww9fKXWF0L7Uh+a6kvMQQdBL/kpiePrpsbRkQE8mXDnIT8J73DALA3oye\nqdfUF4tOYE1u+HNGh7QXy/wFvopXZu/+L0OTjtOkNoDCQQvdIQS779i2BFxQ\nOl1YhkNGi2bvIyZU/sKg/hVmbYVyysCjAB3EXUKCN1KAYzfiBHtzd9JKR9YE\ndSWK\r\n=b8tk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjjU8LGnVX05qzx4h/h9vClmwF6XOlTBXssZmKNWCo/gIhAMZtfKZulNvO5igXWFrmHDDq8jD3sHgjLSvRyS9R21Mc"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0_1643268084864_0.5593440200790321"},"_hasShrinkwrap":false},"1.79.0-canary.1051.f299438a3882aa1f90da1834e30c40425220d09f.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0-canary.1051.f299438a3882aa1f90da1834e30c40425220d09f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.66.0-canary.1051.f299438a3882aa1f90da1834e30c40425220d09f.0","@sberdevices/plasma-sb-utils":"0.47.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f299438a3882aa1f90da1834e30c40425220d09f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0-canary.1051.f299438a3882aa1f90da1834e30c40425220d09f.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-3/RyUUKBCX5v2UmcQwqCWJgrH1z/y4zLfnU3TuZ0EcXoCKkLH1d4tEHDj+0qwa9olONGzw1MiuTqnTK3etX5IQ==","shasum":"b05d3af5eecf6a2a2f11b77ad3e234d326ee08a0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0-canary.1051.f299438a3882aa1f90da1834e30c40425220d09f.0.tgz","fileCount":898,"unpackedSize":2411885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ktWCRA9TVsSAnZWagAAS0UP/R7Um9n8lV3OJjJYBift\n6R8h41J92eCeSmzaaFwtf0HvgrcTFkm27LmKhq0Acca7ISr6hEiZ9oM2a8Uy\nHKhX+9usQdLchul4bg1qdUuB8Eh3fa0GSeodk0UVVqG99/KGAEpcCjBehvq0\nmlyTQNfs/LtiZ511WD5kAY3wfP1rzCTBvFuN8wDAl811aDLQ070lQkQ+f+jh\nFtEV4vu+ypHTW/CBAvpUx77jXwKTmoTkEm/86DWhHARuGxlszVSYfbO1qGy/\n9FRIoffQ8C3H5BWRHaXB262VSTvQvnqxMxfhHTMp6bMjmf2lZIul/HMk0yHN\nxYrfFT3bPjf+c5CaAe7ScEsn6kyeAW+PrGOQaoy5l3ymNeQhdjYn3d2P+QGf\nZAr/sOIK06xrS69fR6pcN/q+TSWkwDOqqDyL2LZPYgq4Pcu1DP2U3cdbbI2G\nOmaVbPL8ZQICVZsj6yaa9hcRKiSMStU6w7GdtjRLMwVpBk5LtYSpeGdaV9q/\nXTYDZKOheaPrC8ooCkzsjmWZ9vwK9VTWsCjpP7Uo8oQFn6P97U0UVeRR3J5U\nFIRuXcjtv+AG/e+QOlZmSBpUUIWtNF4fmdW5tFWAjGkoh2x7rUNuyKaD2IhI\n26v4InnAq9wo6eFRkTonv3FZgJhBRCgN5MAbUyQLvYzVTpINKWHcTIHyOIBb\nolPO\r\n=6dQC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZlzIAqY1zOYuxbBb67PyYBdYInYE6tPQwjD6S1GUegAiBdxZILG188xxyzI4J5Y+YWu1Eyc/KKVGcMCjYedtjEeg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0-canary.1051.f299438a3882aa1f90da1834e30c40425220d09f.0_1643268950536_0.4754494147342547"},"_hasShrinkwrap":false},"1.79.0-canary.1031.265986cfcb9fb2654c7b226b074db4df2274abe0.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0-canary.1031.265986cfcb9fb2654c7b226b074db4df2274abe0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.0","@sberdevices/plasma-sb-utils":"0.47.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"265986cfcb9fb2654c7b226b074db4df2274abe0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0-canary.1031.265986cfcb9fb2654c7b226b074db4df2274abe0.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-TjdlnEeBSOvCA74UkneJ5BceQuWEptme5P5yvVGUBXxJE+jQptpEbPXa3OM8KaVTQrR9rZT+hRr55cddEjsUyw==","shasum":"f3505acb1821a94096933d9bf689ff0f12f19ff0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0-canary.1031.265986cfcb9fb2654c7b226b074db4df2274abe0.0.tgz","fileCount":898,"unpackedSize":2440647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8modCRA9TVsSAnZWagAAGyQQAJ+tyYeUsbqZD9MWDoz2\nzxTlSqZTOpeYnxbnBuwr7QD1vcKaNgrdwn4rzDe0z2I9qWygoFidoxhzDOgl\nadIZt6ilIcCMW8Gm4jddZqmuocEAlrjN/y4Gdjk5FL3lMDeWNfEDjQQqMPac\nDY997RdTSWD0/JLcj/OSEMGr5aASIk/kVpBFgweE/x/0BiZE/6vkzcC2Ei/C\n/ChRsPNhAaMwVSjTnKwCt949McBKaSQ8x2Uqx1MA0ryDVMN5xiCQAlYc45FS\nHf+CNMU+uEHUOlVxhwgnyAT9JeXTWJhL2GmGnXMiM9eljVVLzm0SQ8LiOivz\nba0EoJRfnNRgzKZqnxeYERHj0eSAysxPnVoNTWjojlIumT7nzl6bOCMAjJ6s\nMLndoLO7c+lg1sWCHjW9xic7FJoVWKw5kYKkX39OwtM1lBGjtuzeVUe1P2od\ndPatTqz1ehLd3LY/WiH02a1/oGqyjBaYlsM0dFzEH4kV16HlqeleRbNaLfa+\nefXu1rg+af5o3BiOOw/RbsNfpf2B45r99OdDje3NMZ3Q8A3LYA4NN6ny8YY7\nAlI4+5gybMz2+12rrWth4komi5w1Z6JNm1GhuFU1mV90c38fjecFIoSc/EYz\nqdbYXYu55EWJKsOIztZWGCjMl8YyAw91DT7JWnMPfTtQlnnu7MQdwSMnltvP\nW8fF\r\n=cBU4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICo8N87c1Mt0JmoT0BLFc78sB0Hia6i24QETGLX5vBfvAiEAv7bdhvKdxxXPCo+nr3jCy/cXZlRbwZe1aAVnZ5ZQx3E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0-canary.1031.265986cfcb9fb2654c7b226b074db4df2274abe0.0_1643276829384_0.012972270682732878"},"_hasShrinkwrap":false},"1.78.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0":{"name":"@sberdevices/plasma-ui","version":"1.78.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0","@sberdevices/plasma-icons":"1.65.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0","@sberdevices/plasma-sb-utils":"0.47.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"61cba54eeb72809cded2ac92a8bbe63579f882a3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-Oy1ptm8XT30EhJruaUhz9kek8DoN0LpjSgUM08OO0eMoL019NJa78HvRXBGMsmR7m1DkHLCA9LKJDwwHjnBVaA==","shasum":"2b70ab86b19090f0abff38840263b6b578bde063","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0.tgz","fileCount":898,"unpackedSize":2411919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8omLCRA9TVsSAnZWagAA9goP/jGZM3ratdF0WmlE5ppI\n2JW+U8aZs2u23bj9kJEEsroVCJVkQh47ZmgVVWI7406ih+yjyOIXfc3TlUXY\nK1/A94B/3gZ+kPcsAIeXHtS5LFyVjysNPnEM5TloJyopaPs+Hg9Fy+ep/ZZY\nulbUSfM/tDD3nDXpFNXmFbr9xoCHKA9Nqqin6LHETIDMPm1pRM0GKtJbVTkn\nuI+LqSMiQtUp1hhySXlAlFcwhnC6tvEdWjaGlJVh/aH4svhhCCqy5sSRWUjC\neio2hCL9MwO+dwF2qpiYq0peV2z5WxiZWtak9iqiw30XriWUq//E757ERGoF\nDT34XUpwZGXdO8OkR6VwzTryILIYECtjfDLJNzWvDMHNqcmox4wYtI8EGgR1\nJQAcvxozz8eSKpMZ13BMN0ZqJWCtfZuLS4gSWr4/T2zURnccv6OFuAHaErzA\nNRHMwp1KC5C4UYxYwo8OBD87TPF0wnk2mSl+LtYLwcXxP0WGAzyMyEhv2JZz\n1rRd2fXBruOcpWwMJsbYjcWx1DJHWQLpZ7HbmW6oxMObPI4Csih97sDnc95o\nXzCR5MpKqTwJZv+UWTpo00hacUmY3oqFRjrdKnmOZwYgaYoHlCrXKfFV6muP\nT2ugWl+51Q4Pc6L1a+04ETRJLjTdfMH9vyO9dqodX4IgjvPwGeiBvAsrMj54\nAYTL\r\n=WTd2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDTubMoAAfBRN6a4Eg7sjDnLYS8s4YFlwxRW29wPZvVwIgHymTl00fC7ZWoKjve2KmOTQAf1So6AKYHXRrMnWjQWY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0_1643284874971_0.38507308585193845"},"_hasShrinkwrap":false},"1.78.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0":{"name":"@sberdevices/plasma-ui","version":"1.78.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0","@sberdevices/plasma-icons":"1.65.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0","@sberdevices/plasma-sb-utils":"0.47.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"66ad430edf68fa11ed9c90d71e757555904513a8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-QWi+EUIDJa1FWgqXTIdBXW62Z2LuD3ckp0NXG80BB1388lnaemxeRLLdPZV6GWskrEgg4vIfKYIjY2nkSZrp7g==","shasum":"54b733c5423246d30f3d7afd9a8886f0f707f08d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0.tgz","fileCount":898,"unpackedSize":2412050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8peJCRA9TVsSAnZWagAARtUP/2T/9HMCvfX27t0QUMdv\nDCvtk1O6DKu13v8SEHujoMypGWnVH0Q+OIp6oW8Gb+xAxRSSmkTXo53GUlC+\nBxoYK1TbVRtAARvFG3fw+GLMY+Q69vZeg14KNF8lv23H8Fw/zx6BoU9Vc1OZ\npF2bI4JjCoLUl42rAZKe3gotImOzsET0i01kERfkSYvM7NalTp8zotMOI711\nhAWhQxdew3UWRj9V5QqBhDtZfRtxUyVAtvd2VyzqGVGf6blQdSe2E2paMjM5\nS2Qk+4XYRHt3gkjS3lJHgkrTOzlyhMoroDMT48mQ2c+ch3PmmQbMgNCYUHBm\nfmrrh7KheIQz4X7yrb2ByXOcztlhxeSHoYXaWQZwXcDxrFslu1exS1KIJ0Wy\nRH5Hb5wE+vUe9HjcGSCat1NeKFYPhwVaso5k3+ArUwQ1ZDSgZU7pcUWs5/Ek\nGEoVfEOQaFSlQ8NI41L73DELgxGdEzCJYyla8Lepi+Jv24iYMl2K+iglTykI\n1TS2468dRqH/0MTX/b/9zE1SffRCsS9D0w0oMhwdoRuP46Ols9BsESkh8VCc\nevdkl1t7zhAl5COhyNxdnK2xdwBTsQ5b3s3iByfFZyNPq9hD39Vcyybq1gs+\n6T6/jWfJ/WISngvKSa7UQ7XapnMwHlhlAygfxp8U/fBwKvQFhMTCOFfLD41E\nFpk5\r\n=D63X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1Fyzgia++9z3NDgeStKCdRSwUB1mP/YDINSmS6chlqAIhAKMSv9bOdaoWiK192uMPbEZcnsv7jwZDVqVj2iN6T6h0"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0_1643288457747_0.2089839439981711"},"_hasShrinkwrap":false},"1.78.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0":{"name":"@sberdevices/plasma-ui","version":"1.78.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0","@sberdevices/plasma-sb-utils":"0.47.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7a97775c8db182150b9fc132fee25161e24d0695","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-07o3ybg/Z127guTJjJieSEENGe/shB9VCtikUqeqI3Uy5JyNIP99RPQBlp3Vwi1C6Z+fkUrCwEoQDfeMF3ZjmQ==","shasum":"52578fb0346a05de77d41eaa95fd9838ca4190f8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0.tgz","fileCount":898,"unpackedSize":2413681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8s3VCRA9TVsSAnZWagAAyisP/3zj6z7XstcaZK7J2Htp\nRoRaWdxbmxm+/NOKQEE6X4S2HF2b9DJW4oCBmSQEPS/xHB4G8ij+TjydeQaw\ncsKr5UrtWovTIDmeuxNT9muyRPRXbAxcA9cljr+1osCda2306HZZddd5toR5\nn89wcgC0us2xxEzt+mlyQyoYu7/MF0F4JDAeuoSpLWdK2WELaq0aT+AgWSJd\nTJLoQZY2vY0BAhHqIsiWHOmERaDTcKid7m99bvO3/An+Z6fFEsI9HAccvgPW\nQokkxwdrmhuFn55v03f5dbqimgZ/zG5kkxswUcmGzl1frEg3Qf/VGrJUGMDY\nCEgFBMou0og01WKYU3foWjGcxboVGIbAlSeUyhqLIJzzdanEiAdgFibvFRQ0\nexJR78udPjkezGSn4cGtTQFVQMMh1/dqdAEjpC7jw5v3KhHe+ej07krPOXcJ\nlhRPP78mDu9mof7j9PTUl9UKDlOxdqasHQGcQGNy+QK86xJMamykrd6KpQ7j\nZqmWKkzgczzn9o2eO6uxfyfPqYn37RifqUQf2eTieIdXmlOYjEiCDT4nq5Ma\nExAfs8awNbe1krNlKamO1RcHbzS+SIDruh9uyAxeulPb0DFxZlKaHnNF6/OQ\nd0GPxweOtOKIbFnpyasJwQuuSCehkVemXoRWwUwyS2xG/UA3xhJJN3M17ipt\nj1+o\r\n=scWz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzBbdV05tlGdfxJfDQ1duerJ5z+qN0D9uOLlw0j5qo1AIgdoTGhBhWafaxYcbTyxxUR8rdYK9CythMDT+EWSTMiBo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0_1643302357052_0.6052522708520129"},"_hasShrinkwrap":false},"1.78.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0":{"name":"@sberdevices/plasma-ui","version":"1.78.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0","@sberdevices/plasma-sb-utils":"0.47.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"77d2ec501ae5353903277ebd497c588d6d37815c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-sTemgs6ZQVYfj3xvPHPv2rmCJNBr8eV7SJBqSBpURifrI25pPKY4bD1RPU7o7RTXGgElsg5g3NpXg3e/uW4FTw==","shasum":"7931d4bf30997daeaae66f766422806ec950a1b5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0.tgz","fileCount":898,"unpackedSize":2411995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh84FfCRA9TVsSAnZWagAAeDAQAKBxECjPuU4Q+VC5+OjK\nAozosG//UTFAtwMA8FUQA7hjDwOt6FJKG+Gc7bZEZ/f1LrosHXh6hlNvn9A/\nj59QW2PQy1vktpHi81UDcJKrHVANr+4VagdoX2IQp+BZfK0YaZu+Zv+ux1s5\nN+m2tyG/d/PsvqfA6CR3zJM7lYh3zp6rKEyOIIuJwJh9xo8jOLBbKiNQbhTl\nx5C+2SKFrV5U5PsIhrWZXeAQ0bJn/HurO9mw9E7+KLaQh17NjEN+P1Vf02xS\nf/aysUbFuhJPgWEGBsTft1QtZil6+Q9SVZcTRs5m1KSOyv8OFJNSbvgoZ4ur\n8y3MKRdnM6qVUe2aC3CEA8xTaKAjrBR30Upi7Ko4iMzTAyGwFpNO4x1OCdGF\nGIhsyVovMoj7UkAQfKRTinf1dzQg7SCECuuQEjGuGSpc8Q0JkDfr4MuZwaJD\n99IV7HKvg59vhW57pVUGlLIV4/He98ZQPr7O0hahWllx7evJV+Fecf5Lwpjk\nu3fAvVSMJzIN1072Jb5OH1VJMvqGZHZX1tas0UFc7uEWu9qqLMwg2qugt/YU\ngi8KcIq6fbr8BcqlLpj/MAneueZsNfAgmNYBE9pTNkvk1EYP5u6zKjXCEs90\nSfCLiYMkxW9q4ujZg/MlHOa6Y9Bm9h1Z1/AG6COr7w7sXA/fVL+m+DULX7Dm\njzVh\r\n=fJIg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9mG+fOsrvdaO/hj9KHl4eJ/9PG52pn8+ZJb5wZxbDNAiEAn57ju3LkGGwPIKvAzbqiFXgeseqQsMnocbubPyo+QTE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0_1643348318853_0.20247499638706956"},"_hasShrinkwrap":false},"1.78.1":{"name":"@sberdevices/plasma-ui","version":"1.78.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e40ed33ea1053ae3095a38a04a143ee4d3de408a","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.1","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-7x3uGGX7l1RANkzeMWsGypk6XC0YB35E54VfH91Dk+J7pmmVvnM5LKwZz70PKiUL/XnLoFlcOclq+Z/wdI415g==","shasum":"27934c02daff9690e4bd190fbf7912ad0a4a89b6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.1.tgz","fileCount":898,"unpackedSize":2412003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh84yJCRA9TVsSAnZWagAAkMwP/3ySsuuRVnN7Wn62T3kv\nG9QWmlZKJ7gkmBmktw/pPSy75IUyY4nWHbnlY5O2hBs7f19S4NdsVO5QyYlf\nblcQUPQP3lB78J6gvx5VOQ7m82dyas+FZZsJ24TRw9tSV01+g0pDo113jjn7\n1HheHSMaGtXJ0YyyE9ZqfO1tDuTmiMRQ+e6wnOM6Dzepu1FmG/c/mtlH6YYK\niOyKvCa4VcAzA05iehq+8kuJm3C1a0M0eF/taOK+3PW18xRg1xG5OgYZG1E+\na5ZfbjmtMSJgUVqiCsqAMxfesBiEZeUEuPK8wSo6v1dSapPqysn6D/rlXO57\nhNvwr7buvGN1f1Uet4vzyqXixI63oCrAqjmNO2GpZzcWrEzF562M5Coe9zz8\nJXdM8Dt8yrOBWKZ2zaZVKcoEaRc3mbBXXyTlUni4tfIPD9WO+jgPUO9566Sw\n3zg8zD479iZ3o5ubKkw6ruR83dCPWCqOSVAgnNI88A6CNtTbuUxrizqCxgFt\nKORLmZLzIMHrV//mrl7leTrnjwMQpu4ZNUuTa/Sl3vBQNVcnaX2IZm669CbN\njjU6fYvgTILA3eUVa5HF0NFqdpLBP47mjq/48pmBK0inKlgzVHMGoqwG386d\nLV0YM6n80aTZ+nRrbxVFAAfsDnV7zi9VUMqIXN/BVsQled5qpW53e0SBtBd3\nuHPG\r\n=1kls\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH91Tf8nrF3BXHHNdQcAXQelE+flGZE8Ao0GIm+5VtN0AiEA+1mwipIRyWgsfg38wP62TqW2Cw/n5cSCDSkVWqJIpyE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.1_1643351177378_0.15548629259221425"},"_hasShrinkwrap":false},"1.78.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0":{"name":"@sberdevices/plasma-ui","version":"1.78.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0","@sberdevices/plasma-sb-utils":"0.47.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9e54d520e136b1894f82e8471220a8bc0c1f7c6e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-9G/KMqgZl6zhzktApzkHHKKEED5wj5/Nf1G3xHTaWQlfAQf2kqzYwDih4wM767Gh2rUUnhln6ZBorQD8wIqYQw==","shasum":"707904f8f6b5a34e246f80a9b0a6ffe27c063ebc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0.tgz","fileCount":898,"unpackedSize":2413892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh86OUCRA9TVsSAnZWagAAxD4P/0G6maVq9gkEx7t+eaes\n50ylQZOzopv7MQv0g/RL8tbcsBnvk84KlXVN6VoYxiV1MGQ7rfA8ynsGWM46\nPBch2zyhaWrss8QkN7PSEKY25GNKtb8mm+a+nOzjzhHCUsLHXTfTSGZRgLNs\nHGIt4y9enVCcG7Y+w5WbpCO8Gx0ZgxyjHbDGLztxPbyTiYHGTj/BnViVS4+f\nHmB1D7oCBDmJ/M3GVyVuaQntYK72vDZjwdufjl1cABqVsxHGRuG4krEwZqEm\n9XA8/SFiO5i9/CHh1R1IRABNs3SLh8YP2d1KxK7x6eiRMVYJEnevdXSBL+bJ\n9Jupm7d9ZRE1aT71nqtNaJ+6QFVdvkYR03lANkvz0jUQMgPxqmsIRheQfIUA\nobin9b1ymQHn2P6VJdLmlDgzThAiuHN2p78fJ1QR3cm4Id8u+yGiJvOiPC1E\nRJCyq8pQA4C0bDSHEm77PjmYzMAs95QRaEeVlQiUef2dTxi0d4o43vUdXITg\nLVfgbTACIXwiCTX66krR2f54U9Tayp22uBZ5KdG6K5mSY5PJuft0UCnjAt6p\nNobPJNr1ge+jQlykAxp+uOcpQIyUBerjUQhcxnjWebKp05dW5PR9SR7Go9/o\n+B7Opw9LV2JVgDo2FBmAHpmj0eyu0EQrzYGfPAmIq+2JYYlSSbKgFj0cKe+7\nbwO8\r\n=3fXF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC63jr1FQOKtheQ4+kXbJrbVqhHFiY4TV1k67kl/eydwAiEAsTJ+ey1eu+p7TEFZjVPSWfywM0/PLYITQh4ItFQLaxo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0_1643357076173_0.28020783010400296"},"_hasShrinkwrap":false},"1.79.0-canary.1051.c1085c5efba0b90f225384f297b1ba01a30013be.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0-canary.1051.c1085c5efba0b90f225384f297b1ba01a30013be.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.66.0-canary.1051.c1085c5efba0b90f225384f297b1ba01a30013be.0","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c1085c5efba0b90f225384f297b1ba01a30013be","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0-canary.1051.c1085c5efba0b90f225384f297b1ba01a30013be.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-dpMQiu1vVSHxDW75eBApkuw89+tYsc4fu+519fuQxMTNozXJHZN7Jb+M4BCbik2qqt4F9Yu6Ne8uQsv2KH+2FQ==","shasum":"732196700ab5f690fc3ea22c15397bdcb3a79075","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0-canary.1051.c1085c5efba0b90f225384f297b1ba01a30013be.0.tgz","fileCount":898,"unpackedSize":2412113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh87hLCRA9TVsSAnZWagAAxmwP/0X2GZC7d35CU/6qRYqn\nrvtih1vVNcbOSfzEyazx7IG5K/UD0micEvDGRgHWMo7ksAw+BOUzhuMjcOKz\nmksEZ9moBuIB01HIJb/t77IsRaY6qbUd1xlWKpPqXte09otRDH6D0mEW7yjc\nCEr9oQbJ4o2VqEB7llOgOJK/4lqnJL8dNP7u3rY1oXBwNNzIUOQui3R5wGAw\nl7gmR5Q/TxXkgPnSxdYYiwM20qXday2kdb+kNLkMGYPtsHBxl/5oWq/5+hM3\n9KnV+W2qa/pjncwHYlwW2Crn4b32gvA1SQyaeljgZkcRGKNCVyUCRwThsgAd\nT4d+AlEMQajyu4jb2Tnqac7g/v+0azxaIMwJlKTeoP65ksq/WqOMygnevFdf\nimryafjXm6CwPda7jpA16I3fczWYQR7r+EXObjSmaxcVm5bZ9A2nyoqgUwd4\nLb40lIvFmm6W8GlhoLWo07dY1bhHsm8AbpmfDIY2RfsnyhAoGczRVwuTk5Oy\na14qbbHus+ISrdqjsRfD3rCGzCNoDkcZzbeI7mFxzVFK21NBDm5gc73ntYMM\nVgveXPf3rWLagjLOpOKPec6RUdy44AvveGb4r0ClxQsPrrNnoyRLKHacM//+\n7Otk3zd+MdshBwz7IuhQ6p2ssX6RIDz3audIzCmWjZqZCGtUJRDcSXrMt04K\nyrLp\r\n=REQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEE0rSqfweF351ZlJ+Vl2PJu8sVgW4DKL06V6XzChioAIgLuk1r+MpK22lQcDGfTM6wV+NrsiZgCSulWlY2vZMUoo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0-canary.1051.c1085c5efba0b90f225384f297b1ba01a30013be.0_1643362379284_0.2812448508245722"},"_hasShrinkwrap":false},"1.79.0-canary.1051.448849856bdc1fd2a35de8766ef2d96ebdcfdbe7.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0-canary.1051.448849856bdc1fd2a35de8766ef2d96ebdcfdbe7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.66.0-canary.1051.448849856bdc1fd2a35de8766ef2d96ebdcfdbe7.0","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"448849856bdc1fd2a35de8766ef2d96ebdcfdbe7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0-canary.1051.448849856bdc1fd2a35de8766ef2d96ebdcfdbe7.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-ZUNpd621QXbAUdcpFfwcGhGoKOEa3DyPK9wnlJmLSdt+1hYeMTZ3Ui4xYNDCQ79yFBj0DEtpuvG562QahrjHVQ==","shasum":"1e850198b0d5f29f3159a3bcf0c1697e730f3bb7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0-canary.1051.448849856bdc1fd2a35de8766ef2d96ebdcfdbe7.0.tgz","fileCount":898,"unpackedSize":2412113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh878ICRA9TVsSAnZWagAACtcP/jclks77rJoSWYPlpHGX\nb6jB71/m//GtlNs9cX505x/ixMXikcGrqrd9kkkzM1KEGYL4JpbdytkveuTG\nWehkAmqawW7cwPFEH5T0t9YNwH4fqfZHBuzFNap3zInP/+pl8Wa8ALeQnega\n7H7+y2WrYyP5SllT1oWRVudKClzNLrvCZj2ot9Y4/z3T2k/o+WKw4tJbi+ky\n9l2yzkoS9T7Qnz6Ycj2SKyHZI/a1DNAwY+V25Rpht8TGemqYmhpUDhGgrTZT\nlZD/wOSfakvYhbL+0w8NpS4tcnrJJ6c7kNm1clRKCT7kMxev9MZLy8pcs2eG\n8NHdpdwatznuLfvONNuAl2KmOrn3Bb8aPNGr2DOfVs7CPdpKFHUqB3GZphuE\nETLibepveomH0X80E7eaumw29Ih6mq3v77JherPVYhNrCPROWWT1vMF4+mJa\nIzu0yCdAEhk28a5mJqnNzgA0aPCZ4dIMWtzY/PyjIbIHJ7cE2NynkaqI5Q63\noBr6KTyPu+ooOW58Ff4M7iWi1TQnNzlItsb7RBvJz2GaX3/g1gOklzTb+hfK\nrKnB9r0Y6+74W+fhaZUjEhuhx9mU3IE9LNyW0UsqfFUj7g8ExpidEIVdl/2q\nL0qsSEMk3jxDOj5tEEJzPmuu4GMy394159R/OtFhaTyMeFOjas7AHCb/Oo25\nPW73\r\n=YdXl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAyB2ATFO6k4yuYOqsXMHpSYQ2LXN2ZV8kXXZdR1QLfLAiEAqCYcVtP2g9wg1HOBTDfW7lLFf2xcUi7ZpDTgZWCEMbY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0-canary.1051.448849856bdc1fd2a35de8766ef2d96ebdcfdbe7.0_1643364103977_0.5236438354450641"},"_hasShrinkwrap":false},"1.79.0-canary.1031.f1c040254c34109ea9d19b455b8d97d1ce7bfa34.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0-canary.1031.f1c040254c34109ea9d19b455b8d97d1ce7bfa34.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f1c040254c34109ea9d19b455b8d97d1ce7bfa34","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0-canary.1031.f1c040254c34109ea9d19b455b8d97d1ce7bfa34.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-kTiCiMGgeEtkEYUD+nAvuaoOHv4nSFbk0Iremy5CXiXZ0WN/U7dgTyxMRjvEXhiTc2t/qe3Sfxeze+75AZaqIg==","shasum":"d63ddf503d77997b4902fa788a790e58eefe96e2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0-canary.1031.f1c040254c34109ea9d19b455b8d97d1ce7bfa34.0.tgz","fileCount":898,"unpackedSize":2440875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh96auCRA9TVsSAnZWagAA/agP/3Vu7XGAoHxa7+2OyaN2\nuH9Pv1y80ZN/3nqOLvnDu11XMJfk9stSt0OAPF5PXch8KqbpwB2zjFHxfDhP\nh8KYgV8Lj70GK0Rfc4eHRHERDpBLNCZXOxxXz/SLKZxeNcmSzqVNGkGY2ICi\nMf6ZoSe+m38joIYvrsjszPAl+UIrLSIwoP7bOM4Fyicx4sJKhgwZDk8ai1fp\nwz6VUn/OLgYcWImNpOHFJEjP7b3OymLjRPBYNNMmdrzlMaFeo0aCzBKtWlnn\npWNzrS7QafEjxHd/00r15qqTBCg7ToVadI2Q+HGj4vctJsZoUtVUq7BxFRhL\nUtlA7+1hC2GaLysggMoXd8VDZVzRBQi0ze2CRvnLVik7kJVKVXSo5uPUV3f1\nvy5thzr2uqCdgjJQJ7OBim97Q+BzjpJG4h99R7iJzizyrvKMN9GmZxoZ7bDp\n3NcUguKYTnJZVbzOPN3pEn5nbgHP+4KUL5eepY4tPYo19yzFEi5cjHBSsKAP\nyMg/6eoETab/vdQ3kK7Buxz+LHLwiXfZw6JdfK/FUoqijGZ+mXMbOJsTiDGY\n6rtMBxf2C6HDjSEGQeLlERLilxYjKSJ2tlnshbpYk9PJ9enTtmAAUaqzXan0\n2JmbA//m2p4popLfnMFVaUqowtD9F7j2gocJwsnisyJ8E4Cg9qMqKd2yZPEG\nUk7d\r\n=/86M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFO853HCYYusQA2cfmQUE9tSid5znma14lyO6G2iH4ogIgZmQyh/sk5D8+8bbJYg1wLcNlRSpM/pSGCtFp9LrFHQ8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0-canary.1031.f1c040254c34109ea9d19b455b8d97d1ce7bfa34.0_1643620014371_0.27287897440959297"},"_hasShrinkwrap":false},"1.79.0-canary.1055.3daad922dc83c637e549cebbbcac31c9e9c3f59d.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0-canary.1055.3daad922dc83c637e549cebbbcac31c9e9c3f59d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3daad922dc83c637e549cebbbcac31c9e9c3f59d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0-canary.1055.3daad922dc83c637e549cebbbcac31c9e9c3f59d.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-0s50HfIthavvq57FB8LMUvbzNL8O3e+am5+x5/+gRieawUg1e3gIWxJocqsM+wYPPn/1pvNZg4rxQt7YSqAmxQ==","shasum":"6f887a48f3d21440bf69fc030295a8a6cfa0f110","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0-canary.1055.3daad922dc83c637e549cebbbcac31c9e9c3f59d.0.tgz","fileCount":904,"unpackedSize":2455964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9+pwCRA9TVsSAnZWagAAv8kP/3o4DlHQytWDiezM9Fnb\nWEicrrDaohTRnl35OAA1q4ybwkeCwxVkqKEo0AYXs5T9LBnOR8LULtUzBdSX\nHM+2b7CDKjN652/bK46l9mc/O9hkqw9W8InGbN9hlD7gvmf8//EPDHoD6Qp8\nl+VgBRhBxSrFTFZo9QTnQDjQHrwDYNuD/yX8BV29P1su1mk+8RsF2BRL9LPP\nuSY0IjjeDPOOIeoYBwuBSvez9N4E0sDeF/aienwMngae8hqlCkWseFs+fGv8\nsSdaFkApSwFMuCbTHV4NSjwAyuuokck/m1ePxrijmM0ZMJGleuL7NLQa+v8r\nBWezF6J63spavKvn0rEL24lQsbYJ6RAWsaX3FZpAMCMf/Q/ebr3sKbJCPCIc\nf74SqTockUUzywc/rpY2hmNpqH+R4Zo+XTrtj5rH8NLtNPz9TV/aG8SYacg8\nOCTkVvXPet2QpGfcUuxNP0H3BlQdup7crlaOPwp8BpLWF6PeioygxP7ts9/9\nREX1fW9RSMaaDJXxip0y2PT5Lbk7Dh2gdZubGq5P04SGAGsrrB1vTUHCv0jl\nBWSL+pvUtJXSoMAQjpwcPvznoFMJuay1stRk6ZwxTRTuRvv/Zs/KsA91REZ2\nbis9Ybtr0ThXEuAViZpU5vMrD+29VEK28QBdZXaFgcR+WSlXAsqlUnrAQrkt\n0kNe\r\n=Ck3q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs2uAVkmT5+DZAk+dVrF/DvOmGrkHYvm2BPYmBH6qCYQIhALHFlwWSy2uL9UQ8VblA15kttGkigXLUpYMwFO/8LZWz"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0-canary.1055.3daad922dc83c637e549cebbbcac31c9e9c3f59d.0_1643637360682_0.643205085644559"},"_hasShrinkwrap":false},"1.78.2-canary.1060.eb5e22a7fe4254b3dfe9ed76c0a8a1393c4b86e8.0":{"name":"@sberdevices/plasma-ui","version":"1.78.2-canary.1060.eb5e22a7fe4254b3dfe9ed76c0a8a1393c4b86e8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eb5e22a7fe4254b3dfe9ed76c0a8a1393c4b86e8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.2-canary.1060.eb5e22a7fe4254b3dfe9ed76c0a8a1393c4b86e8.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-U8mciWJUi4nfjugyKW+JkimBbT5dZJ0iijNM45jjtKcBwwUCdkuUEuoDZydLrGTUVRxYiU7ljOCbw9pzUq4Axw==","shasum":"ef5d785325741f69fcb19a2a8263af3d920f4159","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.2-canary.1060.eb5e22a7fe4254b3dfe9ed76c0a8a1393c4b86e8.0.tgz","fileCount":898,"unpackedSize":2440875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9+vlCRA9TVsSAnZWagAA5hkP/AxIvw0H+N4l+vPRQ8gV\nH1gh+c/ai05zoeFHnhXLeb8rnG8LkZwWqdtzxT4u5zCItPT3nhkFSGk0Zi5I\nJsB4jRAB2obhPZb7buUSntSiF/LNWcfRcAsWehknBMK16LG3mUODuk1ziWd5\nIj3q9Ta2oC7/nhK1xLlTbKsZqIQEXQbYoKQEbBZwX4kgyKspXgR6qXjJKZJs\n3+6P7/La3CZoKZMsJU+r4XOv6NKibOoptUri/8WTQEL6unvKgm8HlbUKk2g2\n2sJSz7pvnr/rhAyw43KvgovuYsotrZ9imznZvxQdcvd0XMt0K1zHpXmXq4sH\nG3jmCXaNogZn9OR+hfkOV0S9q4MkWfv2FWUWStQjZUeIL2rY7UJkBvALXccK\n6NuyjjdEDKGXnirdapxzBfwt4dLm8xUdg1yqoUp/6SlH3h+KwmRzb6qP/3fh\nRmai5/qH4NrkrEAnr9Cq6gBg1CnHKq2oBQ7vSwLv/rfH6WYMzitS2GytV9Ij\noSmqFXVEXoL8lFNbuzueRtFqg2LotH0eLQUIoyUwKm7OAttEs0/5VnyJQoSD\nH3qp1xxZlRI3N98yMjJ68gI5YLfldI4nTQFC+gL+4Vm8bX7YCaj0FcVYJN8N\n6X1kxoAbauX16ksYcBi2/CqL49wK063yjqEX63+UvQ9ZXo/rkSl6IdsSD4W5\n+x6N\r\n=0ybf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIEfXPvxMSz48TwDMM+v2gVNIXflS+VvNaYyuGnjFteQIgPZ+63SroWJlmWt5X51Lwsri6NcjWgA5WlCYm1XIGCOQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.2-canary.1060.eb5e22a7fe4254b3dfe9ed76c0a8a1393c4b86e8.0_1643637732625_0.40540732405345614"},"_hasShrinkwrap":false},"1.78.2-canary.1062.7c4a9e477f2573a0d0523de553babf948960b2ea.0":{"name":"@sberdevices/plasma-ui","version":"1.78.2-canary.1062.7c4a9e477f2573a0d0523de553babf948960b2ea.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7c4a9e477f2573a0d0523de553babf948960b2ea","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.2-canary.1062.7c4a9e477f2573a0d0523de553babf948960b2ea.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-j1U8wbvjw0Vl1ggn+V+A8yeqOPT1AEHGdA63UK+Eso/giJKvqWrendtWfFy2cHwJ4r4nIzdwWWDjAGBRvj4RqA==","shasum":"ab768fc201aab45cd4412f1fc270c143a6675558","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.2-canary.1062.7c4a9e477f2573a0d0523de553babf948960b2ea.0.tgz","fileCount":898,"unpackedSize":2440875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+PvMCRA9TVsSAnZWagAA9WwQAIFhGvtUN/o3fnOSmg+D\nlkz4RCCvId70QHixkj4KIJP9v9Ns5XFUjwl4hDwLLGz3d8DNKFWBZA/oJ4cr\nXc/ObemQSRgOGzM32AlmYRtnTXOmU2A8BO3oQua12BvwcAciCwJSyBBglm5T\nnQD9019hz/FWJm6Bkn9haq78H4zRaxjnabqBWiyNsZ4rJcS4ZqnYsCsrE4Lq\nGHkDfM66YhuuI5hzWVzRWOiB2sdkuww+fwvRkCFiMJt8PHQWkwEn80AyBGCS\nvs2P9JQVHJ8PUQ/+SNsKc7E7Z80oDX8boqYB2XihnVdpNriSOyjYb92GCPC9\n88CfC3l1vnsvOSlZ9BMUlfJqTZ/0HzL4kjEbWJiT29doUfcIj0HmXryvIBAz\nrhiNdtp7l9oh/9txCYpFHaEWVJZo1ko+GEHMuaER/dGmGpHpbhYoolbhvhcS\nniomnPMwBPV/7NG9QkGC9f4+HshCavJzjWWtv1gPooUkflgzVZsIF32Fz8zo\nAry76dEV6Pjvw4s1AVKpmufT/2ZTsOZzuOtQ+bAz03jpmQf/AHr4Lxx+6lqh\nsfTdZzpozQsfy8XYlLMtHhSRzL1GXNA+8pPRDlQ7Ya7ORdGKKUVlDRIWtsLC\nIFPZ+Yw9rGfh8O1vj5R/BKYuY6JgBph1GF9YVIS2J459qcNrqTeTirDP8Lyk\nnoWM\r\n=0kyL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmzPR2FvQa/nHXPF6G28/tRUmsafCABKpm4aV9zNkBpAiEAvDc1ppv/2cxynA0KxLE2329sQycTtmD0Tir3OywJHUk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.2-canary.1062.7c4a9e477f2573a0d0523de553babf948960b2ea.0_1643707340494_0.727187148440529"},"_hasShrinkwrap":false},"1.78.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0":{"name":"@sberdevices/plasma-ui","version":"1.78.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0","@sberdevices/plasma-sb-utils":"0.47.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"58c80cc3940acf42ceb3f3f75800445323976b61","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.78.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-zXqyuGiVxkQ51OUYEjNwdSvTf3ymVDfMe4gF5jqd7q0nECmmCQ+GtEZvK1Fax4wtFNgFANwK/NQc2yO+sslNMw==","shasum":"99245358b1a30f4dd9a53d7e1d214aa266c8650f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.78.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0.tgz","fileCount":898,"unpackedSize":2442709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+P2/CRA9TVsSAnZWagAAUIwP/3mrvfgvcNwfwdq6sG/O\nEYggMHExTCJN6u/+/lGyvwMl8X74FlhD+pU/ZLo/kg2DrXUiK9k9iqj/wB61\nBiEuKcLG+oZTwaP62SiH+NcRwjZxY4cc5BGca+KUCPa5uVdi9mOKDTZFbhYd\nL1oAR7Vp77bZKVrVDedQOvloArcFjm+QmGMfuao2yGqcV9Ec67c0jyz25hVN\nKLyElqOEqQ+EMJVbLZToVPfLwsA0fGxe8GQ2VmfGxc2QRBh68K75o/gQ8t1x\nmyazk+gLCjpUjtk+f1GLHu+4IughthwtAvQYf2RZmyRiJCAmVJMgW4HbMD8b\nFHLRZlKRDiy0CP3b3j4oN0uyNCT8Eshs5atpWJxQwALOzPZqWwKRDcD2XBOH\nbTFt/PMC5fJtGrFwtSlDz3t16j7qPY4ko2R1Mi1G6CY03WzHDqufSWLJqx1+\nEmD7IZfwYhzWg9ORyahrls13NYSU/lExuYbwzZs1wrqwpaBCTXLH+qVA0MbD\ntPBRBmwupQYlxriWwB/AEbjRJWw/pATPBBUi1hFEJ0urAlRFS2SdxbIjzhAl\nnM/w8MbcyfNO6p8VIseK1U4PbsDBeljB7aa/ZE3js1fudsva56keNYqg9c7Z\nS5Vm9iQcJHb7bi+O6vVgQ8a2MFXkEE7oq+zXKd3683ixWrDUtYSxVIuN/BBy\n06rP\r\n=oBwA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyPmyC02+xwaa5HHqem2Jvser1969/YEPQgyIzTGRvUAiA5jOz0K3GxCanbhOEjYGcmKQGnMHOa9ULeaM9m+wfgCg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.78.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0_1643707839654_0.6857838966173253"},"_hasShrinkwrap":false},"1.79.0-canary.1048.9358e588dfea6fd57965803565e1063eea5c82ca.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0-canary.1048.9358e588dfea6fd57965803565e1063eea5c82ca.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.48.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.65.1","@sberdevices/plasma-sb-utils":"0.47.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9358e588dfea6fd57965803565e1063eea5c82ca","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0-canary.1048.9358e588dfea6fd57965803565e1063eea5c82ca.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-ghDU7pT5QeEmpwY/XHcGiTkC4cTrnc7gIjbVs508SsRy9C/tThGHhg1qcx/E6IY7pZiNLJ+B/kFjiZiGcJKzQw==","shasum":"5e2ddfb322e4b4a4a689ef84114922f1c3b27e07","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0-canary.1048.9358e588dfea6fd57965803565e1063eea5c82ca.0.tgz","fileCount":898,"unpackedSize":2440875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+P/HCRA9TVsSAnZWagAAFvUP/RG9g1IL/lkMIX0w3q56\nOepcSVY6a1n252M2kFW56J8ORyslFI370fwDz3BzWRGqh325SmVedibCkrrh\nvbMp+I0bzbtYt4SQvMEshZgFsQmYPGTzQXP5lu2pbP0hO9NmM3/k/jTgJT/1\n6CHK2gja5n/S8ToPaMDKHUJvBjnbRHY98jl4AhD0jk+B89Rr2WzLR9zP/vGb\nmJ4QDI+dSaHrBisYoG209jh6zd26Sq1gJSjTbbEMxzzGDid7mMtEh8sAup+m\n/y67yJ//ZdsnRzHygUBzkbVTbPfICIUAj5HsuVCDOxxsqCiqkZilDg8E3O0J\nqcilJwFkT6//+svANsbliZbL0n5X/XwvwkXY3qyoCRRxPO+/bbvWYrunz6XJ\nOcYb3K9x4BmcmbcTyEJsgOflL8zCSJZpwDA2+NlYlC4oVb6/Q9/DUCXvQYWJ\n72yB/yh1zLft6Avp4AeFgsyKrYrBMgSmCh+hQ321zYKwrext9xigkbCGod1v\ne2KFbF6xvsJYw7v5Gh01JOMp7fK8HuxM8Oqpg18a2bQCbaNVIHq9I3uAkNCE\nNn++8UK8EQdEWftcQJmzYNHLDRSZRnQ2xZAw9JLkhTjeATCJfvf+q5bKnN4X\nrKPDOZt9gGRNZHKvf10nGWpxeJp9rgz1EL05SGP1JnNZmWAz32bLwm5ohouu\nwblX\r\n=0dya\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1XAYhxoJv4hldH+cyYGU/vXYdwYsa2C2l235dNtuJkwIhAPE2YLR5A87IoDDwr9WRVGtpR4W/x3uX/z2ufxsGpQ4N"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0-canary.1048.9358e588dfea6fd57965803565e1063eea5c82ca.0_1643708358980_0.07172858391772752"},"_hasShrinkwrap":false},"1.79.0":{"name":"@sberdevices/plasma-ui","version":"1.79.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.66.0","@sberdevices/plasma-sb-utils":"0.48.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e4f1f9cf85991322bba8d70e3ba5ee7c32cc5772","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.79.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-vMIrmgQAgMbJKuHTYmk3gH5bz8C0NVhtRy/KAEgJ7bAANzScxfn8xJ/SJjS93x/svJUPVzvswKw1H+FfUJbxpQ==","shasum":"bf174cdf487eb6c3cf36c81aff28abef819d72a0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.79.0.tgz","fileCount":898,"unpackedSize":2443781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+QmcCRA9TVsSAnZWagAAskwP/Az0HpoMXDPiafhPnS9g\nxlIf9IXpjM2aQHuSsKGJlf+FESzlnf5+XDNmhCtg/R6DCo+jsRyuhnBJlm49\nx4VnqzQYRslS1w1LesMIHQERGOGy4bSQCsNtDoD+buVgPhmX317+9ZhEL6ri\n5nULdCeafcNicXwfGaEgOM0/APzLWmKwt8gY5uhe2hc9GJgTvSl0/yeHrA6l\n6Hd1g8aALm8uL+LvkgcBlXxYyO38EUwsKLqMeBYGoh7Ui2nf2dlvtL7zGi3W\nqKLORYZXeJdMmFU34uyd6q9Eiz0S+b/LMnY9hn/8mtON0xUd3Su5jjPtdJKO\nJPhiuDeKOT6YSRAqzGujMUSOE37rqyyPNtXZahujtgg+p/Yhxk6jw7V5RClz\nfKrptLIC0G0NArb9jR5QEw9+0ZgcmUmAO5IOL9uHt790KC+tK5j4LlRrIqIH\nIq4A4EJZ+vbAm3OiowOwvCBUm/jv1/kzIUBvNBt7TS4vTtqh3IUht/q/lcs7\nQAGdeOX3mABDkdjiszwJyG+TR+VrwYc2gnRhx6rIUEtUxf3hOfcLXhbzfxJe\nABM6mLc9+aQBbg0CeMgJmgCoXv8rdBpmbR9DtMxwkMdxVxlJ/VxqOSFO4cP+\n3cfNupg7e4eMndhW16IJtDUkFTUJELwxMfa+PS8EOiQoOTJB/O+0qifAeAN9\nfyjt\r\n=E5hy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDV8W/siKYSWsg87KPGak85an/pN1lIGLwck+rIeRbpgwIgRmSaEvzounZizooGEeP+UyqTTXXm/dZaioeNG9u9HbQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.79.0_1643710876135_0.9612381814881925"},"_hasShrinkwrap":false},"1.80.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0":{"name":"@sberdevices/plasma-ui","version":"1.80.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.67.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2b1bc5904058546db1ef28bdc5ae652523f4a255","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-IWH2BooGC5IYGTUhAh/R+Vgti9nFpJ4J0S03XrUqmbYCuMGj4wG6NMoU+wv5/swtVqcMZQNXRFs3N/+Ex0n3RA==","shasum":"a7d7a22e33b1a53f558c66dca29e88d184911405","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0.tgz","fileCount":898,"unpackedSize":2445463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+VdwCRA9TVsSAnZWagAA/4UP+wYpn9zIjAaGNq0URaB5\nFN51E6NCjhwr1kvEoDPBq8LrwjbgXBe2R/xDi1yUueC2vZykN819lUSoYXe0\nAZE0YICK0gS7UrbGBT4bBtoRiXFwfm5/dtNiK6yYSvTNwxO/zAg23KDOua9x\nHCSOjmlngbPTxaFcjMLW3+cjppJYyeGEwyTLCDUHKjHEO5wijygmGdngcSjh\nQ4kXUhE+G+Xfye7vxaNH5u6oAXXGFMoNHbWzpfCcn2SEX01dRIWQjUOOho/O\ne9TKIYsQHFqAIpI4lQDFvGUQexQHGAPyMUhT4DukDaJ1TOfjoasXanVS/qhU\nIkjewtD0UvI8n4VFQ27JdC4p6Na+LlMb7W+SIr6tYLEQaJSxpgcUiExLST+P\nPgSOE+w93/jhhGlfKEfTMeaM+rCgNDMIk1LHvg+FQ2bhIFSCrX/uN3wK0HXf\nYykHKMI9LqpknYNmWyFd9GPjTuip6usy4ynGoc0ZJ0pERuIDfLKlTrjdOUqt\njq+c3OVZn4HWUdrk/F77RCCBphzf73Lux3wwfNQNepkFsctrMropwmvRpGJu\nlp7deQbleaOV5Gxf0PafdX0kcGQWeIaZYz+TLXiXWoFJ3FlbEDtYUUsNdMah\nqVIdZTmo2lN+zYnxhstu30Nnc45CjpTt3Ac3ddHIazKp01xmPToP/Z0XtFOZ\ndHaz\r\n=2IJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsMbI2Qw6vmqOM5Ry6UjU4a8/p8lVVucE/9D0gBPLLEAIhANq+4YqXZF6xGW7e3kBZxTuANfIxJXqmLKPSegRihZLx"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0_1643730800248_0.5748113268851684"},"_hasShrinkwrap":false},"1.80.0-canary.1051.f70d75d92c33b9a69e555e810c2d0f00afa12fc8.0":{"name":"@sberdevices/plasma-ui","version":"1.80.0-canary.1051.f70d75d92c33b9a69e555e810c2d0f00afa12fc8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.67.0-canary.1051.f70d75d92c33b9a69e555e810c2d0f00afa12fc8.0","@sberdevices/plasma-sb-utils":"0.48.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f70d75d92c33b9a69e555e810c2d0f00afa12fc8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.0-canary.1051.f70d75d92c33b9a69e555e810c2d0f00afa12fc8.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-F7Fuq/431uqRbIDG7tfmxodwWifsFOyqs9M20e2UOeJa0HQFeJe8DCagqrdLECN0UYOjQl17gBOl3rPRqEDp7w==","shasum":"e05a24e4ec5db0b5cd782c2177910ec236cc04c2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.0-canary.1051.f70d75d92c33b9a69e555e810c2d0f00afa12fc8.0.tgz","fileCount":898,"unpackedSize":2443891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+hqhCRA9TVsSAnZWagAA6EkP/0m/SKZBe/rzdOOWXJNC\nPxtf9AylwIqGBjNnZxufe1hMmdfGt8aRpg8+VXFCjOjyeKRKz9vTjZx4s4Ra\nuY6kfWqe3zezb+lnca+Xy7xIRvJhEfC4It4DYJb7XcMUL5KB/AEyP4+bk00f\n1EIfekX2YDaxBuJHTmTGqV8L4ovE7Y4QXeir4uJ/nC67swKgOt/RTLimE/9G\nW7m09ASSO7hzAUnDYYP27prRoQqzslcv2asslHhJArgm7oMaB60gLQFS/8WK\nqMReN+UyxeeVNiwM0Pu85jhu2UPbjl5lafRM9Ghir6J2+lvoW5pspX/Zrh5e\nGDPv2G4egw9V/iyosjT4R6tRBe1AvIDY8xXg+nrcv7w/mB7pwQzxKkauP50N\ns4bKUpfEPalCsuHSkNyL7QnwSumbj8Ve4dSheT1FWqnpF0nZrLabp15b710/\nEhtyIc80mp40NYBcjSm/MxpuJQxkoObgajQSK4cUPj6SapeKRnnTFrGfxDdF\nifykuHIfLkr9mXJx2az+st1lD0O+wX1vr2dNjekXcFCK0kUgL2YKiNTnyobl\nsdyHJvH5+e1SztPAecRELSfc2OnofMQmZIqWkqYnBPSk35ETdY+LVRRMkCn9\ni63+jBGFWoY3IlQxOTPsDXBi9c51yTDgwl7LB2CJX68oAiyos+lzsqrQZCmx\nU52W\r\n=CRii\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzA4I02fj9WF3HX26PAUN/oHspfpCimAedLS0wUKix1AiEA8MPXjFMf7dPLk+txsmgzIalQ55I8tDhcCxxc+LEgMPg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.0-canary.1051.f70d75d92c33b9a69e555e810c2d0f00afa12fc8.0_1643780769708_0.6757113719158665"},"_hasShrinkwrap":false},"1.80.0-canary.1048.023e669f711fecb0f53202246ebd6ad51b9a57ce.0":{"name":"@sberdevices/plasma-ui","version":"1.80.0-canary.1048.023e669f711fecb0f53202246ebd6ad51b9a57ce.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.67.0-canary.1048.023e669f711fecb0f53202246ebd6ad51b9a57ce.0","@sberdevices/plasma-sb-utils":"0.48.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"023e669f711fecb0f53202246ebd6ad51b9a57ce","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.0-canary.1048.023e669f711fecb0f53202246ebd6ad51b9a57ce.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-N6m7gsDidxqBpNW6uAc5ZUsUzDG+iDq5w6hUkIVfF7EykJkmUa/vjD46WUGypb2DQMPm9SaQH5rOAtQpQj9Afw==","shasum":"64ef304341782434df020b743b661a5f9a1b037b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.0-canary.1048.023e669f711fecb0f53202246ebd6ad51b9a57ce.0.tgz","fileCount":898,"unpackedSize":2443891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jDTCRA9TVsSAnZWagAAcYIP/R07U+wUd/vrgZEZxFuZ\ne1HNGDUkuLRCpke+GXcc5CkpvQE39dIxeIHH5Yft5bxtArbxVaAp7+zyApso\nhIjUIsHwjCPsRQucLUui7P8L1ek+tMTB1QNEoenMQv96i7HTxy+wvixO/lqb\nICRrqjxCywnROSGOSf90yiwppiydQBNYu6BnShG/gxvRhGsh5XD6fBA8AVOq\nQ7m5UrTGGuGGrQog5E7N611QCJD5yxj0ypBsZi6Zl5zFavMCJbCEZFJHTf7L\nVAJI50ppuex8xp0Kj992nN4nXsxgLpVB+9vvlkddaDDE9SNvUJqZoDpz7zFR\nlyYyDSQTRqpEfh7tKYxOzAh5xycFew5kcaakMwM9LXTpj5Fv2iS+byrPUzUl\nSGdbansF5ZSLO43C1lbYlBLgKz1d6mRwsyuwUmYSITmudyDmU2s5GLVWsnJp\nGjseQAYaLfFF7VRZ5PB29R5p9aPMx1b9qsqFxwlm1WVGVEbcXMEwOA7vLxgF\npNSXGamLUvRNbuxqgVaTIWNxDEI/nz3HnI8DyC5trSxpbWoXFt8mQW90INkd\nSdDO6M8D7KRfVJfd+x1vZ1TPxHOHIluC/x1sPXpuldGndSDod/zmR4oKnkcz\njCxRYtMJoXcBZgIj1Jhd9/yzTLS01l/QaM0MDu9T1HRZdcwtAOqzYy6Ix7Nq\ngrcc\r\n=MXTi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLv5VBQqZX51cUqlU6sFpeHHktDqgzn3OyymjCYNGQQAiBJdNpvgOMZUtPxHopwkXzxyZpCwOpBzHu/lJsizFhKfQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.0-canary.1048.023e669f711fecb0f53202246ebd6ad51b9a57ce.0_1643786451579_0.15916053880222547"},"_hasShrinkwrap":false},"1.80.0":{"name":"@sberdevices/plasma-ui","version":"1.80.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.67.0","@sberdevices/plasma-sb-utils":"0.48.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dc5d88f458488f389cd34dc205f7fe0162304a98","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-j98QqSBfezzVf15fSq64q3DK8Gq4bmVHddGjLmm0HbuPxblzm5cB4ZIQl6Ki2G+IL+002Z9RQ6Lq82TcbeOUqw==","shasum":"d2bd617b59bae3df0f6758eaa5129ee6fb8bceb7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.0.tgz","fileCount":898,"unpackedSize":2444009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jHWCRA9TVsSAnZWagAAfa0QAJWpatn7IiJnHMOXu2iI\n8sJ5srNOifqHNTHLP4PrkWrIdOmoJSkOlUKLw58e3LguhDKkfHjY8DGQh3Iq\nHfOXGKpEQNQAwyrkcgtKwVcGGKES1qrlwVsiO86zeWg+mxWy1DFZz6Xp3aYv\nTiJpTlGFmNsCzCCQd/mT+H5YktNvEFHnAyInzCH99fATgBAokhF/qXGGiuEm\nkdcqzuaJL49qYf/4VfSduLAgAWTz4BYElA4PFdpu71EqG7xP3xLT0gzpvl37\nHf6vJ5gIT2MR0E1JpKaTGUO0vG70m9MxO/jzaDPXdVqLpMl4OV7CThaJUqhm\n6bA19FZ3ykVgqeZCqaxo1IhscVZCdAuvMkPS/qgzEaU4JnEXwtHM0xitThih\n2uZU6z46MboEKLdN9QVfG/GxN73DZjAxB53eiUPNyRdipoGx+o512a7RsXwp\n8iwapg4QetG3AARf3tqn+XefdZftxHoVymlQc+ZxA77RQLtJ3qOc4SZVpHLI\nwwfyw+joE8wJ43kUKFA+JqbHEcKjptnJthNW2RQLAAW1HvjuXUpR8vbFufJr\n9Vf8Fa7/rWJaRyDg5YgJRV7diVjMWvVzdjVDyKJZCsydeaf5Hj8JtB/syjwK\nTHKvm9EETdnbgjU1bJ/ZaoC0NCCfefwVS1xwB5/hFfpj8KCn2MoWIgZtLH61\nyj8i\r\n=aU3a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaeXnvXFnrj+3PtGR801LH5GJjcVk/bBi8RFvW5ZiPWQIgJH2T/AKy3fxl8rj8f0uzU/h9LkbQ+VhunA7JDoUIGL4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.0_1643786710669_0.2505697892111105"},"_hasShrinkwrap":false},"1.81.0-canary.1055.f930b5985c6887cf4567108477d973d7f77c3c6c.0":{"name":"@sberdevices/plasma-ui","version":"1.81.0-canary.1055.f930b5985c6887cf4567108477d973d7f77c3c6c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.67.0","@sberdevices/plasma-sb-utils":"0.48.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f930b5985c6887cf4567108477d973d7f77c3c6c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.0-canary.1055.f930b5985c6887cf4567108477d973d7f77c3c6c.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-U7gBV9nrtBA+YNmsO2uN3LNMgG3i8YVNNkqWoS2ISUNVhTgrXZTsiVnEj66fMFWMUb2xk4yPbe+jFXf0DXs5zQ==","shasum":"d3b61b714fd1e42bc81f1bd2dabd20c39854c8e6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.0-canary.1055.f930b5985c6887cf4567108477d973d7f77c3c6c.0.tgz","fileCount":904,"unpackedSize":2459153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+kB5CRA9TVsSAnZWagAAdFMQAIXWigXyKP50iQYNIHzk\nOQ6xmxohk66J1PUT73Ze8F5KP0xFw94s+IUVWFMk40DdxeSNIzlhazoCWRlp\nKVEGBhDXX3Zi70qnoLRVFhdMiuHz63Z0hbC5tE13RGJQfjDiAN8FwQj6x9Pp\nmsxqjMcuHnYGWg0XnlGPaoXCW1DLIlkqUPMImtqzmZikwvKe9iGQKQhdtdlR\nDipyMqevJt171cH10TulcC9nlfC3bnqPtDx4O05VD4zaXX3rAp40QFNzexOC\nRrHdyKHq99gxTpYsvIxi4PHoGRqeKSkoOYsHQefJmmacDJaj7gq2Z+EXbPyr\nEiEFNHWoElh/83CSQutTYSB+euhbKQ5641QKOOt8iP6TXcsAWytSsPOyIDgT\nbicqWQP5JXjYfQJdC68XVkYGa9aFgesK4zBuX5TjfgrrqS+YeKYsBCHN7awV\nnsxymBwfv9SaHyTvhe4MQuxC1sXhQcFVpjrvB+1b/g6+iU9Jh6Mk3B1KEQDG\nYNDm6EgIo5Zflrv27tzg64nLFAAIZX74P+2KO0JHIBRKOtKpVRq4WsE01w9s\nkaOjFULQkTCLMTL5lnWPvajAvB5muivxgY2SUtn5FzlOtE8rJxGPIIaGGTOJ\nQvUPu/MwNBS3E5POfuVhVzVG3hK6Fren6dsRY1SivM71aC1SzYr6txJJdM+J\nCxFN\r\n=BYpb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxy1QqUqC62tUgIpeohgV2PjBWoFrvOnTpxq0wFwfI2AiEAxz+0tp/wyMDBBmUDcT2cvywBskz6b4f+K5vaH1+N/hI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.0-canary.1055.f930b5985c6887cf4567108477d973d7f77c3c6c.0_1643790457395_0.072596990729068"},"_hasShrinkwrap":false},"1.80.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0":{"name":"@sberdevices/plasma-ui","version":"1.80.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0","@sberdevices/plasma-icons":"1.67.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0","@sberdevices/plasma-sb-utils":"0.48.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0762631ed9475ddc2dafa4df2276e99a8281fcc9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-9CVAe8n9+udB4vqs3Q1oMhCSaMMTyS1LVvFbJpvHiONMlVokAmP/t0IclgLgM1kVD2SkDGD51mhK4JeL6p4tFA==","shasum":"63d4b322a292d2b990f5c11a0c06b05ccf4ffc02","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0.tgz","fileCount":898,"unpackedSize":2444284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+kRvCRA9TVsSAnZWagAADhcQAKNLv8QC/AAbWdPUrHZY\nvCW46ZSN1nqoM8bO9ktdCJpSEUoR9AhWQlMFjlsdNK8YiwZZogdKJMe2zlS+\nAvxGtNqJYL4uVpFErVldyZOB+2xEVnBTkNZ0pT+cf6/TGw7672dc52viJUXb\nPzv7n4IW9+rap+SexL76eB3eNDCyTOY39zqv7IhQ7U4CfUJl1B8YhyrpIOyT\ng72BjFtTXClIvw3MIfUf18T5FIjQ/pihnRB7go2g2bMC8fhBlKlR54hq+2ey\nQ8pR5sX7FvCqJ0Rm1gdBFbk5fPl2YJ65G+m0+tBSfRKGGTywNKWutW7d1hzE\nhFL4ivJJ/Wh/2niUOblFcHc74AaMwKbSXUBeoEQDmGASgo27HeEpujMjY3kL\nHmFLDLiMGaV+2Zp1FwVgzLYx3BhqrRufsin5F/6fE+R1/n3tqQljHkS6e1b9\nMuiyPkiNBfnCbwuta1sp2uu5/RP3hZ952CEo8sfGORvYo/CIRXiSi7S7uGvd\n+Q+pjru7RTqBYkIb8DT7zgDCAwRfkDbTe/PLRYiS7NkdpLrjdr6u5RX6xiVB\niuK6LJC8LDR+BpnQdNgCguj7OVXQK67PmnyR+BZqhN+7AmmKdcjcVVwkXZ4b\n8R852TUacdyPEm1O6mUPnCZ7kngxYilASJ0rv3QYuSu9RR6zOLF8T1THJ8oa\nspw2\r\n=VIOo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7oCVGvpeECttLFUXcHpr656NxxW7iecBSOK2cilA2nQIhALluEnbKpbitArsFKS6Eea7m9gvoThOHeSOw0/vRgtt7"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0_1643791470874_0.9348546564922349"},"_hasShrinkwrap":false},"1.81.0-canary.1055.f0bb8d8f7adbda0899f5331c44c5bb691ec1b813.0":{"name":"@sberdevices/plasma-ui","version":"1.81.0-canary.1055.f0bb8d8f7adbda0899f5331c44c5bb691ec1b813.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.67.0","@sberdevices/plasma-sb-utils":"0.48.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f0bb8d8f7adbda0899f5331c44c5bb691ec1b813","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.0-canary.1055.f0bb8d8f7adbda0899f5331c44c5bb691ec1b813.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-3dwQPl/mJk89FauA2iU6z0CZptHIpbHZOaF+RBESWAIcVL9wqq/zarQM2zfXuvdHl5Q1+TeOVnTd6lN87OaTpA==","shasum":"222c155c0e3bb125693924c00b50316568b88951","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.0-canary.1055.f0bb8d8f7adbda0899f5331c44c5bb691ec1b813.0.tgz","fileCount":904,"unpackedSize":2459153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+pMVCRA9TVsSAnZWagAAUB4P/jCBZ87tlFPDLXOIqdQZ\nQ3giLm0chH5tXHFamM7iliW/TsL2lWydbOA1qrshrqIgcjlxRKcnghBX0flI\n/wM++RCdWtyWE5vx64cz07Pu3TBu7VtEBu7bgRnW8NG6/qAp6nZkTzdrcb2z\nRfQZlkvZmc1SH6gL130iTYuDyGn+qrQX6uUijNPuZYlvBiD59Uw7EE4xrGHK\np2kDU3bzblAUn27wCXDC8IuMhP0OiCPpigfQ93kPyFzlgsLByCKzDz4ksgRb\nugDqkabhcR92SCpRpRVFzZM72ZR0OfQl6lPIEC2MMcU0queHm321K3/PtKQ4\n5a+3PIRJoFm9yBc3avZKSQoqDRfoP+AuunLdg7Hy/kKh4N4s1PL7x18bputp\nw83kZebZJwwuOXvt496shQwO/HUBpykYRm5fR2LidANcKj3ipTdE8nj955/T\n/DiprOdW8FL+yj6Dm732pZ+Q7UBH1iA6OZmL8b7jCJCM4RWPtoU5rua1auLh\nKSBo+4LwCSLCnH9Vo6LEYe59Paza84JVTfypzKVF7hzZ7uG82JlF9yMg+yg7\nKRxdcSvHkcRmHnBftWIdpykHMLsNMpoIGNSDBK/MmlZw3F3YfT/EXUGxSlpp\ndjNSpHJt3H97VZM0oDJ+WnU2wxbq1VX+qfjY7j/iH4r6lJr3ctLHaMYg40Zk\nUGRh\r\n=8DTA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpfMA7d06vQlJVMnF7LjDvJ+SF6N/cmNAVTy3ikYHCuAiEAjeZYwqaXHrL0Z8dgJOulwsZM9qCQsHkDdqw0f9RLNX0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.0-canary.1055.f0bb8d8f7adbda0899f5331c44c5bb691ec1b813.0_1643811605516_0.26043358459272503"},"_hasShrinkwrap":false},"1.80.1-canary.1064.0f7eb924ded0afe804380857bbbdc2871e9fab5e.0":{"name":"@sberdevices/plasma-ui","version":"1.80.1-canary.1064.0f7eb924ded0afe804380857bbbdc2871e9fab5e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","@types/node":"^12.12.30","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","react":"^16.13.1 || ^17.0.0","react-dom":"^16.13.1 || ^17.0.0","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.1","@sberdevices/plasma-icons":"1.67.0","@sberdevices/plasma-sb-utils":"0.48.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0f7eb924ded0afe804380857bbbdc2871e9fab5e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.1-canary.1064.0f7eb924ded0afe804380857bbbdc2871e9fab5e.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-vfoQGco1zW5mCImsCUOWxLq9xHV4Zb4JWOmkEhqauUPFoy4EInLQkX/cKvuVNh8adsU+INgp48cuvS41yRkTyA==","shasum":"431dcadd2be31c6cea1f14af6fc6571b31bf499d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.1-canary.1064.0f7eb924ded0afe804380857bbbdc2871e9fab5e.0.tgz","fileCount":898,"unpackedSize":2447320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+qJFCRA9TVsSAnZWagAA61YQAJpMy5h2ams3jW3gjhdE\nUo+GQfEDkH/hGQ4WIauynxjvdh+NYftzpyJo5VCTqaHUV+TxnpTVoCbCIwRc\ntP2jA06FtH7zAVzzh6YwbbLpIqFwsbRtpd8g9Y75wAr25M/2N/QcdIDcoQOO\nlLCH1WxKfIKpQTiHqP2pSiRBqmKKajN8OA9TqrCkcbDFtd9AMEd9ugXrFN0q\nFrjIIDacncHscN58BLC32hjiAR2as7yKk/fdW4/uU2aP/iqPIo0EcxAIs6EN\n9qJ2bNfXNlhsFrPc+1q18KrTMN+kv0XJb9p98Tt9C4SKY/D3QvB2nEwpLqdk\ngIYwXzRF5dLIPjiVZ7R4izPPPWIN92DgCzlo5ba+KarHrjByKKw3tbKv3E8w\nKzJyIvk6k3Xzi6EhcLQLJ5MMQ06Zcy6VWCkCqpfGvMrA3yQbmBCzp/9aYfUT\nv8rxLDPF5LBiEktID573tpCRZ5PghUXoiNQ7ZyX+NBdlNGfJWgfmHMo9i0vY\n5KNDiwefxjomv9bMmH2ITCgFbwumMT2hMfcEBJlmSmU+HHamljp0T54Y0uqR\nvriw10VxWekxwqdOvvcsEFbUeQY/c+3K/oBOqwY7jXJZxRCvIWv/m4938z9a\n/WwBPfvbYNtLcYNoUyMjtQwH2/u8WdrwmjAeQkCpGQKV7fDIRXuY3Uc/MY9g\nvoDC\r\n=LsPu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAVzy7rHBE04T7PYogxMhLJkOm5Uxwmi5AbWPASKSJVgIgKOpIxdPFZNdqTBoYs9L+EmdR9g/ieUbyCoKvsRRCmqA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.1-canary.1064.0f7eb924ded0afe804380857bbbdc2871e9fab5e.0_1643815493001_0.7120863975734804"},"_hasShrinkwrap":false},"1.80.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0":{"name":"@sberdevices/plasma-ui","version":"1.80.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0","@sberdevices/plasma-icons":"1.67.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0","@sberdevices/plasma-sb-utils":"0.48.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bb84e31e66c83a73ad444b32404084bcf51f87d5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-CxGuy53Qd0hi4nVBiNVHcGVBsNdEBMszBf7pYxbTn4IQYmgsQrqMzGX4PWvQfZxsHH+rFVB53+CRwvrX+a+ySQ==","shasum":"48c96f9b13c597e127c2d75fd0f72bfaab2bf107","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0.tgz","fileCount":898,"unpackedSize":2444153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+5JHCRA9TVsSAnZWagAAQKkP/jOga1yQj1NxUcVW0kMI\nuKCHAssb8Q14fytimK8N7dA/l3Wq2v8ICkQWtLkra1UGl5gXa6gDSJX5Mqya\nSglomE/bYvf+jsXRNCL/RUFL0eJmZC81dhFPaASMW6OoqxvsISZnnHqD2GVV\nUvFVXqqhWYj7lvCnGpEpIWD4SM6kXxm8a+E0lkvsy52lzB8ZjthV8tRZHMrK\ngLZepSdTbtORxh5r9hVP05xOMjI8aFDnJAC4ag9dlLsM3zQXIsclJcxlCMEe\nJQ/QQP9R5mN995ZxaAlr7TGVToddMnVxoQhbOUj7NzZI2R2+X2thm19GYcs4\nDA7A/WU3BYcEogYE7yHmSXQl+CIgZhYkN1r8hFcS9wb+4du+b+jXqhSgw8ak\nWXOaC0q+v8ora31JbIKQKnSXht46dNZaDnuQKHHa40Vp+3Aq+GJd5q0nw2JK\n58iS8I/z8ykVZEkTClw//JsAScDIKyAxkwMz7yql6HNTwdkWo5BxGOFVQOe+\nP+RawGSN/VJX9//8sScsLFMHSHPqQFmUK16JjXRSsF92dSXhcKW7pDw0GJjr\ntWbHKJJpKHJEt8GYzas+DGphnC3XId7G4foSKoelqY00knpVdcAx78NH8j5T\n/Gl9DeEaSaJ2aVoCYAnuy8TwlpdlOEwKCLloxAuo7PDPLFfWaChK4+CroHiE\nLWyD\r\n=5pFv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHD9uL6lWlJUlNxwOIwzCi2D817UmLTHDhJLS2U94Dp0AiAd14QC24oqCkKXSw+d1qFAdySL2iBhTCsPTBvMzPHrUg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0_1643876935462_0.7054657048363528"},"_hasShrinkwrap":false},"1.80.1":{"name":"@sberdevices/plasma-ui","version":"1.80.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9367e9861d4aecaeb19737a27b4a1285f2f360a7","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.80.1","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-+opzxugWy9+ZGESuHKAbOu5djP9lS38emBc9Ox8UmIoK8h7oXlJgmO3YYewqZdLPG9g3eyXQzIts3iC93msoQw==","shasum":"1ac45e172bd16fb61e88f3907763f93b71fabb35","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.80.1.tgz","fileCount":898,"unpackedSize":2444301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+5+xCRA9TVsSAnZWagAAulkP/A7JrwEwPcN72jt2GpCb\nHJcEifNg4CxWJvNcPGmJzrW5HTyHb/iit5nWev+BKjIFk1KcUhKBscLPv7Xv\n0Ce9QxssnaGr2GPr8iHjoODdPr34sA8SUfUczUS99ULEZkSRQmFLGtMp0I9Y\nmN9mitHuPYl6lAcW31aue8U4xJEMu0XEu+dKy250fWmnmp3KDymyDngb0Bfx\nguK/KbYvjNvtP5GlXX6eF3uIaE3+9+WNMBvAk9o2aL25GzDqlTPBnoo5XAzs\nuFoDwvFzt6n5OhumSry3/j5XrvJPtEaeUGIawhZQhz3d494vgfyDSBFHDnx2\nEcDFHtMqkzbc52jR65BGYg5tUzO6AJ0+wez2oHfjl+NbpaChjr+AY4Yn3ICy\nX73UmEDNRGrvE31kL5qECIzUNl5zCQIqg/PJ8+zi2dWzXqdhwX070bleFarm\nvy/AITt3X0FVJJAEbcagXUtUr53PQzxl54Kb9iUSnTT4+njyOq5kO9VcsNer\nvHaYMSwuHOcy00JWudMT0ejhI5QQg4lOLpIDmXF9o+/C3TPy/9cHJWvLXsd8\n9zz36zM5QW+9d9qXVj1qJvfdIE/TAZqBddZTmG3nYvmTINpYPVlip8s9LRc3\n9EQccQHdSBnleIJdL1jkbKTNV9P+DF8bSu/VbF4VWYvApmeKkHyG4aT9LhFA\nhN7A\r\n=0Asr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChWMsAVGNV+kklFXzqQtmj1YK7bAST5A8hZ695ZWYTMAiBVA1MhOAFMC+SDUL1MJkZmMe7sqQVU4/3gsWibKwDqyA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.80.1_1643880368966_0.21259813210661815"},"_hasShrinkwrap":false},"1.81.0-canary.1055.cb0fe56eb1bdd7815754f00a2194c9c40fb65c26.0":{"name":"@sberdevices/plasma-ui","version":"1.81.0-canary.1055.cb0fe56eb1bdd7815754f00a2194c9c40fb65c26.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cb0fe56eb1bdd7815754f00a2194c9c40fb65c26","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.0-canary.1055.cb0fe56eb1bdd7815754f00a2194c9c40fb65c26.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-r5r7uLkZR3resjvt3NtgKpMB9Jquhv1VRn7YGVX4uKYew6pWzhI3VWve5EnEUa0wd/1vu8lylWLZDqiCZco3Ow==","shasum":"e229e0191b709cdc65101c60240b18e83acd5814","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.0-canary.1055.cb0fe56eb1bdd7815754f00a2194c9c40fb65c26.0.tgz","fileCount":904,"unpackedSize":2459445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+8lKCRA9TVsSAnZWagAAwuIP/0h9eAKYJAmnc6GW4gMq\nTTBD4QwjQ9nXewR4lTxVeg4UHPzhECvQjCvKsnUtU+eukW2x4KzdTV7sM+4W\n42WfH8OU384CRMKE91fIdfOoC5pXOpUnKwXAvZsJvd+IO8w1JR3jCNj/ipDz\nngPdXCL94dWF1Tg5ykT3CZsYHZPg8CsDpJEdDcx6uDs0qQT+Efjet5+E+xLF\nXuLJSdQ+QlsAP2N1Am5CZkD/I4ICCBj7ATSFXRFsnUJj0fhvp/A05wUlt72f\nYSKB2RcjbLnkIuE2AO3g3ctdi1wGMoV7bYkpbz0QG7UVQt6ZLg9MEgSDUAfH\nhGXs0eY8zdBb+EIszKhrU4RT6alG43PKF351h3Lj6cVErOlVkn4kAT670BFF\nDCSb1EaejBiyRqNOtEmIp2IhDSwUwvaAWdf5IQ0QApnZNjLleuLI5SMATMf9\ndyVKfVnZl8A4ObBd3/nb9PcsGZO3EfV//AGIjtWf136QJ+9usNxf2AUlDgPG\nIRr/714VrwE5XAmvqeZyuz/W72oGekOboYxrRvLwgvRBgqWf8wtz2OLN+/O6\n8NW9mF+/UEF/gsjHO88yZqr5h+wAo80IqGLorsft3n6IKKSU6D675WQKSv0y\nw65LS6m6ES9enYUtrDujxJRqUvDJQpL1TB8fZYCwF7eqjr29gXKIZmEseM91\nM9bL\r\n=1Aqm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVeAX+NiP2U2JStLarC+rLR7Kr3N5CtyEP/S2qdwlWrAiEAou6nIcMLcQgC49msKLmtZR4oXi0l2ltQ1hbrk0ZYbTw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.0-canary.1055.cb0fe56eb1bdd7815754f00a2194c9c40fb65c26.0_1643891018616_0.290944770622946"},"_hasShrinkwrap":false},"1.81.0":{"name":"@sberdevices/plasma-ui","version":"1.81.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1ba25fb67a24cae6525389c2792e7e116c9e6ea9","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-ygBs0VHal/XF3yCWiDkyXdpUzt2lE33wgXDqaPLMyOpLCcIKKtv/RfLFgZ/PTGWmKGSbrq/Py0lFlCI1YLxvWQ==","shasum":"dc6a9f8bf531109a4c56469c9e69869ff4c46a82","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.0.tgz","fileCount":904,"unpackedSize":2459844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+9OrCRA9TVsSAnZWagAAZ1MQAJFhe9cdNsn/N/x8mXhg\nSJ8PyW19V3Y1hzonM45I3kEpuLfSnfommnLGcYvhURe84pUVxD0vIBqCfXWc\nu5+uDexexKWtBKtxp/KzBOIz0bJ4CElO79DMIRSXiAapFehX+gIUQ49WYC52\naAjTEDeHsMh5P68hSv8S8Y/OxUyHXEL7VLgx24uO6eQMY7LsAsP/B0poIOuJ\nvni59khOizh22fgT3SFqDa8Uaf5wjrPlwSxMC7tdJoYaiYoQheAzAUzAwBVa\n4PvApECXseHmvIva9KB6M0e9CVb8DjT2yF7H0gWs/Wjc2IhZHkYHbCYio6M4\ntgsH60Y1rap+rmv5khbKMS+xG+Ncqpp+xH1Vna3ARLr9A9P7Ud7bsflDnz8l\nwxr3drcrq7drkCPWypmck0VDRWGIIS1uQQW3UnBEoW/tmoveTCIyZAV3/lzu\nngazqlvfqm0QWbH8Wye7+kxLyvIucpVh5wVc6P2xN3q7RAmWBT3aPOqGKEQE\nDyNC/uizy6mflP6BglYg85ErbL8n+vfNIFI4ZjyeaDC8Fu2pv4ggmwlOPhlC\nb37aZu0yrHU3EX2MBzhielgVPiEwcaFEBLI+9kYNIxnIspUhkJEyM3k2tvxF\n7kmpWHcOv4LQD6aU0QOEP/iASJ4Zh4Z3vzbje78TARtAjHqL/9sg0/aa4q/U\ncigY\r\n=qIaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmOvPPoxKwK6uEXuW8U9wGLGpA2CGg/aH0HO9fDQEHQAiEAgEmx9dqyNI1Lxx+qYnfHZki6l1zeQfm+cJjeqgMcoCU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.0_1643893675586_0.3697442593934466"},"_hasShrinkwrap":false},"1.81.1-canary.1064.41eb22c7f2f0ba52d2c3e13be86e485e5f4f5dd7.0":{"name":"@sberdevices/plasma-ui","version":"1.81.1-canary.1064.41eb22c7f2f0ba52d2c3e13be86e485e5f4f5dd7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"41eb22c7f2f0ba52d2c3e13be86e485e5f4f5dd7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1-canary.1064.41eb22c7f2f0ba52d2c3e13be86e485e5f4f5dd7.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-rh1anmEJ5mP7k3krPDPqhSVKAkTYkDDHaA3M6iure/P5CMiX32zr0722bG32I5s+DEt0RmKeriD42m6PV6RV7A==","shasum":"a7195ba01d8cdfe7798b0e494cc5d1f45d78ba12","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1-canary.1064.41eb22c7f2f0ba52d2c3e13be86e485e5f4f5dd7.0.tgz","fileCount":904,"unpackedSize":2463155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/LSyCRA9TVsSAnZWagAAw50P/R+B4oQRyCYgErZXMQ6i\n7CRTfrskGtM5bOIf+mr6PxamE8lp1gd3HzKcSrZVb4Nhqgw6a0n4Ggy3YpcJ\nTteANUe2Vi1Cg0TEO2j6zjqOMFWewmnFHaVd1m3ZhiJyPz0k906+59JtVUmG\nSI0OOLdXO3oUwLvj/+EvdOXBC/w3Qm3tIng09Fb2wwJEeysdyKwx86dYWNIk\nG308D30PxymqCBzEdUKtUxTA1NMrpLXsArjm6/ACWUEAtAFYu1QRVnN4MIQi\nfjM9XZwtOF4eJJkuiBQJLLHDxUkeU5Q7Ui0VV5oh+Osgh7mZiOeiT4isfJV1\nxTBYoxlxvr5S7UCx/aNBgdCKGqyPCcxVDjE6iJGDEZIxX9m3p8FgXL4vsE8x\nL4sCilwXr6hprMt6NHIJGQKrrdcgRTpzFkw5e639YHSYMFO0ruyK9dcsfxrm\nq7d6sSHvO8tZ/35ZuarYo+e1FHvo04oAj78M3/twO1UxpQlLv0RMXLlVjAJh\nJubsWWMU/XS76Ax7FfWG/C09ZnHWWIoKgLONL87wmdhEbloYev0xVEOazvGz\ngmkDqWCJbGwRpU2+ML0BdqPNq9+NBPJL8mEud3QnIh9pG36AXDCwqw7mMsDY\nzYINBvb/iTlKcSAxqA/JbFrCc6Hg7Vf0TgfYn4lt7kXFy2T6yaAi+TDZLM4/\nZSU7\r\n=o9u7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFu1pGXBK3B46Do+dZHWUoa1JLecFtjt49gHOaS0yxHbAiA4C2IKbn2hTnfye4yWQ87F7y+wCUC0/dQ5PaOEzICwRQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1-canary.1064.41eb22c7f2f0ba52d2c3e13be86e485e5f4f5dd7.0_1643951281935_0.4488476600237954"},"_hasShrinkwrap":false},"1.81.1-canary.1064.9d500f71b5a1ec722d167c46548ff9241dd0c1a3.0":{"name":"@sberdevices/plasma-ui","version":"1.81.1-canary.1064.9d500f71b5a1ec722d167c46548ff9241dd0c1a3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9d500f71b5a1ec722d167c46548ff9241dd0c1a3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1-canary.1064.9d500f71b5a1ec722d167c46548ff9241dd0c1a3.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-hphdbl7nMiWmN8uDhaeyLPofHSdcwzkYKwXASOsFULnzhW5QU6QCKzwyw+NrxkIg6tA6NXJJgypuZpFn2EnmBA==","shasum":"a9df8ca4fd5d5417c6b2d623f3027cff894e412f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1-canary.1064.9d500f71b5a1ec722d167c46548ff9241dd0c1a3.0.tgz","fileCount":904,"unpackedSize":2463155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiANHKCRA9TVsSAnZWagAAZGgP/RHQ3W6NSuysgkZ/cDcJ\nT+uB94YhpHlQZ0Tw0fQPkNFqOHcuWJIRrdZ6KizVRbteOgQsUcTPczcqT+Nh\n4je071XtsHnXEg2nbS86/8ciQt6WAdzFVT9sARrTkhiXhx5WULePLI3ytmrn\nt5dYs7NpTOk/wJivADSGQV5iHJq6mqre4WeHV4NOL1Rs2CjIhrYLJz4Ulk0S\nELMZgDOBAo74IEIN44IO4jt/+EtlTVLuXaLFJiUAW356OmCq/hpVxwdZAE+x\n4g8olaUC2S9Wv7FgUPJEd75QS9n+CeiiadptuIxLoxETZQ0hMkBHBNnw/7/y\nMZqtdHQFcKrSt9WwcOpqmMkzCQbHNPqqpBZEQCYRdaZkcHnJza2zGbqG+s1c\nN57hjjInJXQa6ESe7srYFwS7bchEEK7bSbeAsXKUADuZQzklmN6ZX1ExVkXE\n5Lc4V/feGCfU3ZvDpr50Q9SLPG+sVKzABKTJ7cgj9RlAU5GyGpHD2gZFigMl\npKEMVOg2ofiNvIYJZ5usceRFf6RzKV/1zjwtEXm576xPiJOzxLLwZ6tLhZYW\nQRhiyuqknlAnxDblAQJ9ZISAa/RFaAkN1i69SyUgFJPMFTk3xl/A8ko24K9D\nJmHFUpmfMWvCgggw97nbx1GVMYdqUdFONolv0X4WdDCCThesLrkgYjgkRmH/\neueo\r\n=1UW7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqocJMinD2rQopJog2pLM4Q+kQRYmf1jnmmbek8zG/5gIgM17xOobnXgmrecysy5sBmvxLnLJifbBGiJ6l4j1jQxM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1-canary.1064.9d500f71b5a1ec722d167c46548ff9241dd0c1a3.0_1644220874365_0.5387727878611046"},"_hasShrinkwrap":false},"1.81.1-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0":{"name":"@sberdevices/plasma-ui","version":"1.81.1-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0","@sberdevices/plasma-icons":"1.67.2-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0","@sberdevices/plasma-sb-utils":"0.48.2-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b8c13190e3346897f2577cd6045bb2db4c9fe2f2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-K5YQl5jWsY+eF9x2K13LKa5K08jHcJvLmrw1u5nfbRMy9WtTTiFvgonQI5r7ND+tXJ6V9svlm7Av3hU14BFfTg==","shasum":"dbe75262197813f1c7eace0f9088f8c577249fe9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0.tgz","fileCount":904,"unpackedSize":2460119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiANujCRA9TVsSAnZWagAAcj0QAIat9p8GezAHs1dZm4ix\nvuqwi5th9dUaJKc8G26yI0yXDNolyUnaXC2wBXkviDToWXRT3gGOx3vmnL/v\nUB3OWhvH/esRlZ20L2/khltnTUxL7YgESwg/SYh7v1OYso9dQin9kvsZkngN\nKR74x9c16U6Wi9G3wgxYtX+hGfiicbcVf3OPbUkuIALpvh39xXpQO96mxC1B\nvR06g3xNOrFGinVllCay3eA/QOWfSYwV02xPuA1FIL2dbmzxRgxed5lzKSC+\n/BI7JdtA5cqg/4jqnqdyau8vREkq/0TQcsAIcgck57qmMKtCrXqoxWU97xnF\nIReHUtYIi+dvaY+5OxwgHHkh4BECHDLpdY0KdNbPXvurwLDDd7V4NBmuv4c+\nz+XXcfggCHihadrOXqfPz9q+O8u1Vg1/3rPjjTQODKLPj5JknWZK30TCrhuf\nXj8J6xQdG9AG93gYpMR1WSpCs/EufJ3SMiavd/Tjkxt3pBqgf0RMKa6Ig2cz\nMLJuZwABFEGG2mw3MYGFcVOaLvG7+yrNMQBRb2k4PfB2wxcYpSpB/WTfINaP\nQq6zefKFIuxKWhhve1VikNhjeiShpMPlSepoNyJA9Kowc89x2NDYnUxOEboF\ndZXwg+AcI1SmP3Ayoe5xstAhgtQ+alQNQaux2PYGtsFYNdvT9AryKkeG0Uc3\nL1MT\r\n=wKjm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCj4Utr3Lv5u5G1XENZwBdGI3zzzzplWWjhyxlyvUDDkAIhAIqa78YN0noYcuCO1/MM6vc6flWtRoarNGVJBta0DLVO"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0_1644223395245_0.810866128460813"},"_hasShrinkwrap":false},"1.81.1-canary.1064.b306d6ee7358a9305957b17dc2757f16a1cfd81c.0":{"name":"@sberdevices/plasma-ui","version":"1.81.1-canary.1064.b306d6ee7358a9305957b17dc2757f16a1cfd81c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b306d6ee7358a9305957b17dc2757f16a1cfd81c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1-canary.1064.b306d6ee7358a9305957b17dc2757f16a1cfd81c.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-H4avr4B1dAlOWTIUt8KJH1ZLU45xod/do9ObrXeqf0Lgp3MTkiDWIR9s/yvNsABsI2AgWEY0fAOanN75vx1nEg==","shasum":"9be669502a644de65304416c9a84cea68103b561","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1-canary.1064.b306d6ee7358a9305957b17dc2757f16a1cfd81c.0.tgz","fileCount":904,"unpackedSize":2463155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAOUgCRA9TVsSAnZWagAA1lcQAKLBrSpo3E4vE0PXGE9N\n6cqTJ853YvbGCT+d9ugjFKqv0kWq2TC8xY3mY1xhLeQviOlz3dMYKVDjXEDE\n1waCwrXQnUVcXy2bC0hHLIwGybBedMvzlksVcK7xYGzU/UgSi0tIx8Y20GJ7\nyc9qJIKcE0COpjIVWGtIvRO5QKWzsH3CgELX+ljCcXGfkCEjCoacJZls8FCK\nMSp2/RFaVgnE76j1gZoTNhNf8oBxrGTieNrDBs8YmKycna3t+KV9vNwWKIG8\nDUPwU7bdk2Oi2RJLcoy+kQsnuQ1lSTlprTl9/Q+08YiUqMQGxByJq+GHy3Fh\nAYAJD4jrq5aPpDngk4lRLcv9YdcsdY1tXhZh3z2OXC2tkU7F4/xFojN6LeMp\nArF0+2Ma9OTY9MyOaayd3CyCVJPzWnz3WYQArINv+M/i6HeIPHCS2YFccJjW\nyGLQMaQkRjuz5NAtEevO0NAL42o0JX7AdXk1oRYR2/pzYlHkxVespzpnw1fP\nWfvL8nWYN1J2lStCAgT4PWJgwCPfNtCDnWjpTYhYJul1z8OUGbX93CkFK4Em\n1Eyss3uzyXrqrLZZnFb/N3kgDioPBvEizcwR5IIU1g3aW+cKxFaoRsV3bRuG\nK8L5GW8T7Yuf0ZbtTopTYxHUjQ4hZIlB7YAodN4fgvwfJ9jKA5Yl3unQ0jZj\nl3AK\r\n=7jSm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuh4a8etClji++dzvF6vNC+IbEnJ5E4R+mqF3kyh1INAiEAsl9u04eqYEUk/+Al+DEgvKBz/O3TwTw1Zxi6eRMqUTg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1-canary.1064.b306d6ee7358a9305957b17dc2757f16a1cfd81c.0_1644225824442_0.34108804208687826"},"_hasShrinkwrap":false},"1.82.0-canary.1048.2ee885faa73c6fad68e7277986a56dc89a9672e0.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1048.2ee885faa73c6fad68e7277986a56dc89a9672e0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2ee885faa73c6fad68e7277986a56dc89a9672e0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1048.2ee885faa73c6fad68e7277986a56dc89a9672e0.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-xGTK9FJvZWSIoAzOKYDHLbXx0wjHayH3MPz86q1pYxJ9AkfagUj3YCNRcU05aNQQQR2Ycf8HGnS/AX6tnsqm5g==","shasum":"793c147c417703bf218857bb10ade60c2b39b4cb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1048.2ee885faa73c6fad68e7277986a56dc89a9672e0.0.tgz","fileCount":904,"unpackedSize":2463155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAQ4kCRA9TVsSAnZWagAAOlMP/1C34CaaP8ih7rQNg0cc\nfRDQ3/JF4QAZEV8hxV8CmWM69Og5v5syqWdwPz9Y1hMuTfdgd/XJ6VQcdZWU\nOH+dZ/jYFuQ3n5256pGE3uBZP3JW9eCGxrwF7Xg4wJQD5dFQcWwe88kK2ImR\nGKRKq8qGsLTOh5bOCV5yGnFX2dLC1LHmgRqKAJUMTg1oinbUggzRLYuOWxYT\nwkGzZYI2MljaN+8ArhgQduc4B88gtIhV1GdXFbUomj+6VFJ0zMp4OxMXmNf1\nQI+cWukKVPPLNT9HhyXEH1bazgh+xt5GpwZNA4rKXvRS25cbjT7XPuIQZ2Br\nKFNku//mXFM9s+7ASYTV3uinU/f4u+TPPgBUZoxpWyZ6eqYwC7aXNowJyjza\nLD2KoJiM2epu5PKkajza8jXrnbd9SdMOz0N6mpBibrCWnVxhr2a5bFLGAhbs\neX3rX84feAkJBcApncqj08OphiWNco0XCAnhHlDgkHTiWioVUSakUZjpMBzE\nvKkzL1zFC7bfDXNJ8duKljCKVmDmrP8jYzsYJMijcV2rPzswiLr2AlOGkarD\nqp11PVHIOcVL2MfznXyK6Jyu3hNZZc96gpDYFc+vkbABrvXCDzPRzJ0sxriW\nDg3RKCw260nPaIknJiBQCRqDMJKlaVp5bGvX6pSOVyoZXKfGOKVLDoyYaIzw\nHj2Z\r\n=rvpo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVDlNs9SREzpPHMQeiIRxKIDE9F/CeiS/lEZEvrTuW6AIgLlJvggTd32RZntuc204pDWlZnFsK42K63JW7OFN+uyE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1048.2ee885faa73c6fad68e7277986a56dc89a9672e0.0_1644236324330_0.07463193169101467"},"_hasShrinkwrap":false},"1.81.1-canary.1054.a2ba6d35bc3279f2a75b8a0b339967d9602f895b.0":{"name":"@sberdevices/plasma-ui","version":"1.81.1-canary.1054.a2ba6d35bc3279f2a75b8a0b339967d9602f895b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a2ba6d35bc3279f2a75b8a0b339967d9602f895b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1-canary.1054.a2ba6d35bc3279f2a75b8a0b339967d9602f895b.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-6LAEEGh/XAs27d0f2f7WVXluO+ZAWUG8YZ61J256YpRI95GHKWLoQrXfy3wSMPGq3K33606RzCIFA8+Zt+ZZyw==","shasum":"d81cfd58e7b4d1bb7fa710f56a5c7ea37ba67082","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1-canary.1054.a2ba6d35bc3279f2a75b8a0b339967d9602f895b.0.tgz","fileCount":904,"unpackedSize":2463155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiARkLCRA9TVsSAnZWagAAkoUQAI/k5lxfbJI3HmnUlNuW\n6CZFTr9NnCMJa92lvFRQ9y0KGRzNdz7VVcl3ZuhUX2QydxjuH+TwjxXBswg7\nB9bT40Al4+xZwwMkJdLx3IhGWAbUBh2C/451b5zvnN9yVHbAy2m5NYVjZVs8\nIDEykRxBJWTmwUxC5ya2XH9FIozTHK2LIP/xp2L9iHZkT5PgMCWnS9Fg6L6Z\n6iCtEFw+0ivjLqsx1etLotK9JPU3zh3szJNKG4m2QaQisyQ+TqaeRYlSipPO\n5qVdyGGK1Cr+tecxipB1GLNovuLxWWr47wfJeRr1/f1XX9m5L/lBTaYxZCfy\n4uEcRSFueghYfCw1scmht0JgNi/OODA6MOda4HdDu80WaqqtjWqfzsA30GZW\nXrxnhZJR7lY7yVjXahYa47CUtHwiM/P0Uz1q/jf1jRu10XOt+O6vNwe5CgTP\nNXzDwWWbtjvUYTWlIthnpqPqBWtsPv5rBA+CMVVJXOUek4aTloSYKi2o4B8s\ntNfg0xFAhWsgETBwIH2Ct36Gki/MD6ZSAlkT6pL/yl5ByvdVOYeUmZlH+cHS\nc3tHeA8vGcNb0HjPnNkb6bOGDuJQMsW189txjGvXbVkmK+RIWJ0i5znqD3uu\nmiVWUaKmYd85vkcrpfkKle9vK6O5Oi7BdOFaFCJeqNGKZEJ1ZEJJdnl8/bgK\nq00k\r\n=4IC5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO3WdNe297HQ8hIJDdROlZYfHCfAZKh4xQw+B0WC2AlgIgSgKlTGuFzMqKO28Yqvz1i43LCC0hQwk72odxtqj3Da4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1-canary.1054.a2ba6d35bc3279f2a75b8a0b339967d9602f895b.0_1644239115536_0.16396314100516052"},"_hasShrinkwrap":false},"1.82.0-canary.1048.41513931c15ace04b53b73eacb6859c83fec9db3.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1048.41513931c15ace04b53b73eacb6859c83fec9db3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.2","@sberdevices/plasma-icons":"1.67.1","@sberdevices/plasma-sb-utils":"0.48.1","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"41513931c15ace04b53b73eacb6859c83fec9db3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1048.41513931c15ace04b53b73eacb6859c83fec9db3.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-MmAghJhfrvwkfZJcFZMEHMQChGQvgZPvJbZaKIm7ZmEoXxjPVuaSL/ENcvSoyWb/wpTzSkSQGwLmKBeA3cEARA==","shasum":"a9b872ae9b92881dc88b077873225b25935c4761","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1048.41513931c15ace04b53b73eacb6859c83fec9db3.0.tgz","fileCount":904,"unpackedSize":2463155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiARsWCRA9TVsSAnZWagAALucP/ijC2or7yjtCpgwKPcKS\neB0mkxZ3TtaG5J9edqksU4X2lMcqBspWiaas8K84JcXe/jBl37I/2PXhwiPr\nPlS6iSjbsdjrosiIDIuNwfQspBeqOEEzXHdVYnr6NAl+n2IaW+CDEABU0Z5j\nu3dNNk9SNqxOhRbKLMR+8LEmA6vA0abh40EYcEIqoifPzhiqLY2S5elhX/MP\nNFlw+0+v4rLYqRle2T4xHOUr9xaPCBaREVDR4MDcAxqzP/uIHdWqW0wh2EFT\nz1I6aTQERwxuIwd1WWZmXDwyUtgFDLavigYTmeyxWYpjQGChy9DPkNjS4V7P\nnORKDgXDuFVvS2HbW70X38zzt4JAfTTZ2NYUSqdIkttucoW/lt8vFQHhusfL\nMudys4keL5+lDPdjlR1KBOwXMnJ0qNL2f6NRoITmyS9h1u8cCtqtYn07NV4c\nOi8dQcgkkI+PHQv0RSHPPIBbODIG28u8hdfqOMyJfMkF7JQkkLZkFNLWwl9B\nk6OIWg5jScOyS0VkCVTKXLERtBGJwFkRg713+wJHctwnqrxrqKrLzg72atun\nTHqXOyL7n8NtHkG0AA2VOSGZz/dg72/TwzRfjc9mJ16B12mdykB+F/RBZf7O\nqhIQvkOzSXxM4xtNXJdZO+X8vGlXBq2naoBAXr/f5u3WCL91HSnKLqvxfqZZ\nyHXC\r\n=MgF7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdq+tCi3rtRvHM5jA8msZM0+kG5r+B+c1ojKraxqLnDAIgbi1bVVuIgs4r/dtdf+/SjyRsW+Am9ZcYTV3rd5P589g="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1048.41513931c15ace04b53b73eacb6859c83fec9db3.0_1644239638693_0.9662924737144971"},"_hasShrinkwrap":false},"1.82.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","@sberdevices/plasma-icons":"1.68.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","@sberdevices/plasma-tokens":"1.16.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch","typescript-coverage":"npx type-coverage"},"typeCoverage":{"ignoreFiles":["src/**/*component-test.tsx","src/**/*stories.tsx"],"atLeast":100},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c9151fae3815205ad55a3f1179f708cfd6a2e092","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-WzgOFJk2Ljyy1g7ECBgKATRPA6CdB/hq4430zJ4DvJJygSFMDQAtWwlt+DayHD9fWtJBaTpEgNrBlz1FExaOUQ==","shasum":"fe7a860b39c861ce157bd704a88c0cb82e9f0784","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0.tgz","fileCount":904,"unpackedSize":2466874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAUlICRA9TVsSAnZWagAAe1kP/2kij76Ee9/TBw9WnHPz\nXfRR9wMNBJacD0XVB6+DSr4sCdCWPKNHioQMCYVPsrlz3eHnVLHDyLP3dEWw\nb6Wa23mXvWqSiFS9P2b8JHJgplzhro942RcZwbZ/123x3cdC23Pk6FU7IHLj\nxiv2wUhm32TjQhTGZOA4ISACehKVQy7U1Jrd95J72digw8+QRL06N4Be6BN6\nwk5TCyRqoks/dE/PUJbBjmIHikTo8x1nwEsrYD0BnDwpJZhnu8GhgZt5TqkI\nXIncQ3AfQF/nj7BRT2JzPo1DG8FftlsXNAGhLcSoWAu3NeQOQEez3R0r0PHh\niyAjob8zmSKa9PVR9cnntwo0uRd7ykOvnzGTNqFsfxcIJvkPqK2ME+a4ETtH\nqENFM/uSd6PM07oErS4iMPoL05FzLT1Z8iufmUUTzz0F0x7yYOqv8+JFvx+7\nQUpb1PUnopJVK3SPbaCp2i8IntjJfH8gVIRGpo9HfQ96VugwGoffjRMqTNp5\nWV5vwu9MkHkL2N3sk2286ZqNjYdSC41ktnOIOGQBzPWblXu7KdDVOIlI0a3H\n/9SwDW5U3UsRZQUs2Lke+QKcSxmGFYYYwrMRFDfupO2bPUhZ3BlGwSpZFW6+\ntg3NBw7KBdH0437QEAK1AN1PL54fYOUYW4I9qDFABB+QPldMixeixUCe5mpv\nxG+4\r\n=xoW/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6120kzPWeI9vzzqsOSY8geV4OGuN98n6NnO8YlO6m/AiEAh7Yx9v2LF1amFbvQo6SfPkxq+iIQH9TP5kfOFh0yKaw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0_1644251463709_0.9104535890085352"},"_hasShrinkwrap":false},"1.82.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","@sberdevices/plasma-icons":"1.68.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","@sberdevices/plasma-tokens":"1.16.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch","typescript-coverage":"npx type-coverage"},"typeCoverage":{"ignoreFiles":["src/**/*component-test.tsx","src/**/*stories.tsx"],"atLeast":100},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cd8e92ded348b99e93be9526a6ba62afe1b5617a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-lAzXkNXwDaJi4x3neulg+u82NIXJ8bXop24iARv0KlD3cO0mM6+SoQT66dVhC3XFf/SwMNiZTu7p9Plu3TKmZw==","shasum":"48fa5f83d3015b7a2e569dbb80e55274eaaf573a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0.tgz","fileCount":904,"unpackedSize":2466874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAUmWCRA9TVsSAnZWagAAVVYP/Ain0RBiLt2R6uRrRLwh\n+MTaUmXh25OC2pGQrka/GkawRD9A1QITlpuHg7PHhGgx8Xvt1Uno1RzO5tUY\nkklU7KElBx9E8i5TJ7oICyTXtvv5cVpOdn9KfJXy42ccGh51oCz4QL1DWEWZ\ngup2InnDmCmK0s7ZTIL5f9+ceakQ/khRifNJlDMNcjmeEXwMtko8EiDse0lQ\nx9OQlL4s2EDI2WUMfFJqSylmO7dRHdPR/tG2OvLPwfGSObA89LNdShD22Q6i\n99nUTINvNM4Y7B/aQ/g9eeBmxGmUwsgfZAHrQgRtWGTXp1Hq5UCprR/Hpgtw\n9KG2PxOI1Ieutdis6pAZ+qbAvtwtuObhJe8JXYKC9SIGcIqzMIpJPOe60xvD\n3C35FckJJXOzRPdTUvV4TtB+PSZHIedJuzjsl6Nd+O4BQ7GzMqD4tDVrD8/j\nLta9ZEWYe8+wCUo+XIxAxLUUlxRFvsYiYgq6xFa7Vg1vdNdbvhx1aHez1CJo\n5v1UWnPNIK5+71IK4CaOjVwRYkw+wcCtzxVBndtnebcuqr6YK3AVWXhNbDel\nbCaiAq3tNxtabxyUE6xqLuJJ3tz6Trg0vcQxtQqweiO1YLgyiQlz5FdnUmaZ\n9F2leRu+m6kcjlxito1aKEkyH+jrxAXYErLFa2Wr3PxKdOKYDa0/Sdq6lwBF\n/WQi\r\n=m+q0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCis/a2NgN84YTUThyne9LvbW5+Mxb4WoHBIDA9XJ0O7gIgQE+uLroTEG8u5nwO8c9QgorsTv8IY7reCElDBjFDB6c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0_1644251542614_0.21310187589557006"},"_hasShrinkwrap":false},"1.82.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","@sberdevices/plasma-icons":"1.68.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","@sberdevices/plasma-tokens":"1.16.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch","typescript-coverage":"npx type-coverage"},"typeCoverage":{"ignoreFiles":["src/**/*component-test.tsx","src/**/*stories.tsx"],"atLeast":100},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6d27918d4d3e976dad88c1cf93c35c27ca43a449","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-le44CLqlcEVFuCI6osOuJbUEKWeuUR8+FImggdZBXvS018iUFITbgf8FmJ9cSLLDUZgjyH3jfKGpOgQxVRz6JQ==","shasum":"6d133c022361e932fa1fd789c9d6e02abd95fea3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0.tgz","fileCount":904,"unpackedSize":2466874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAUtrCRA9TVsSAnZWagAA6dkP/1j9RedRhK+Eh2QVyibW\nhDeTSKOt9GJqgXcA6vbyOMnGd87EHupcSx4cwgc9j41W8A2OuO/D/jWxsGfm\nn0ubXdUiToVQwDndCozhc8mm6asGGOxBrH4jvlatoeQlqxFaQwWbX6/Cluss\nSoRJdFmw91XZzWa58EJZ1YwuPTIIo9BVGV0au5WERUM1SCbcSxiFthOxlQ7r\naFvY94yuQtPmJdS27pbS96jJ1g+FXue/rxye3dPI8Q1esOYCGTqBUmcDQraE\nNJvY6omvEtjqT9W1jeEzouPMNazTL4og1TggHp4Ev52VVNuCLKQpQKr6PRQd\nGufCZDEji7FeMVAnNkPzlY5AsaAcKqT67m5+n/8pRGfD3hHNXkn3WqNv0ACx\nZto7GBA425WrWaCH/Q9kz355erhxBEWD7NqTCyG/YwhVrsaa6ul17Bbx38rH\ncO2NCIZOfNzUJB8DzhqOnQborz0PJimoaCAzDnLKMrOACPvC05fakqDnTa7v\nBJc/tC4ufR2Eb9/flMdbObEMMT2vojyxzmWKgn6Eyw3d8qoP2rE1V6yFwPB8\nyhIUMMlfoNf2mql/C4wS32YH1o9a5felzgW8bkfo9znqCtPa1hPMsCmbiG9i\nLMMfOCIsQQp3adu1b1In9GZi0FLf/Bjpz7JGtqy05uTOswyf+uA6RKIW9Pn0\nNyBd\r\n=31Ue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEQCN1pb0BFCpSOl0zdftn/bvohaKRalfdw4Q8wvPfYAiBVc6ZPN2WD5u5W8IsDkXGlTcrbD9GqkC/rOnJPOLkejQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0_1644252011208_0.5231984332341033"},"_hasShrinkwrap":false},"1.81.1-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0":{"name":"@sberdevices/plasma-ui","version":"1.81.1-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0","@sberdevices/plasma-icons":"1.67.2-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0","@sberdevices/plasma-sb-utils":"0.48.2-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0addced2988f4bb3337527e17bc75a6d180517a7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-mks8HMvQL9yeRovlWx7yvOzZpmJ4O0X3P7cNY7O5a+8jfMYQjqYMEhYYTq4d5ntXPn5wl8zrugU+pXUwvjG3ZQ==","shasum":"699adfb147965d2620168fa62f9c656c1678f6b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0.tgz","fileCount":904,"unpackedSize":2463375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAigvCRA9TVsSAnZWagAAq9QP/1dWdhCtpmXxcfqVp/TW\n2ApTQI3E+bF80PqUO+eMCyneLl7NIr+d8RBPtclqqj3d0Bo9pxYs7K3m/Jzo\npBOX3uMZMKARxWI4ejlWmOMyW7DC6bwkciThr++zDTWxlVQy3UH5X1JAAPaI\n+2p1lq38P+dC7uHuRwlTyd5zOwgPtUIZaVBtZ0L0WmScjJ0voFu7DHZDZLbk\nDVPzRSzUQYolxgdaDFRDO5yBl6txI/JoMHgt+VLHMzXyUwbZKQjI4GTd5Whp\nawrJ8vELWHEDb8rAnPpCF7H4V0cIbE9QTBeffMUbKjhSF02IGcvZsuhLAdHk\n9E5SU9tLenzHm7J5AMKfrL3HYhz/01c8ZXc5sVZrN/GT2hB2hQCA2QN++DdC\nHfoWTtqNrhiLzkMPYs8M2jpOcfZEXQ/+aUJzjWe7URCnDPumNfK7clTLktua\nUnxXyFD/fZYP3D8p88s7NSamSsGgM5j8d2gJNoxr73oTKyAvqKHpZvKloDqz\nwsR3J14DyZBVzeGRkpdh7DR1o36IcPNBIYvg4qE9QmuiVWJeKgl9mDNUgf1y\nQG5A/z3lzreQ0OjS6cNa37/tNHaBbFS6P/S8+aqiXArucQw16tJqtAsulO8R\nuxmM6WLxzmHxq7tSJOVqrsvST7EAKXR3VKn7mZzThnnzdXGyBBSsa+PyVpUy\nZ3OQ\r\n=+5ci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCA5WGJbAr7rr29IPD9ao5f8kTAQgZURPxycNYEIBSbcgIhAMJPkMM7gBfj1vxDyWW4lKFYg6UZFJauNpUv4p4y4F2l"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0_1644308527560_0.5382021374137718"},"_hasShrinkwrap":false},"1.81.1":{"name":"@sberdevices/plasma-ui","version":"1.81.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.2","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"60edc208473f458b832a0d2eed4f00f4e68a28bd","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-4Ag+8ytMhtJ0F2m2kWKVEc27aiA7SsUZtuqdc2hesJYyJzSPpwIgdO3rpzE8CJT8yfIreP/x0Nmkw8DNmnea7w==","shasum":"c291c7f83dcf6217a1aef2e6f069ef8509f8e022","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1.tgz","fileCount":904,"unpackedSize":2463577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjE3CRA9TVsSAnZWagAABe8P+QHNWyX70mucZlRbX5dd\nmFMQWaxQtlJMUu8ZjV2FbuVho1z9bf4kPhHHA5/FOzjXh4FLjS6tlMjgavRo\n3Z18r2VsutdkHHKWH8Ay/nlr0/4Jgw2qv7lGo0G1cLeep2iJKThN7/fU9Q/R\nnT4G14bZ63h/2sPO5ecC85sGaGk5Xi1Vo7/PNNIZ949t9mfyOt1j2SFd/ln3\n0yJ3qrwlzEqjP24CyAGpGgBkapDiIhRK1gjdbF/MgbCXRt2QZ4UYFJyJWHk2\njmdqQ6GQet9mwSvDOwA0BPQso7cxgPZiyBiMx/jg9vONTZigUVJVDG5NV0UI\nqN8daoaK4+lPWyz5Gg2SVyGHrCTkDqq2FuZMLy82mj4HR77jIeAS/UB3kPif\nDuR/duuPvAr4TBh3/+jYJ3nIcKg/oL3yp+0VrRhx3+R5MSfl+XCT7ueWmQ1P\nVANLg5ZfC5UdZBLgZ6pP8p2mpJUU3JJ+7PKkqCut1aDY1Wy72e31kXwm6N5H\n02jeAaPacri5QESYy+e8AoUWMqI4harR2thvUbn7NP5yymu8vr+TMHSq2PPP\nRJs2yFM5vRSMC14kgttjkAuQcTnM6vdTuiDrXr4dCjt5EfHYc3t1uJqgYKWR\niczTyn5lrga4TwSn7LKzQWV469shI2TCcrMVslUT8GUyLRwYjyh7ZMs3Ab2+\n6MGm\r\n=KQ7w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNEps0vFjXtcuHgKNSFamkkG5ocQ36AxYVOMKWjRTGmQIgK8OAFEqXiTsbtixh/j3rqGIID1CAM6q5hXfI7R9LPLk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1_1644310839746_0.24487561195576912"},"_hasShrinkwrap":false},"1.81.1-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0":{"name":"@sberdevices/plasma-ui","version":"1.81.1-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0","@sberdevices/plasma-icons":"1.67.2-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0","@sberdevices/plasma-sb-utils":"0.48.2-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.1-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-gZp/q+KfXK2/JyPponKgyW3GZd6zvdD5cpuU1h9zDZNv2vPSmG6xv/BboFWf6Btvv5JMM9OOlCjfOxIRDT11AQ==","shasum":"db8048e232c875e6d915cbf5c833758b3c893938","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.1-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0.tgz","fileCount":904,"unpackedSize":2463375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjKPCRA9TVsSAnZWagAAHB8P/RaotPGitAUI0+95KvOf\nrufaLVw4nGkzXH+c3M87fvmYNmyBeiSIgfLrMsPz1d17R4y5GSnMhUld5UfI\nxIgrOUJBVbDYqZAdau3CK60J9VGeil+O961Z2YI6PrwEDNW85Q6eqsBK4zCA\nKVDUwclye+LXyrnsx4VZaSDmKPYXbr8arlCNgdsheg03cOSQRtaRRZB7wioO\nQmpDknNGtl/6As34fQDJN6cDT6uAH3RUp+kSMNGLRAfBluqnyA6Qe0VBt2Yo\nTe7JpdcxWXOVB9NsiJZvwfAzfOVUQ6Txpt5FFTP9nJBp9IkViRV+wGiIa7Jo\nfFQPEoi+/iEro5kjqboyJt3+OEKjOjG2QF+TWSsj5iKTJGhn41F6TGnC3R4z\nsCuo1YbxuWmqgmU+0Aa6WMYT/9tsrdnreyARkAQf6KwTMkXppM8ssgmbV8fV\nxXLZUxfQ25JE/63AeIXOxF4CMcvVUdTaxVI7LbS87Xxj0l13YmPlpSX9rMEs\nVPdchAn43yp7XezkCruU4VC0NPc/QBl0qVEMeUDBvMTUv0LDqNsd2pQie6rP\nFueID8Sz3Jh1e4AbIFcNT3gpwE2opZulKVCvlORALJ+1fzPwi+b/DTddAPAR\nkirRokMUC68F71cidg394jKvfWNtJJuhiq1w9+YSjZQ3gr0VSYKsqi0Lybo9\neCWU\r\n=pVGm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC796IW52rpv+lrnjzmwhXYDSomweCinM6VP9w/OqmiBgIgMjLQFhFPaMHDhYAX2lwbgGzNpOPu05qEY6N58cKgXhY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.1-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0_1644311183285_0.17101156001649187"},"_hasShrinkwrap":false},"1.82.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0","@sberdevices/plasma-icons":"1.67.2","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"bc788d6c7d99d594e059efa986e88c4aab108b9a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-BfjvclqhlWEJgJbBWj5v/xNy8addMALH6bXSTdyDpnbDfCgPguBFNSOsqYcRupfKM+ZsaUGzyhz7JuHgNCRJxw==","shasum":"24830221be1efd9710b59b9dcec40fc586d34bd9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0.tgz","fileCount":910,"unpackedSize":2478414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAmW6CRA9TVsSAnZWagAA5qkP/jZCR1Uakl3IEeD+pswL\njnVAQEo361XSrN8OxM2XsmVhqwI0X8rkrOSUnJsWRQx4U3utFWqexHPiMQDb\nvOtFcR0be3btWavArEdzhkZ7wTUCypy7UEnBPYNCG9PDaKBuo3YVx5z5xsI6\nqkzyKZXbTYzyjIdNSZIIx2J+BLD60rAQ5/4WP++Md1lD9ajPpotu9uiyS/KM\nOg0iEzpMvq4QTfdOmQAQHz/y1Cc0Id26Frk0YXEtffShd7so4pa7sEJcpLiP\nSYd67SrcFHEve6rLMf4OkWYjQia4btS8VhKmBEHQgJ6rKzr3j1n8K90aoyqd\nXljQli3lgAeSBallQFguDVvI20YhLybZnmtyChsamGxWJDiw7SYUw+r2EI5K\nmOynQNXoerDTicJWrBSWptREXjvMZ36he86X+5AZrCiwwpSPG94bsJifVq4H\nhzx5f/1zhGXVl0UGqWvEUUSb/2RCUUtOzporgCX8Y0wVxZxAvCAZSi4Lg/28\n/qv5T74ZH7SNLPyEpjxt4kmUi1do9RbPNAPOM/axIcEmg2GCWAvI8fWkiEaQ\nFzkoBiMpy4f0HMqV3zp+chyAPYFT9RZ9ajEP1ScFyECk/GfI0Yo/fw0T7FSP\nKRZhTbx/6YGrqhRXjBG/TpgUyBz7EPkL3Zg7wvGPjgdHiuiP0Yj4MEacf/dO\nUVSd\r\n=8DzE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPfxSi0sCX2REDB+IHkgkwFKNbcXbYcAQ7oOFmGTQLXgIhAMA7+1P7m43nowzlR+e33/lpLbwGjxQeZqxdCfLGNFau"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0_1644324282107_0.17005027699263775"},"_hasShrinkwrap":false},"1.82.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0","@sberdevices/plasma-icons":"1.67.2","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8674a0d46e16e08f09f4a9ca4508db9d13940950","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-kzUaF2cGV2Pb3PsZ6IQ8RZIQcAmzeMCJ9zh+yKQjQljIef0McbUTllhvmUaGhzgtQ+AFjTkHr/XvSrdsmHg90Q==","shasum":"c2860162a0865c843100476d0cb959a856662707","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0.tgz","fileCount":910,"unpackedSize":2478414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAsGECRA9TVsSAnZWagAAqHkQAIWy+TI743stjDCO6uCe\nNNCRYDl4igzfZaMYrJf3A+ymNC1uCeWBJdrkZG6yV3rBQaKKynwZOoICJXpJ\nZ6v6TVSk7wm+v/p8D6ECH9BwK75ro71ZMfAktHJXgdxQTg1YhkH1jrkPNied\nDJNBauTVRrU1wtU0QREhW+8r6XycO3ChjFxASzWB6+npXHX3HI+MnGFfiGQp\nPrP0LRbd0ueD+xQmpg1bOKhuNbnj2vmDa3kuMxSDbBcVLRBdxD10Sv1PyPLc\nehA3ELRn94fKJkkiPxKtGna81rJkUTdszipiMkqDCl/7WrtV++v9FfDE/Xj6\nYhHmJDerdsegtAxDpDhYishFSXatdhUehOylZTWD2E2dJGhEaLytkmKlmigr\nB6X4suvybnpAuVyQh/aoyHlgtCRpRU6Cq3MvkYl+ULYFZqnmeM9mSYTKD1Gi\nBqRUdaB2FUPKg7Rf/G0BbtENdp4RHH1TQNBjr0g4IjFUp//Xs/3Yjfw8bkV0\nXw/CZBF0zsFe/PONBfs8tgT430QJrMLZONxVQNlLGcICJa5AfUqhIEX4eaod\npYdWRG0PtfuhMu6EPvp3hu9HqIFH126jwC0hBkglM2ydsE5pi7bx3QuMERi3\n7aVdXYdTGhs9v11WJohwJMh6CRk0Rxre0LWXCV7stUg/PKfJT/dY+11aWkRb\nKv8V\r\n=O8t4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvepaIgR7CgAjemy31CDT98exSXpBVSt5jKR5Y5SP/MAiEAvBNxxnZyFJJLxoTSvmivYMUw+G071RmG+D2GRonYPGU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0_1644347780018_0.4007514779041592"},"_hasShrinkwrap":false},"1.82.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0","@sberdevices/plasma-icons":"1.68.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9488dacbb4f65570cfe3e5aed388c8708aad826b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-m5xurtzwWaqkBN3xjmlhMrXyP4xwwFJWHM3/5QnUV+BXqAA49Ju1QuzaCJXBTFjf10Fgb0ICvpcinu4JCUe9wA==","shasum":"cf413ef623f37d793365a6813d8f29b41516fece","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0.tgz","fileCount":904,"unpackedSize":2463852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAv7ACRA9TVsSAnZWagAA4coP/1B5+WfWCOsqMEYbJPwn\nFZpO+FpV9Liy40iWwnatVvcJPon60YYnPqi+96ua2ebDemZrXZXQWs0kwXxb\nTcwV+/LGbjU52fV0mBxqJ0axfqtMUJ92PPLmaDam1kStVhkE7dMb72dCDj61\ncfoiOL6PrmB08FInoAnNHoubrYjvBhKNnlYqWgTMLAldyAa0/tTuG2KqsIaI\n0xogHEbxQRFSGmFL/Zr/wUOwB947HR3k9B1ZI+rr+Zk8ti1CoLg90bTVYycO\nnHeC6ZwXGmAfWfSEKy/sMiYVUu4K3cTEzZRyyWupXsvTEG3LaBOW4w0zg8K6\nxc9rfaibf+88QHSP2l6VCrygMQ7Zu71rf64pb4DSxhqGwtLNwI0qgXUeXw0R\n1bm8h1S1NkEevPyU1RjX/yW2mh7v9jiBWbJzdKkkugDyi9Z8+52JYYtlryIT\nId4eaKfACDS9zGwS1Y7Y63Fuk74log1gcSEU0OBgPv7jEBUBrsxV3cv4MJJq\nsz0aILf9YIonDyKzHcVt4kA1Y9zMOX5jMq9G2bbDXrojQuEoVZ/RdBSeDPHJ\noKdAKjUQoTHvSrUppEkWua1PRZm5H1UAWws7BZaElCQyUKAiqBp3ii9F8TN3\nSQjLmGrMtyuxIr/hQhymIES2BObP3On87ddXKHAI3oitjA4SQwO7NHARIIQj\n+c+a\r\n=BqsF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9hgcxsMn8ecQKZkphL0vg5gWtvBBZrxaGJvHE4jPNoAiBhzKQWMCBnJ5k0zLV6Mwwm1N0X0vgNDXAazV0oephjYg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0_1644363456183_0.17844312116650185"},"_hasShrinkwrap":false},"1.82.0-canary.1075.2e755950017a6adc398487e567338c380e115180.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.2e755950017a6adc398487e567338c380e115180.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.2","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2e755950017a6adc398487e567338c380e115180","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.2e755950017a6adc398487e567338c380e115180.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-6tzN9Dzes+caOBrJ9f0kcpHmWsK8AJ0fR3M/ccf9cJow+UxAuoTy1bpm7SrARBddYxycVjgpxWq2g/WKvctELw==","shasum":"794c43f0b552752dd43215fb22ca84d6a6152ffe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.2e755950017a6adc398487e567338c380e115180.0.tgz","fileCount":904,"unpackedSize":2471887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA5qjCRA9TVsSAnZWagAAWb4P/RGQWwEtM59+vTj0A18u\n+kb/CnPtQrOfhAzUEFrJxi9bqfxeba0KbBGaepQItGb/bnDdjzDrQJPOl8gx\no21xXwWlrahTx6R3Q1J43LZ0sKeXDCInaoGDOP8fkRaNX5dsCV18b/seMDco\nDNfvlm1qp9dQntREla2PHPd0uuiZhChMa9+oECOWutn+nUc4BP8LL95d8rbD\n32oTMbBxrCjuGTu3TYjT0GfTbxJ7cKWAgVg0okwY+g3Cnv65Oos88LqXbsgT\nfx+jc/Nl13RPPYH0yQgywchus5dbaP5ntSgKmpBIqyAVy77VsFoWlqpvz0ba\nekmvbnYMWR0sfl9fuVSDV2MjJJ1LBvG8vVAehFpqTp/U+qDNnrnEblWj5mv/\nLg1IBE+5FScl62s0+dxSDKRibBcot12fXzBhJ27cf3+WgMCWFH100YF+LbMk\nohSXBdblvafBH2uBhMariuAWSALww59yvvCx5JM8MwutVWbxBQ9Ub9lCRrPL\nyUM/ZeXQRrnucNWY2HsKl7tYXKVR6ERVXmR9OrszEV3/Yp+hUXSec9A9UAGr\nij3TjCq+2X4oETkjpN8iNx2/L7AJAYGafMf39IOQkQ9/16YrWyNDdZQtBnd4\ng/064Y6Y4gNeomvISXZGOVtSi1EFyPK4oGMzQzyZFWsBi6ict04IzlqNidHj\nqRUl\r\n=CDbT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxkSlnvJphINrzRBwaodg3r2i45yA1T7CpQ1e22rAAsAiEAz8qYIepTIFYnAQXRBK53Bp2SpDgvHlf3VR+A6TKmCes="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.2e755950017a6adc398487e567338c380e115180.0_1644403362865_0.19459360640987589"},"_hasShrinkwrap":false},"1.82.0-canary.1075.ba849a5167cc6e73e664cc8619f0ee4433d415e7.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.ba849a5167cc6e73e664cc8619f0ee4433d415e7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.2","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ba849a5167cc6e73e664cc8619f0ee4433d415e7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.ba849a5167cc6e73e664cc8619f0ee4433d415e7.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-QDPG4gpaJ52UbKRA0v/lmHxAdt3Bi4xq2Hi+4JZnjtjK4Hl38uVQAFdYp+ja4mrza7wV06ymD+wzg0VqgpyLOA==","shasum":"fc4d1f04abc6ed00c8d30fa475493d63f8071e10","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.ba849a5167cc6e73e664cc8619f0ee4433d415e7.0.tgz","fileCount":904,"unpackedSize":2471887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA58WCRA9TVsSAnZWagAAy6YP/iU0eZFCgk7EKX1a8n1B\nD8qHSU9gtOiE5Fimx2dhtifXU9hFs8zjdeaeotqbKC3gVCcXO/fFT/IU0cFA\nG4g9JeZro/cE4zDaRJezhcyeX5VYwb0r3gTo9UXAjfemb7XObzjxkTG5vmdx\nC0oJyVYHxR+iUuU705XmGI1jTWqR2xMXUmylAzz6hN+wUtJo8S0XHckq3jt9\nhZbp87R8PD28FGM+SZaja7ARhyl7uRWiILAilwG/xjIbbKe91rwlO903ls6G\nxuINox7F8nCvaAs3TEFolYD72YBj0GLPItqhXzcTCKB439E9B8nnBr9j4w4y\n9nzWMEKNhsReyOsB3HAF2MDkBLR8S0JSqyaBA+H/rubqwknF78ldk5j05pLr\nZTUmRcgZvtn9nVGCGUVip9n0HN28H0KBGHmBOVqw1BrCTTX7kSsQNIXV0TsE\nrDkk4rcSSRAEVXkT/rswt5foguQecWEzBR8s4JWguNdOLBsFXbenf8PV6KEI\nPIZgZgXERyOntJJC/RVF3BGc135SmEjXbh5hiUbRW2xOqO/VKC9LNLmYHFVD\n7pOMOWoc/MuD/IZnIk489Ms/Oc5hMiAKXSl/e8knxNnNgKtpQvXCHgVqMWkY\ndr9c3lkXgDe4sQGQXwXfxsw2EOZGIhmhjKIYn3IdKIo52uUkWVLj8bUfjwCZ\n28Xb\r\n=ct2e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9ZCW4O/iRxekqZMB304DNKYEyHsYaOcJ5c4n+qiV6LAiBHelumECaLPJv59J5wAzK1l5H7E+IBmglZDYZx9zykRw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.ba849a5167cc6e73e664cc8619f0ee4433d415e7.0_1644404502283_0.9024951898568583"},"_hasShrinkwrap":false},"1.82.0-canary.1075.b4086422f28fd0cf0fec5fd3352cc3870333b7d4.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.b4086422f28fd0cf0fec5fd3352cc3870333b7d4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.2","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b4086422f28fd0cf0fec5fd3352cc3870333b7d4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.b4086422f28fd0cf0fec5fd3352cc3870333b7d4.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-FmimPxidIO9cxPHC/iFHaaacc4XGwLZvSKW2LnPjCq8DK1Mp8W3bYWAWBgkFyoEFQ0GcKHCYU76bXno6FwWLyQ==","shasum":"2f96a523c342819d46f13fd4b36567427bea5204","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.b4086422f28fd0cf0fec5fd3352cc3870333b7d4.0.tgz","fileCount":904,"unpackedSize":2471887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA9F0CRA9TVsSAnZWagAAZggP/3Wwsfz+D8IvDDnDnuTj\nVkPgtR3TZ3iUig4eDJ1yybtlZU0wHE6/z5Q9YolL/iSyvr2PJO9nmbgcqePp\n5ZelB1Iqv/zBBsMI5IuQVeV6OSYDXVCim5DjoY/gUDnAAAvjFc/wjIF+rFaE\nzMvjushlxAuS1LL8m7wZL4z/WOrDjD3p1Lf3BSx+kNRWMD+BstB8eGQYDhCS\nKNp/4l5jumE4QNFWKw2azw8gz5YKMRVz3Nb/jSdn+Y3wsugi5vOWQF7Qm/lk\nLh+RRzAyTssDubX4JyM+Gh2iaRioUMy4VnNPhv2cI6LnOpjXqJecIbvmog+S\nsiIisvoeJLeQvS/CINoe8EzKRDvCP23FOE1q37QqOufj9/Kb3CxanH3JaZY9\nLfZpV0tp69O3s+EdFTskkDc8VVZqXLNIOWNXCj3WIbOHSOrFCyD63MDMZld0\nLcEEsqiiUfJkrHOdWyp8OEvrnhuxDOMMl5LLfTUCkmNoqE3h/VDDJNOJ9jVC\nHNmR8DROOd5UI2Wu7J0srpG79qAl1xVn+sTTOy8DF8dkzIurEQcNjRPCCklM\ncfSsJwMGSPTLWX8wqGEB1D8ljZ9pxa+MySnQOeo6SQuWw2p2mtV0Jp3co1X4\nolA3tNWQhcTZQjSqBXiJhm4moqqq4F6Ynuz5/ReKzV5xx9zpsdGJl+eVovdD\nUKDF\r\n=ihax\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIbVTYFJWs4uZyKwTo9cadEyK+uQ0yLyZeWrcS00o/iwIhAKJrqk5kKzdUGY/R9+lMnljl8FAF4bb+bFobPHk19855"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.b4086422f28fd0cf0fec5fd3352cc3870333b7d4.0_1644417395950_0.12334967729567858"},"_hasShrinkwrap":false},"1.81.2-canary.1076.e442dbc34c67edbc56f046a6cd9c671c1903c9e9.0":{"name":"@sberdevices/plasma-ui","version":"1.81.2-canary.1076.e442dbc34c67edbc56f046a6cd9c671c1903c9e9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.2","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e442dbc34c67edbc56f046a6cd9c671c1903c9e9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.2-canary.1076.e442dbc34c67edbc56f046a6cd9c671c1903c9e9.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-JdpyhJ+6ILj8oGxudc8RMqec0lO06jaEb5v788rEXANHxQDUZQn8EIk12mHf4rHh9JReiEI/pHCz7jvO+3PQlw==","shasum":"afca53db8dcf889af5edc3a746d51894dd7afc57","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.2-canary.1076.e442dbc34c67edbc56f046a6cd9c671c1903c9e9.0.tgz","fileCount":904,"unpackedSize":2463760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA9PtCRA9TVsSAnZWagAA7T8QAJBM1XmebqF9hWVBcYlR\nkz2d+bSN/fsI4LGYQfjat8A7JeF2xYF0t0o1MUa/0TYPnqF3w7eyIA3IELp7\nXwSWDJZjZiTkCBmZN5827LiolDI/vUv8XzcDt3O9BqsxktZk+rkSwgyHxgby\ngyirAhQIqdWMTLDz3dW/Kn356YXPrNjPuXlrXWal2/t0QrOvz+szICEWqFwr\n6T/HoNHnrNT5YV3VmFA4poltzBz8JCq5OlK+qaoBDm8pJApaJrlZuiQxOJJ8\ndhyEBiQL/QsJ/ArviJe+dWO9hx18YxEN4mhtLfsRSX/AV8oH3R8AHM28EcOj\nQhz5172wKGCMIelFmu8S2rzzSVrGdaqUHgSLq+DxXTldjng5vSHsFCiQX9l7\nGfcUk2lYoDYMbZNB3RCMAY6FQ153c0YOxpfk8T4l/2yLM0Ei2kgdjD5aXSRk\nfrQKAjI4LfLJL42fyHIYf5yEtJBQwPO/6ngn5MkhxQPdQVVvRBjo0XuArueS\n+hbRyZFMtZ9Eaxc8oKRfIKe9xlaj272ebwKMO35BJJsewId6A79LTDvVuqWB\nrmI3aaT53n9Ys12qexHj8tpeSrCC8o3cGYoNRhDudw0GY956LlFgKluG5a5s\nKprDMPFzAxsJTWu6fzxXy78WV/Mk9I29wGcAAwQ7A/IH9xaSD+ogeFZ2zDFB\n8cpu\r\n=AtAc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4aJd42I/HoBpQXbTV0xpRaKBTTocnvfEZCkrhyAMvbAiAsfev8GAElCOi/+6u8M7xWPI8H3Z2Aqeu5JzbAtN9wsA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.2-canary.1076.e442dbc34c67edbc56f046a6cd9c671c1903c9e9.0_1644418029573_0.6173615362317517"},"_hasShrinkwrap":false},"1.82.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0","@sberdevices/plasma-icons":"1.68.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"102b8df4c214674ed8054b93b793d5766d730bc7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-/UH3Ni7d2BPnOxD6aOBZyJoFP+awLAF2ls5y0K1J3TI/IwNVbdjcAtgKFeMruw4WKseY+r5wVY+W++jGx1oH4Q==","shasum":"b227a092e8afdd247f041bbdfa4410572e93697d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0.tgz","fileCount":910,"unpackedSize":2478524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBQhfCRA9TVsSAnZWagAAH7AP/ihV1fE7LYbX5UxrD/cI\nRElzLRpItjtoC0jK3cjQwEEowZawbAvZdx5bHUX612JRf0pjNpVfZnBkaKV6\n2fzaycDmtY8srN0mhqo7mSs5CPqho8/migSK6vMBpI0/+bBzBolcsvBYgXlo\nrKT+RHUizYksp+7yNQE2V0sTLZ2wgNELi2Y84Md+xp//VSDDHVXDFrBTlTav\nkqYYxhG3EasDm2tTNgxnIWnbhSvGXKFam/RTOTrNrLh9mnp1pCodRak0SZKY\nIc0FPH3aaG2agR6hd0wGr+e84FlJLiMN5idU9eh7FLy2soYbeItbIsHdYvNu\nle243gIOH+H9HtxmamuF4KbmZcwRRkrr/vZ9rmYyFWxf09KLUgcHHVst2hzq\nJogZ1SO6LzzaoesWvTq6mRD/RupP+wuKq3UQjvanTbGxXtiSq8lpZtb2TIh0\nwNtMMtyzdGxgY1Pjtl5gME8W6VFKtXW85td4KrVljbAp/SiNzUBWO3BniekL\nnh+969lovL4mSlH9kAui8wggfeeujekzKODMWU+9nAxTSxMhtQ8VHZKQeSOv\nLH9kAYQ4pBQYD/aDV3bkOhxMXyH0p4Qly9VyWhhKGknTiyH0xi0hKH+gDP2f\nqAC6hRYlHu+uDr29+8Aek7Sjh0OnihZSHpzFTddczAO/O/m9zDTGrDams1Ft\nZRqA\r\n=NoR2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSTCUCQHoLvMHWScWtBbfrwnRXTOJKnG4mXVMPuZmmyAiBS337ULrJeQknuTpbejwjmPVvGrYHk5NGkbezQ/Bm+7w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0_1644496990967_0.9600648076269713"},"_hasShrinkwrap":false},"1.82.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"60ff2c6e9adfb16006281ed2150f99d969e58116","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-XuOEWZX5Rl5W5FT6kjc5kvbX32Kt667ZAOy3XM20eXxl3I9llL9QkyARuqMh8WFqI9kgM+nUqL+g+g8ZQTZ4lw==","shasum":"462ba9c8c9ca160664f94c08d2c01a1fcf7cd275","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0.tgz","fileCount":904,"unpackedSize":2466499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBlaKCRA9TVsSAnZWagAAjPoQAIt/TqzC7asGkWG5tygT\nUAORZKbwyRggF1MAjeq+s1afUTvRyXmGE4B37JmsHCAUKbGJbQFxkdcFozjk\nyeqFZ2eo+W0tofV7ei07tW5pXQU8giDZ/+oGL+Hf43wb/oXNGSeiK4VoK7Ag\nqPIHrxCx5aYTneu5Kx4gwbZZnSQHpfzmWbJpNvFL0QdzxxVRKRk8Ht+z2STo\n/1ebQR3SGaJ+Do5s9OkJhE9teBJYkAPUQw+HW8lXaAsqv59+rIAkKyJIzCkD\ncIyU7rlDKbH9GQ/HKImi569/iUAJU4SVFZNf6Ni6amtrvv27E96k1A64a9g7\n2DLk1XRySh8vzkqd0Q1x3JiAnAxoiRxoXg/dg34aKiGvRC1kOA5r1gazyVLo\n5ReEJseQRlC8j1xd0o4TcDm3+uw1Myy6G8Wx1N9Ym3rIKVQMNwo551nLnCS/\nPYu28OeZpuy8iEzELnR197hozdGT3pdIERmj2FGMb7rSHlIG4pSkS8p0bfZ9\nGROrgS4Jasr1gn9/Mf5+hgvVKiHic9akWWP/y80azj/nJ3RkKld+3cZsOD7M\nQJm+qmgGZdyr8AM5z8+hYJtSPAERjkmxQz+ORzyCbl79fVAzi4DAfTnLdpn9\nLB5eYF/w3eeQiYg+02uAOtxt+vdwEWwrC5L8noXRBwb2VUhnPiPdt4H1LQNO\n0wGv\r\n=JQ/b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0Ff2x0FjVcGvsWQOo14p1Xp76pAQ7jNpvY2aQ0plFOAIhAMChMf0wRuSTXiVp9UOBFZg/5Lc696nJheGh+h8cMSX3"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0_1644582537923_0.42995892929586477"},"_hasShrinkwrap":false},"1.82.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6e58a7cf7b18b8caae0e6582d64dabd99dda41d7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-GdGPHfVUNjN9dyffvheguwA0RP6to5AJftNNPB66wyWwMWGGI/3ED4EfhZ5qWhPVbc4tzMHFkEMe2WvPLygQTw==","shasum":"abf6962992dd03c9724b45cecff459eea0872a0d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0.tgz","fileCount":904,"unpackedSize":2463797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCWtACRA9TVsSAnZWagAAwKkQAI6vYSU4MSytzp+owUb+\n1OLStWK2hepNfUKWua2P/fLuUFQVd0+Wfh9KQTm4bQRLHUzk+Liw0lLrzbYw\n0fH/CAgSoC0rMkWfhITQK3ZH5vs9owDC82yxB9rQzWKSdHKFhuXFzznKu8TJ\n6Zo/4dazHxiK2T7kThNN1U5Wgy1REPPH0E2CrBW3TdrOmurENR2Dw6+iB2BS\n12esfX4V1KzicoFbuIylKpw1dCh+Sdh9YlhM42U7JtXqviQo7OOxBEBDX4bD\noLMGtA6RV4USv7eo/4gCxWmSkJJpj6vp+pcjmUObPatMAg5yYXL7q+7j504z\nUX3QRR1VJzZdnCPkiXXLU/k74LSVH99vWGU0/a5H+PMD0TpK+nfP9Nlvs/eB\nO2CRKjh3MdbsIWp2MQeG7c4dxH1Sb95fGHQF3hw4f08ADcbzKOVnJcSn32Al\nX5d4/LIItE0ku5zo6fGug4zFWksuUS1bBoUW1sZUBboanYac+bfuHk09PmYO\n0LI96Se+gzawnbD6JEMV4BYd7c5YQynMQn2ySzH2KQbN1U4C40oC4ROeeq/i\nrHCleQL/5UCjZOJvsnMuQMhzSXwkSrWdSXPwnLTFezD8XKrm0D/JALotwEnG\nyL7fuuyz1gbMSarriVxkR/jPqpagVFS4Si+qeMfbvBgG1X3XXSxg3r0LY2uw\n4Pbc\r\n=l00c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGrzrlDyXrJo3R8nA3YkqvgjGmeurE/d6DqTN3iqct0QIgTuckT+HgoekBEtGSo2bqawB3rVQSVc09Mu9amAgZrss="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0_1644784448289_0.897748493098629"},"_hasShrinkwrap":false},"1.82.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c8a06e2fd6a3079488a3eff12eb56dbe85a61785","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-qvYV8OGqS5sDSuQZkkvgMNBodOO1QVMgc8yC2u6qj1ImYVEopGBqi1al+1GDrvh1ry3iIYagyAlH9ekG91CesA==","shasum":"097cd919912dce38540ebce20a392c751fe54951","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0.tgz","fileCount":904,"unpackedSize":2463797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCYJOCRA9TVsSAnZWagAAj0AP/Ax06D8x9yNt1HHu1jlY\n29u6k0m1Qob24YWdKfCTrzfI/Vayf/mVXeVrxp/MvIbwrqy68GD4UbQTaZnq\noUhB516pYYukhKzEZlP/NTENJu5ass8/PBtQvzPalvgTUdLNS/nqKzBUVZt2\ng/gmuDVjh5UoCuErivIGit1Colo0zP7qCRq9/lXqaP0QGw66Jz9gl2hzcSrl\ny9ZkVTdfXwcpOaZrIkhjeESSiyIK5RonGy4WcvlLxpvxQ4I+GYCsOVNrxj46\nrIRi1iClmLfKlNfczAoaTL4CSgNZUBOjXGfEKCikJWGeAdFTDS0VDE8Kdsza\ntJ3uyC77wloVsKyuISkFWAEWeyBQhLALxO0YsAgEB8ig/J24A5vJ28SuCnjQ\nF4AJ6KeIz88dLR5oYd3tdCYZcgHxzO89mW1DZ+1DMIYNZpfIeJQIkwNt0jUQ\nSvfLdd9kGs0NGhl9sAqFCaTN77v9Qgze8qEgceGOsaH4FnpNZ6QhyyKZl7w5\naDoPE1bVM3r9OT3C+nogkqJDFG+7Id1sTh1W+0Qz57sUFF7//8bQQ6PvFbKb\n6avJfHTHRmFKHMde7AocAdZrCDwZu3aWp7T8+KVgYlQ0YFdqiibmF0a+VRkO\n3QXR3ntTs2EOZfewJHD4R0wf0suB4oEH9i3s0ZR7lEARXzA5axQuD4j4tyF7\nmsNE\r\n=DkYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOfagDcAW5lhxeZ0Nxz0Y/UhxINRI0vVehFWBypncKnAiBwpdwFlZj03kdJcf/ppLvqNu4ws4MKegpkHJfI8g8fyg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0_1644790350710_0.9939442232210669"},"_hasShrinkwrap":false},"1.81.2-canary.1085.20b0098f2f594e61c6933dd9e3abef1a4d9886be.0":{"name":"@sberdevices/plasma-ui","version":"1.81.2-canary.1085.20b0098f2f594e61c6933dd9e3abef1a4d9886be.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.3-canary.1085.20b0098f2f594e61c6933dd9e3abef1a4d9886be.0","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"20b0098f2f594e61c6933dd9e3abef1a4d9886be","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.2-canary.1085.20b0098f2f594e61c6933dd9e3abef1a4d9886be.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-rf+Ppp6QD3ZKho1AacZDo9P+r5BIwaetyrXeKjMnQNPhB8ywP5mjLA2+tQgNhgPpSMcW4V1DHw+vlfTF+iSYvg==","shasum":"50c0ebaf76e8d89db2036a440d00117db2e31ca1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.2-canary.1085.20b0098f2f594e61c6933dd9e3abef1a4d9886be.0.tgz","fileCount":904,"unpackedSize":2463687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCj4BCRA9TVsSAnZWagAA9SMP/AqQMBCxmXbesnMkin1f\nx598OO4y51+7EW7pRfQFfAnOOboyyDwK62sDhSwrfdQ2Ey3odMaZsGSv0Qhr\n2Aovu5irMVF4TBnzmBFFya9gVEzjf3Qmhvf4SMTBL0gcJEi3razoQD8QioAi\nuBzO+ne0YrwNTxyj+et6RBewi4z10PObAJzhRy9xSjm6KVLmjP1TH3N2mmy4\np8aeUbThFL4q94/NycbuSoxXVtw3ID9cq+b1uml2WKybbbcs1eHsqWMb6WKm\nZkFhD9xFNjnvRnL6UmhT2N1HtiyMXaLCgks06QwUjkiZdRUWZzBUVBN7VN/a\njYzvpDRSIu8pUDXVHz4iQRtUqc6yPRLMJdjPEAAJf7ZFe6vrV1krVZWN3+la\nVLmx6nJQgehn+mGybmfVnsjUXF913zf2tnXCtN6M3M9sffq2Q/Pn0Z5LYkKK\nctOyv2GpJLkXE8ut1+c36w1FpfN87TBC7jciD/PlKXY+/79XYh4HjG3i6Ksr\nKyOQHG5yhnNGMBi/NEcipkKACTPa143IKXCrpb0wzPfEUdePLcMaFZ+U5Qmi\nXQjLxwMhWtt9EwQq0vwL6umUun+N0wXA5kcgm3q7R7+HcJ1NiZ1pXcUGF0+Y\nYou1qwllzifeNC5HHkmG59zH4cnDZ58uU0Wu8OvW0sN2Kk9oYFdD/H1Owsi4\nxL9Q\r\n=A1wa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNQWuMmevW5NMq+lrqdoWXk1AFAZDig5AuKTurpTqfoAiAQac/ydK4vH8qX4OdhF669nf0PH+rFFzZ/B5nAs5VMEw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.2-canary.1085.20b0098f2f594e61c6933dd9e3abef1a4d9886be.0_1644838401522_0.9703618701601917"},"_hasShrinkwrap":false},"1.81.2":{"name":"@sberdevices/plasma-ui","version":"1.81.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.3","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0c1e54dd669dbb30050589f5841e29f18812d25b","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.2","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-6ynb3TB8rmwKP7rZMLkaFFhnyJlW1CO4zwEoe5lNK+mhLdRP3SFy5DAHwODg5RB7YpkTPcKeFHDmUOX0PBFLIQ==","shasum":"9ea5886f8af23d9a6e8a97db2279466c93976d96","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.2.tgz","fileCount":904,"unpackedSize":2463577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCkj6CRA9TVsSAnZWagAAZIkP/j3atwASWpGnMNEqrqPe\ntca96k69zX7VGUbg4mv8a4i5ndCzY8qxIBaC5BiPJXUctuzUllDORFyigz7J\nVoBsQ5dW/8FXKnHF/EYKLllVQ1DUj1Ymzc5CT8OA/MA4RGg8cGpCgWCeNAoI\ntIcOPIYmE/D4yoDDU0H6TQTEP/PCEOINiGj+BIPEiJVMY/pKGiDualAGAw9f\nm/js7j8Os3eK+OB3DN49GfhNgZ0MnaMM3x1JVVxcsW1VedoQ8/BNx0EStHNf\nOHHiLB1sSZg4/aPT4BB8TqmdHAVMRjHoQPFoQRphBq8cHUIhJlWGHgQl3/WB\nNCfHB1lnXzMmlJejPQCzX24pwbJjt4dPdl5jaCtD9QccY1JLIBwLGpLL5RfS\n6fKpTsPSyr6X4XM5L7dQX9ToCyxofezd4xB/VyWFMOdQwnBVaSODn4DOhCx4\nBZFN7HZz92SVQmcbSAAeM0zRG/EH0bOz/T6Fgn+GrQcsfCWRbk5b8ntZuXkx\noH3bgfKZJPIGNcsIEKsGdkojGDsKohl8+3MA7ALqnXhJ1TWPOGmQpWyl/RQs\nm/K/EoRh12yj6voQbBYJMS9wBmvwPHm5p9aZ9q1RC/Jg0K4nQ2n7XAkyt3/Y\n6xVXEBRhCWOJ4RMHgFNVnOeraMcKal6gD2Qusx5nSLhA3SdKyb2mVOxs6PAh\npwBC\r\n=23O0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj7K09zV/UFjPgAbTxGmEuz1Dq70VtkfoAVEnqkw6cTQIhAIYc2EhxhudwFzG6f6bUnA4phDuRzbAyN/Mi0OyG2rNJ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.2_1644841210739_0.43863369292043664"},"_hasShrinkwrap":false},"1.82.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","@sberdevices/plasma-icons":"1.68.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","@sberdevices/plasma-tokens":"1.16.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4a331a48c8b8d18094185b00a4357697737f37d0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-CPautGlu+VjazvhGMwJTEupggYJBYNUqrMwToMfdfWvGTH9K8oskHtOSnsnsAJoZ0l1Y2VXu86Ls0O9sysGs0A==","shasum":"dcad7a27ec18c6f7695ac7914b053f75a0cc34b7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0.tgz","fileCount":904,"unpackedSize":2465369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiClM9CRA9TVsSAnZWagAAnZwP/36XJLXMc9GlM8t3ei6P\nE0XOTzvG7zD6JLlwYR/0tAoT5wPs+ScpaR/mFqKnHWk7+6sEG0bpTr7chJQb\ntmAbIosMsu+/3U78fBUApsiZWlb82nMt/d3RGYVbNFs1eQf4SktHqPpqZ9dB\nA1wbnpwhcluN0ieDwmp8YUQqNN1g/VpSVQhr+yliFxXhg7N9nnoZIfJL9Um9\nP5dCIBw6oB34wv/Al3N5jvHHgDEnylEH9Pi4YJfb2mfqVGOwFXMiIWs3jOTz\nmrf0MhAFZ6hs7YPpcbmwo96o015ojMdVQ7DAsxEJkg8oBrSOdHN5dA4sYCQK\nysIcAy67wrM3oJAhjWtVOWlxfsynZFU6eEDjcNyDU9FHd8dsCPka0ycS9o/3\nxw0eL3juO80kdigVXYokvbz5ILDtvWd4bZk4Xb1rD6E3lW6tHCH0oDzpyBmI\n7JCeZYpdz9xslU4YWXbteHlW9eekR0eU8fY32TUzc4zhQT78Pohlj+kHUY4V\nNPkLt8lnBvyHW70iG8XDoA768bx2GlqNhgXD2dI0gEcociTz1W32hVMD7ge8\nb4BCS6jMUpWgwdUQGKgLLIQ7mpuLwAizesSUISfBzO/3OMBmnWxo4e1kLrwH\nLks4HIExcqiaLDLOwLxwSk2FXbhJ2opj3hDlXKIsYlyZ8biEjKnrf4xMkNVy\nJPQp\r\n=+0wT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8ZL/Fc9vXm/0rD4xyQgK2YqJWq5JXIfvVKWJrW2cEhAiEAyHwREsZ+IaYxhWww5owKM22adWNFF79i8qr8Zc2GneA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0_1644843837566_0.8963949102590243"},"_hasShrinkwrap":false},"1.81.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0":{"name":"@sberdevices/plasma-ui","version":"1.81.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.4-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0","@sberdevices/plasma-sb-utils":"0.48.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1393ac6f64d4af31f1546ad9375f672208b4dee6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-qqskIZ+t/pZv85UDnm9qTAswToIKX6Vu/LlU/mJ+Rir3Ge4PJJcJLyOHikAUSJWem12X6PMQUElUmnWCRIlXDA==","shasum":"279ebb1d0ad98996bb831a8147fc7bd1f4a23a72","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0.tgz","fileCount":904,"unpackedSize":2466820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCrwpCRA9TVsSAnZWagAAOJgQAJR7JN0htaCTCRy7YZgn\n+9q9Gv6Hc8HIzkmqSst476faLbmfkpYiX3TtWm4CcKxTwYjsdz0bshk6zVA7\n/ervoYsGXioRLhhzFGF+iyOFJ140080XFNpC6PYm2Vm8vLcKYQj/1wtELx7e\nxivt+SCx8r2PWEH0yLCOWU8BINOGZYthxJi59gFvHjEazDkaBvVRHDDz3hMS\nAMolIzKSgi9JTindQNNZckrrDPkrH/Mx2kg8n3/W6csBRaI9rKqwFtvWaZM1\nZ2kNotw3Ekq3hSmHMw59GpHsF1z/bJQiiuOUKrWyqYUvJfoSSQysNGN5uBqv\npsHOw5biGG3u21zHpqLo20+piSkACG8SY9zjkzcUd1Zz5+BjkQnJQd/q4Vey\nCSz1v8gZS9JYOujLF5V1FRfKbDJGV082zG3w/F1kercN5OZN/4TRMbqXq8Zt\nR7alcGnDwmbH3ZuN7EU3LIICySqd5+qww4o+SWzBWqAtpc0GcDw83Q4qjHro\nNnW7dG67FiXTVahWhl936WqmndaVlpEiwGG1vKVeHM2BJ0wRM3TsDrKRaxQT\nVIUTk+DgEhprb/Klki3D/0WggJr167/JJkv9dLFRzdBy8ZeYpKl1Qg8u1zl8\nRSO4wCFGfTsB62mkULFtvmaiVv7ruhHEEZZGTw8Exgs2wZkkQWozWmbi+ksg\nBcIS\r\n=ee4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVriGRy/wlBJ07JWZyHX3KxgorX1AtzxCC5ZP5ii1oAAiEAwBcCrZ8d8mokWtGqv9CETS1hzg4nYSQtRFNRc398yRw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0_1644870696813_0.19969608832876018"},"_hasShrinkwrap":false},"1.82.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","@sberdevices/plasma-icons":"1.68.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","@sberdevices/plasma-tokens":"1.16.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-mHK2CsE6aF+JO6fZMtURjH7jTqnpbe78IF+GTvk6j/LSOD/vgErOHDcNawyvrtf0XlWOmV6GV1etLY5MpLbgqw==","shasum":"7c0208fdc1bf4c3cf863fec591a0848f38dc473e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0.tgz","fileCount":904,"unpackedSize":2465369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC6yOCRA9TVsSAnZWagAAJAAP/izyiHv9XNkEIaby37f3\nyufGi7eXk3TiZEIhPeVTRrFeqSjNVSy284ZehwFYP4Oab8y2phtpwjMZAAXM\n6B450nyprJYRL+ktnXAQm5ejllBxupybBaclie0jjrhxDrZW8uUmNx9xCaLo\njhlA1JiG8K5KZwPdQqL1rHUlS4suiC7tii2gv3vF0LBD9Igay7SJzCrWe3Bk\n8NaSKmZlz8r3mJyS+pRC/nflzm3Mqs+XluAVRELX3fySpCdle9XeE0DiY1eu\nh+Jny8+75kBXxHV/vplYhz7XM4w8mpz4+xJp3Tx7sb7mB8qPkb3S1vup1c2V\nBHDQrXePkzIOBhV9Gf1y6+eIG9wpYQFfwigBDneukjPZNnllCd5jiCmyOC97\n350fyQdGftKkbUN80BNGA2VQgTLOqG5s6NljL8BTpek6vwQ6SJ7Ex2LDUblF\nWZsH8jzpbYSSvM4LILMA9s95bwohplqEeDmfOFfA3Tz0T7yK5ivjAQk6dmWb\nLGWecDRnlEq8tJwS1pST+qDB6s0LaKkLMqYvHp0boM4ugGXhC8KPpgHGRi3Z\n/eSX9XD/M9G3xA+HzHkSBceO0xpe3LpfuOLtrya82G6CMKUryOEtRU4kCJHD\nybxfta54AtzLgo5x3uLdWNs7Sm9dCjD+5ft/22jUvOeynitNa2NiJar4U29j\nPUfV\r\n=Drp6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBumq6YPZvJR/Hhkd4XQt1PeOCeiVuLMqtKzpVkCJB/dAiEAmd5KSImdKb5ichyYVsVPBjMCNnL5Kesslb+0RiAnnH4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0_1644932238244_0.153823958796522"},"_hasShrinkwrap":false},"1.82.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b24fb97a407ed9c5b514cc611ad30e59cb59cfa1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-kM5x6lkPBkBe/pJdJX7BBm9fCPxE+Cq9zLpJ+voplQ94ySuaBTuRTZWWOJcjEU4I8Buzbpj2XYHrlIuNI8SZXw==","shasum":"b7c0e6fef1fc4839df60039d54e1f8ff53064598","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0.tgz","fileCount":904,"unpackedSize":2468452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC8dDCRA9TVsSAnZWagAAp3cP+wZ5PmHcVI8MuOLScEUG\nyrU1YSauaha6mUborrxqtjuvb0hkYeLDTCnEHG+heqWjzTL527Z3ZhgQ3wHJ\nykE531QP9d11DATQc+P0fSBhKjEuXM78yGeS09nT9ExpRpDYf2xAO8QID9RZ\n8c+X8aVJcsc5jWr/QIoba0rWuHhLeshlsywVTI2ZljHRveAlQIwQm3mIzL4p\nvxQKmsCSkbWDj1aB5Er5+bD3vK+hDQoWqKt6I01FlQssyHSmzej6XIoXfi+t\nwzQBQVHITeMPktI8Sea12PpsBa/gLBbdeRPLwSwD+vk48FdE7W8y/yHY4LCd\nu4/sCwLCf8rV19kUp3m/Gm/QOU5DWVFvHoVvClKGAyC65nT4QeY8Td/YoYFY\no93WXieVk8IU/5AMZdB8s7BANaSY2sihYo8lZnYT0lrNSP2eBK4AOJpVXdku\nNJLRQ1WhJTeif8qOdH0MFgwAVHWYbrxslrfujBuFaZi6WcJMTMBmkBT1gBAR\nTC1V3nGauXWeZxTgNlPn8m+cCsdmnAjAlbf83ceAh6cxjpeVjMEq5ntOj2HV\n9b/cc7fec9TV6/v4lbm/MCuLpu17puWcXDKITeUllKaYVkipQjcsDio09OmO\n6FTj3muuyeW6jKIUz5ujr9NTCEbFEFourv/dhiif0h5SK2QeNO0duOlpM06V\nsNKP\r\n=7mAE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqt+ujW04gbsPfUjZmqYQmH7NRtqvIai8F9aDidYDT4QIgdBRNLE2Txi+nDvD2B3mUg7jsHL2XrtH9yQAVO+e59io="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0_1644939075604_0.9613546093108627"},"_hasShrinkwrap":false},"1.81.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0":{"name":"@sberdevices/plasma-ui","version":"1.81.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.4-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0","@sberdevices/plasma-sb-utils":"0.48.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf36af0364e6e34cc381c44b793a2b2c3e14bb41","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-oe1jsAF1Zhkgd28LCOka5TEpFxzUNjGFrbdU1ziA+pXl1DW9uY3WuErT9Ko+Ka8389qWWkhzWTpKu/S+i7l+cw==","shasum":"d7443a0ac78d86b0d4b2568e9998b61d0bb7efa1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0.tgz","fileCount":904,"unpackedSize":2466820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC8xtCRA9TVsSAnZWagAA5BMP/R/EF6kqXGtcEHawNRuM\n5YoRs8MtBfmkvINXwI9xVyBzhUcJQKGjCbX2xITjJQ3oqXZBvSVb9I84EYPE\nIOkc5exZ3KI2C0oXhnYUtIkamx0khUZYFecVj1bqMDF7oD7NdqIvyV8aKDM1\nmrTFmVh7pBLGilTQHi3562VRPqnCLosNo0vJqQfKF2iZTbUfqvjc/qdlxO6q\n4MSwNOGoip4vRrq6KTlb42W7wrI5sNxuWUgbfP7m7YiFVS+EzYxmIkPoqjg5\nlV7nm+ib/kxhW4RPkdXeGhK/+XiC1gJOofaz/lFeaHcyhY/+2Mdo/2hx0G7m\n5MsCH7tb1A6WM2HGmDa/3aWeY1qYkXGPhs2/2PVTqBKGThLLibGMpq+tJ4Es\ntlI4NuBQkpmd6ck9VKeBuTI+pPGo7P8ERT7DtjRdrZope6VNiz86sDTiQsU0\nXyJGWxEJ8TvXoycKMXLTI3D9Q5Qc5YsxKvkhlq5aU7dv+2ZPmVRLQ8VasLaF\nK1ZnDSeI7k63DF1y8lVXJERBSoApjM0E7yc1jfwD8BDkHObnz5pVEhMiQE8k\nZlGolf3kdXs1rOhWEsguZvVwyWz6sq0TGHbt7PO/2/9iRvC41BNMZcJjbcwB\nLqcO0gqRW1uJmAlWVeWM2LVpqacLRJeLQp9hFekALUXP2TZcBIlqcAblJsov\nuHky\r\n=lfxU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVvGKq9wVUAYZrORIT6ITDIobdwihEbGbZhmfd84HXCAIgE3R1cPkgV/kkA/auIwwRMgPXxW+KylXir/+gVKy0R7k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0_1644940397415_0.6219863663971408"},"_hasShrinkwrap":false},"1.82.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d3b68adbf2b025f785e4efa812cac0bdc8c95253","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-LBWLUCiLRVrLtYgwPA5qiocWSpj7YiG90Rvhj76b+7FN9PGkCqVIytwui0h0gXamK6HJjUKeJI5JO3KrPsxsyw==","shasum":"01bb3abeec2eeb8c0f7524787c1be59b11c96670","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0.tgz","fileCount":904,"unpackedSize":2463797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDBScCRA9TVsSAnZWagAAlUkP/3CnWKJ9AZd870nIsw7g\n3+ofUiPNyuDz9lc5/jWc95NEkBhChUC+JF1gOuKUPk9kO1qXxcCf/+0/ysNm\n3vyuqsKqUuenXvjsbFU72afrxkJxoFzwzzpcfem1IU8qEEF4Yku4OFXCZFb7\nXVNZcj8YKieIU4Rb/lMaWcFoFow7g5itPquyX1wd0BfZQcZs8wcINiRAJrJe\nw1D1c43Nmq/jGiJMMHPWPplXisl44xzMbMlBOFjAkR+I0KVZ2bGRhhLj6R0s\n/bJEnf5aU1kGhxjH19iNOjDjH+j1wO5YmLv9HkK4o+lGWu3BkXdDhvff9+ny\nkullEslzl0PkUSOTucfPzMDXikHFBnaAlnRCaQKyws7eIAhBlZ+WysL4VKJy\n+1L7nVs1s1MoKhUZ+hXx2VTvodGwk0n6mtxDST4AX/Tt42zywx3nmN1aTR6n\njpdP3k78LTW5N0qMDrAKuTHxtpmwaqmAf2xJV49SxW0yak2uMjxiUZtyXElR\nFJTWHu1dRGPQ84WG4l/m3oUGsKo21ixYktKDqDAxdWimUdtdVJOT/65hwH0X\nHWjhERd92lXgQSurbWxc6vZEisj2ZHyOcATIGfNtkHdvA8paYhkdj7bPpD10\nPpRU3NB10Hw58zcNwRLSXcYXHWML7m7n+vgKEacUlIT0l+tZCX06pgnrDql5\n0HFi\r\n=qLpW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDE5fKJLxCzQGL8Vr+zE2Ri/6lWzVnJC+na4MgnANLzwIgOXRhAWLDJG3GbX76pk9QwDtHsZRF7GrAcaRv5C33h0A="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0_1644958876350_0.35981381487982533"},"_hasShrinkwrap":false},"1.82.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9e7a3a99a3bbeab92e861b4c52de500d11b87a31","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-GereRIuqbxcZUxVQ1Z1ZSWSBZsUOvlwUIGJGNn+3nJZmPKB+5nLEUrILUl2f/5wOkVqGG4ACmwITxJ3LkwHoXQ==","shasum":"e0d0ce9ef1428bf5eeb84b303d8a726844565c07","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0.tgz","fileCount":904,"unpackedSize":2463797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDCLZCRA9TVsSAnZWagAAGCoQAIl5k6nc6wA9AdytFIE7\nIgr5R21b1Togx99ym/y10PQT2rJMsac0cUYfp1GBfd+60qCEpjnulwww8l/c\nIkCKWc4QRqPOnbDPdcNiCYUYBjFqs9dCJFhImvS+60KDCGWKrbR2lSdZkpBb\nFsDwcGLCyRijcFlXcrqlfoj9dMt3KwFemaMzXu9Skb8B+U8+aBlA/Y3sEE45\npAIYA7htk3dk2T9RYhERozO3Za+DS2sWpELAI96F8oUDKTiRCsDVSg2jP4H7\njSF5ZS22S9eSuDSzqBURzGi5ouedw/TOM8FnHJ8AjuXVHj/kBa4gMYtY2br9\nEva5iPhUoIUf1Vu+0uRiZHueAHyb9GFMVsiEt/SNklrBAtLHdQT/38FWtqCL\nQQM63ADv0TXZh/TROc+138ohfQvOVMO645ErBBP8WrBrnTaC+kj4Eq4PQDwk\nM2Zms7KcYlgURA+l5yYqVJ57XcqiUUJmBxszPZlK8E+xzIcY2IW4MrdpEQHH\nCz/QW3oMx2lAKmdAbGycNXZ3mqWs44+EdxcmyClABBMnzQYE86U7JkAI/jbI\nvqOPDqBrLRrWa0eQjXMxEj+lzyxM2GLPx8Mnc51aekDUngkknr6tv+eythm6\ncbl1TNAxLVpOBo6wM+hHwPfRd7iXMIb4DU7TNllhQL2H1lVbxOGJ3d6+ysXA\n4zlr\r\n=3mxT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB+vDsb8BklLq8PewSlgdkcIfNHiC/+j0i1q1+gfC2HgIgWuxUc5Hi7MuuYweYg6OpgN/pAuv8XwphjK7pXuLDMCI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0_1644962521736_0.829933177549254"},"_hasShrinkwrap":false},"1.82.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2e848876cfadd3dbd267a463cf2735b34a1061a9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-MwH0Cl6mTEi5BswL5s285TROd+UzjolZ4cnH0bUTI6Qr9vUk9w8+IRoAX6UWuVbe7bNFfSS4+2vDpHl2rDOE5Q==","shasum":"8508765302b044f4823ab8b97aa023959e370ff5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0.tgz","fileCount":904,"unpackedSize":2463797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDCMJCRA9TVsSAnZWagAADksP/3y0aCXbCbfDMTTkpxcc\nvTtrRDxbKrSP8j6dWjtyP1f/BiktHMrrWSgrm+z7fDRquCThbACb7M6Kyc+p\nt43XCBtGacuwdFj9YNwsLtylcKpiQbzVwdvPfsvN3u7f1CC0Gts0X03dUOhN\nKIqSuvC0VUxI/IFbsgSRGnfvDzMYBjNAQFGlGB+Qi6YD4ayBVHDqf3G5MIyJ\nkf9K8ZMCAtEp2P3EFYosJbDc46DSvnTUtrT1Hjx56g5iCbMFsSJzHeUA6qa1\nFZMXVpDCzHG4FLbkSEPEQ5uWkpUhoa6/IDHqwiHAU/0Gqeg3OlvUjgCn6BRO\nrhNlmhNXpRReTQh3usWZEafvKOZzX7yS2GzO16v4CH7iJoiefcwbjqIGhKv9\n2OSYRAzJOh0qexcJVFl5LmSij+O6vmjuLrwT0zr2aUhMM5acQYdsfEATyf+c\nX+SZ/K2/TIiC9bDC7XPekrqO22lDkIlbkj37USloQjB/iqH7OV9op4/VRtmo\nef5TY7rv3o364fGt1szR+bLy0t37MxHMNaNcxnx881mgzAh/hl77SAB8E9G5\n+gLOz3F0P9hx8OEM1SPqJLgEmrmHBoa49DQxdnp8gZ9AVD2khy5/x64fTT3D\nB/9DJfaJYVWBB6bZ1MJrhXMkuMO0Vbyjc4wI9GRFiR++OtLvVifkIOgwptO8\ncuws\r\n=BSsN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRAqmlyvwJaUBoilZzsEvKl/ihJczdnD56Bj7O6N3dnAiAy9gAolvH+vE9PflgkU+UOYh6Z159vfR9cOrsM3RRpWg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0_1644962568930_0.5939201657821893"},"_hasShrinkwrap":false},"1.82.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","@sberdevices/plasma-icons":"1.68.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","@sberdevices/plasma-tokens":"1.16.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"22081c10e97d43462671865d3b7d8ed77d9b005f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-7Z4oJTave8VFxlUrf0oKlxggyDwJ5vUg0kIOvbgkUrALcahYp59hdbWnZO8p0xVYwNiiQSvxKU9WA52ojax0lA==","shasum":"ecd68658c02b603a6d1f3ed9a7e2bb4672467493","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0.tgz","fileCount":904,"unpackedSize":2463907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDJPRCRA9TVsSAnZWagAAcMMP/0kqtwUOAKHxIAugaJJD\nH8Wjc+uYuLhfzL0laRP5y1XVoCtqoZ1cSdB5CdsuUdSJdbj6nj3HguwlOUWn\nC+1Sw6tQ5mMaUqv7oT77CTnu0ole0G5cSPX61khOyYqXajfN2Jmkssfq1DnL\nvb5D/epdukrm1//EjRImEpiOyEe2gCCqYQnZoGOM1eeyCsnbITNeoRWYfsTs\nESTi/wgIXWDqGzHNBeqQJwMGLyIQvsxm0QKDAwp1e/JxcCmFU8+wkaMdUhhx\n0YEvkVlGsHyu/nlg7T41ESh1OCqy1oTUPS5NncEdOa/vfg80bVlXHRqc1jtL\nP96IwjZoKRC+4hjf7Ar0nP6ZfV6sSSHoxBmqh/FRIZI5chuppAhzjFcS+G4+\nvN4TYmkJoUXKpIA+pPr3Fkh3kfdwqfwikMXwiA79mGhIXtu4Bpp6IY5BCqI+\nm2OYHNgH88M+ERxSjgVCyLYPPruPoChGgueFs41NvBTS3v6icsEvTAiEu6V0\nDaNoIj19AFyZbi8ODgSVorc/boHMG8SsFQM0l7FP+Q2oHIE/W1WUjkLnPJ2T\n8zHYaD7e4ZRuJxmUUNIdkLc0yIKgagazggn4WhyZEJbIOuvMQEqjeF1qoSNi\nVEW9b1xFOIGuEQMXwxT5qo0O22vbpxvyGHwuQDDRGizdHm/kCEF447Or4tnt\njx1W\r\n=TGNa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGa+dyZRZTuErett0GNlpY5CYcqFzCJFRb53C2j0xz0RAiEA+LticqRygi8uEepw/ELO29v+A5INpyPRjGdLrzufIb4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0_1644991441654_0.4606525967035686"},"_hasShrinkwrap":false},"1.82.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ae01919f2c4a45e839db0c97ceed24941bc694fa","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-AVI/cTax9ONE6RdI101+huBbQC7s/RruEs3oXCPX7HC2rHW+HIHPt8yzwHNXWMTrNj0MGAjG1BlR1gVg0+d/4Q==","shasum":"572ebb24e0763cb16bbf589a2455d0ea76e6012f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0.tgz","fileCount":904,"unpackedSize":2463797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDJVSCRA9TVsSAnZWagAARAcP/jE0tmtrAamgDHeLbs0b\n6DsLLH5Y4q4dw2pu5cN3axkpug/3uMmM5Ujk6xC5f4wATpCY7MqeujYVqDTK\nybVGX1ngfP7Z/7pt9kxQkiFLTvaY8ISQ6ymts2ot5Zzt9gcoijIRw2c5E/rO\ncnkxUOer8USKMviZWUDCxvUO8qgVMK14YoO+sCBkOYSS+ovEC+2XHG8U+P7E\nJKQuXJYPlcSxaI5v3/A7JebLZWm1AxMCJiNOuHacUEV0pccCvx+cJUlKbq82\nds05cB1W9tZ7mAnRpYwc2OQqrjcUlII1PK8urkUTUCDNrOFFeXWQyNre2bHo\n3N+V4RY4xDFCLStNV01KHrdLoRfgTdPO00Ezw0Ukcw/Zs2kH2Zf68klcrCmX\nmdUigq0/Yop1CFI5BwbYLxVH5SdZbxWNTw4DBxjON+iFJ6PIrtOcx1eMWwDO\nF+/yd92C3qLRXFz7lnhSAqSuiJwXQAuBN0dOKrzcyAp9kU1z1nDASNw9o109\nwpsCjpDBO4Q1xvIEVKqmlml7zcuz26bK6CbtcH/EDtA7Ls3gjilFkTZ19pJ9\n753EYRjNrTAoTSxGHLPwzW4GtS35htA7nFPhwu7GG6s3qksFTVMg23/9uDFl\naZTgrDae31f46cfIZ3e4ZJ8k99UA2iFZEKJ3wDxi8eQQ9J9Br3ESN8/7UiKi\nBUnk\r\n=90hQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYqX+PH0HnuiO+Adn7WOhf1BCGrsh0kZT31BIfsyw4YAiAEEO6ZKeQPtODOM5a6Jic/vovSPL1fQH/Qx5TqmaRIoA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0_1644991826162_0.7025408726780527"},"_hasShrinkwrap":false},"1.82.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","@sberdevices/plasma-icons":"1.68.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","@sberdevices/plasma-tokens":"1.16.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-kd9W4+CQlhBIDSvEQ+UomVkTgw/RKNSGMVOHOmT2f0Ck14V5/4gEEyre0f8noiy89eE6fU9r6WN5aK97r6sjHw==","shasum":"a4a7d5f2da3d030a48a68f6ffe6a64ca5294218e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0.tgz","fileCount":904,"unpackedSize":2463907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDJdYCRA9TVsSAnZWagAAht4P/0ni6hs2HF7QmTQEGP6t\nFvoG7CGNJ+dgT7GoX8Dso+1IC2Hm1r71eziYKsKp77tjYc2Hv5GNQxolu90Q\ns1fVuk+Z/5sg4ucPsL/deyr9u4D42eHFnBhFsUT/TaxqnK6msSzpjXrDYH0e\nyIX2y1R4kJWrCu4qAWcnFVHWra87T+fiTV26GEmxQBOIz8wiYZAyb2Hs5/6C\nOILaKWhOKhE/7nIebhBKf+P1T0PB01vaOcIVZxDNW1Dpj087KbcCzbxNzDb8\nkuQbBytN+Wf6qjB1xol01PEBTE9GtQgmZPySayxScYybFt0k+splRC0CRo+j\nZwWdAIk6Z5IxWIg3zkzVYC//vVPH6w/t2pNnD3BgdaN4O3+ta8MDrkWc3UFh\n9VDh1uu7Eg4PnNAHVyxz/8KHdYA+If6XyOlv6ZNHpi8CgkVTDFI19DCrKZ1T\nIBNR/gMRGPlF0CBkpsFdYvewHHmsCGswyo3FsQUTVjpe1S4bLhC2CrQtBt5A\nNoXzcpOb38daB8S2febZpsY65ZHYw7TtOzeMJ+f7uZJYP6/FUMLPVWll2k46\nXV7QAQcG1uvhqAzRRZFbn1A2uDkc5TdxnU6LHaqBooCk/OI12U6YIYEJC+Nl\naNrC1dmDCOvWsT683fwX0CL02WWLmLxAblS2jpRn528cLtAib8IK/TZV3GVD\nwfsz\r\n=nEIr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCvcb2tJ9sa62g4y3OVgYtG20cSFt7wtmTIRxhjA7PEAiAN1WtxkjAOq+RXpHuH7dK62+giVYcP7slTplHWctRpkw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0_1644992344334_0.7022698261577376"},"_hasShrinkwrap":false},"1.82.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"757c0363f1b23cc6f66c497474ba540e3afee84f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-nZV/kMVlItawovotFBGr0JQpbeVom96IQt9KnbEp0dwTzodu8X8UhvZZGi+/Yw0L9wnj8MI3sBw7uy8TaSA0Rw==","shasum":"d5ff00f95ebb896cf7b4e8fb2a43e927f48acac8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0.tgz","fileCount":904,"unpackedSize":2463797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDJkdCRA9TVsSAnZWagAA5OwP/0NQD+ZBGGRf999ZFu3E\nZU/9EMwqZDTZmNpfRk/us1CQNrQPFg38jxcV5uWgdB1Y6tMbOg9nyFhQsmNt\nLS9znMr4bF4XyzJ2F+j7lO/IV2eF8bXI7QA+eDcRM9DeWcCooCfasKZofx4M\n32VKAw4PaNnXPC/KDTU5ddMt6YJnikEQAIDcnd6lofgU37bAH66IDDc3YMQv\niMZvNVDy5h6wD0c8hla3o7RxVC1dyuPzn3jF0TFRTn3hEASZf1XvAjEbnkM6\ndRDGUMkIENflsoqhxOo+BNNJzY53ADbMZ4PKwP+ZZNBk/GW+1pTwkbGK78yh\n4CDQhw2noLsv395diXrVKOoMAOpmyHQk9XlvtEZoVLIyWZecg8X8pNs/du1Z\ntpTzMj0H5ECri2XvD35oeZc90Oyouscu1pwUjXwI3Z9vTXvl4be7SsGQBw4J\nuTFARC86Hffcyw8CipJ5boMIJAqzhzzjm+C1pHjckIfmCeH4b3jyYdwyGKJf\nD996zcmhldMMZ6soAbUihI6YZWoHo+faWbRRBvMcON+S7G3y5kEFoxcQhLJQ\nwdWa5wccwFm32daONAn1YZI6Q38Df8NRwtE8pJtIiVm9CW9akNW8B8IXGa6T\n5wQaAkM4EZX7epeoqfNJoRDTtPWyqaofSk59onIABUGHWCDJRv1hHptR76hV\nfOdF\r\n=cT+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdWuYnoMI9jDjgDHjdWwISbNABvQxMvGgM0BEuOVmbJAiABMAY1mvb14QhjpNlnCKj9iP1dWmn1lsv5H/QwlTH1ww=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0_1644992796850_0.9226607080271569"},"_hasShrinkwrap":false},"1.82.0-canary.1099.d3298899affe6498967ee8278527d23fbbe35f11.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1099.d3298899affe6498967ee8278527d23fbbe35f11.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.2","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.3","@sberdevices/plasma-sb-utils":"0.48.2","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch","typescript-coverage":"npx typescript-coverage-report || echo 'See artifacts'"},"typeCoverage":{"ignoreFiles":["src/**/*component-test.tsx","src/**/*stories.tsx"],"atLeast":100},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d3298899affe6498967ee8278527d23fbbe35f11","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1099.d3298899affe6498967ee8278527d23fbbe35f11.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-FQVcKodS3ckeJBj++KuJDVyq35gy4SRl7rB9Kw8az2wjtoxIBFi+eSIs0Kl8sbDgSJAds1Wkxslgz1hGT03IFQ==","shasum":"dad0aa201a2f8810be1d58569a712dc621f454ce","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1099.d3298899affe6498967ee8278527d23fbbe35f11.0.tgz","fileCount":904,"unpackedSize":2467164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDJ4XCRA9TVsSAnZWagAA0MEP/10vvyPp5LGKN4EHfzd3\nFXInpEs2k+IAgYRd0Xkrqdek2j3XHbxsE2tu0D7YvrSVGhoY0+wJJQFNf4wx\ntOveMVlxBJaNMLCumIr2sp1lXtHERCE9FH749KvFwe0FWTDIvIoayTVpOFK+\nviAn+NuGZ11quVidB7NjekdONTWHDsJgk6ZNCcMHoGI3kvOI55btdOpvPOvT\nVnD3mtr1xQf10ckJRU6d1+niwa1Xo0Hw55UT4fabNRx3BTXxR+QktNFFxLiM\nbbasBnf4qE3CDgLdttEXVbO4fTcY5gPWB/+TGL83wcfMcjV9AlzOHpzkTZLP\nHJqEB7WZIJLXWpj8A8KB5rNiYfE+dux3UC5LNb7p+pxtXau2jHeTgY7t8sUS\nu9OtR/J0yZDhLAxRcWvcXd6iGTJ+r3ne42NyJJB+BL38v7U9yCqPoXZOkHYL\n64VCN0GODvguuc7uEoRbg+Aa0H+3cDJbSoKRQvIcKkV0CrtD8NP4rSWc977R\ne8Nr5Y4LIyHsg3cpDWD2i9nG+/wrH3ayK1vZeszDRHfeXaYUFVIv6fErX/cS\n9HrpjG4V6iuf56vbXsKFPVrbHmtawYGMYd/qp3F53UTvFUoHEvolqnDNIBha\nQg1Ldq0YZZpuVXqbDxllKlE1uX+Wgh4aVj+0/DkoPyxEiLvlD7keWcM5RgWu\ne0jY\r\n=Pfva\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCceIerB5LiWND7nRsF8Q9kBe1kU8CfACQY65xFYZsyDwIhAIWYE+1YtqHKh+Gl3ncCELuD2j0kkUBeZ6xpx6MBt8/f"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1099.d3298899affe6498967ee8278527d23fbbe35f11.0_1644994071037_0.884203785268667"},"_hasShrinkwrap":false},"1.82.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0","@sberdevices/plasma-icons":"1.68.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"01b2164835eb5fbdb7145d17b584a19e8cbdccdb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-KnOqJ2ECEAlcW/DbiKK++/dbzogd+wanE+zSOKNg2qXcsb1pMLl5CN63KgCHvTNqGVH6pqVKpa8PunoqedqKOg==","shasum":"dc6d72147b5bbf6e4e6625279c51989eeb64f057","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0.tgz","fileCount":904,"unpackedSize":2463852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDKI5CRA9TVsSAnZWagAARVUP/2zXBQAhp6D3umSbywnk\nuQ+prvjAyEgXZ/pRuKdTDlaKV209OTu9uN0iXXAQYp5y6aAsH291vHvyI/KH\nr4ImaGq2Rm+PixdZxa69D8cP/XPV3BPmQgo/cLjmEj7X6h/hoFpEvJq9UxNX\na+Uu+cgPrPWCjlHfnL6WoQKWs4UyCmBj73sw/40J2TmvXykj+8E2l0uSQYf0\nn3omzimCj2kNGwS/Md7JhnkGu8c/zGX4w0FLxdwhu5iZmTW/pwSo3Wxa7tXj\n42Mf7ucTlWgXqqMtVbACLMF1EqTo4R1LuW/U4/abU322QS/nus1CN0lY5wLa\nRefG/crLK/Iel6wnCoe991QvRiA0n+cDSRQPi9Dj1vRCvvCN9AKcTWq/mRI/\nCZ4jtfjkRHJAlPlddC2f95pbudfvuUgKDhGW+jbH0HJ5ZjMvMCp3j7ucBdMk\nbVKa16nZOLJSs1DnORodc2MoS5+8rYvoy23/BuJZPswp+HTWaS7Uv7zCeVqT\negkW8FnNLFMGOPKt/wGdG8X9GSC+DcuOIfgYz4JfzubgwWEyGiiJm0bbJltD\nL6nHhBAI/8l7kYR4uJcZN2bSifCh3yUs3xBiQZhdgRHbmZ2TjVwBs1H16FZf\nqm1ju6Q8VSrZu4obh2pegruYm/2fM8ln8NHBka+DmojNjpKeIr00K7o119Nx\nKpOh\r\n=AxMJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEvcCojkS+7J7eEXt9pxDKx2FMXU+KDCC4pKFzFSYuYQIhAJ3zqf8Or+NMvprMfWRewXSP6fh40sD/a7VWU2/v/wrh"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0_1644995128748_0.998065590442325"},"_hasShrinkwrap":false},"1.82.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3d01923572447584ba32ea80ae37e8b45a445887","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-MAhbG1qC5aeAd2nmBEPUDGj5kFMyfCIpxJDy0tGfY2ev7O/z+c0e4ge5zP23t2HwAGitXo5UyGN+tkz1vm7mfQ==","shasum":"d58b6bba78d328d5c64ab41ec2f13cbb307dfd9c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0.tgz","fileCount":904,"unpackedSize":2468652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDKMACRA9TVsSAnZWagAArbEQAJzHA0wZAmyXayoXyNYD\nwqwwzWmyPIRdvX5OwX4z4jVPs+W3+uNIbyekvQdFKWBQ8tKSNnyE99RY1la9\naU70XoXVHF8RNUIKmNbVy27EapnYkbcmd55BwuLC0FILl+BOCGbliO7eGqdX\nHg9gYGUxHKp6d14hcCvJxsAwyN3Xp9WxkAoVpwU8gEqF7VbzN8E1ecX35bS6\naPTy4JYwTNPZLvXRY6/ugbYsvmHWP1SUSIxgjdttbFV0BLBWcqiohwWKbZUr\n09Fod+HBPrS4MP/z521T2XyWPMYouvzbJwlaxBSLotWIJC0LylzegoQa38Sj\nuqgN4nwgFx10TnOG8dsPv9jM1PdorvWEWJcd+1KFfAAPXiHLp2JeQh8MJc4r\nsfF/hVcWHVB3zFtO+0Ow/rHI60gTjyInm7O+8zWFss0h0HvrC0Yn6zYaJLP6\nHHa0elGGI5EYwLhqMI4GUS2NRLCYirefDWgUTLRcrbE6L2qxI0/NqO84r1SG\nlN4EYvJ1nK9TZouZwnji8+vGkXuFeKPkHzNkpxGIASZqtUy1v2nDQrz6o5Bh\nvG1sbuQYqR8u4ydGIXn4DxU0YJthREaUZ5+blN7s8Jf3y9MwfPjy/Dol7A5c\nHSzlR4G6NkCzaH91goSA/3KnUnUQdAJya45vfiIG3PDOCRqmS89wdTYq/a2m\nSER+\r\n=GN8s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUZJTL4apFtTREN9/LtpSWHg4NyB77wT6zXoA+LgaplAiA2uBdXf9VNibNbdXbKUEBYGco6UuheRPHJjy6m0bXR5A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0_1644995328507_0.19751639723109693"},"_hasShrinkwrap":false},"1.81.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0":{"name":"@sberdevices/plasma-ui","version":"1.81.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.4-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0","@sberdevices/plasma-sb-utils":"0.48.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"77458a775e128c85cba66f85d44bb7dc662c0f0f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-EhvtlbWlu1TRM1WLRCPnrosBmsqgLqj+f3qxocuZnpNPQ2qTJvNn7rCoRvC3jOWbPADkadqzqHLtGovAEIdjGQ==","shasum":"a340f9c8842753013f15525164871bd98583dd04","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0.tgz","fileCount":904,"unpackedSize":2466820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDK57CRA9TVsSAnZWagAA5jcP+wWjF6LSOJxWj2xwYAO0\n3Y657m01VI2dGBemlLvxbxayQST7uE+hBCGtoPaJQ0AGHNunKMSWYnPYTetZ\nF9ISzt9G/MxAoUmCkGvVJtSEXT14KMnkrtWNEoRWLi4DFhj2yQJVXY/QMg6q\n1QlM2RceQVk/1WAQDNtQUC7l/VwvoVr0wlCTs8K4kaWT/slKJ/RY0UUaK2Kv\nlH4AlhwhnD93JZ3iObOBesyEr7T6itk4IW+AnZHIz48BPPJ+wu0O5F4nI3pX\nooR0r3cDWgxshHqTk2JdH3ZatmQZ1MKxhOlMnODXUy26uBiCiuezbWn44JXY\nccTnyS6WUqhh2Cml7Ofo52nZp0gRUr1NCGtEwnxs7pjTs/iYrxQ1vr9JcvHq\ncIuekXQDunnANbm+WxorjQmVGipHoEDiETebDvf+0MxZ2iv+L2ujJ4tbTgaZ\nuSFA/SWeoIByIXKteGsTNKmmz9rvpFgn/CUsT+wFzdLtwZDk4uORSWfLPQyU\nHo44o7GDfHG/2OOabDgDgKWD9H6K57Q6MziYCqC4zpJBpV74di6NKjpYfpDx\nlhGsPtVTjj2FWB49I41tLNDcEowNNMFWOgm2CpQ+CbU8vGWCvv+TxwvNyi1Y\nnolbdvaqnDnbup/I21UHptuTv5i4ePobKjbaf0RGWZ0XbgXHywjTUH6k8+XQ\nBpic\r\n=a6J7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnC1kJjYn/K04ce6ki2r+VYrDHm1FRPp9frUBbbTXnAAiANejv6jRDV0h6DMN7FOsKaXAWCPtvJAmHZCYhl1eGrEw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0_1644998266913_0.5670698315572158"},"_hasShrinkwrap":false},"1.82.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-QKQEep+BAG+BTaaLqZoJiobAV9zZ2yyhWIqdAlYpOkqvPZXXCZ+A9we+Sj/s7F6JfsGDz6XNJ8Q1JUV5Cg2prQ==","shasum":"2eb1ad1b8c3c33c5e5fec4eb6e340458ee7e2dcc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0.tgz","fileCount":904,"unpackedSize":2471007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL0wCRA9TVsSAnZWagAAMIMP/1+4kj5d1JK9JrND7tjx\n+XP/vzx4RROj4fcOoa1ove8W/3Fh9CkIuFtltigZ7dQR8uf0lwGtvK5vkTYb\ndrZeYwCczYz+A2bPXUunZ/Li8mUYWk3aGpkBdDgNuLng6fTuPeiObU0oNXss\nv7pp+Z3ZRpbSAkSMEOQ5KIO6LN0JP1A61G4vf+8/Pq0uwDquot62W/oGnxic\nuWUCB1K0STBWZjSnplW4af0uDsWpO63hyQNBidu4BP2H78Y/cYJN2cf4GnHS\n6RzNqTbJkrdPdiC8++HOpX/kHdUy1VgeI0VePGTV5/xT+Kz/s7aa1xIUbSXG\npKHjyn248vLOfCiAWms/FvTnoB1c5OFGcXEiT0H3ixtdZpJsDPHprRQOTAdX\ngpi5j48VCND3T6Yuw05DcTTv6+TEjTDo9+2AQU9y9+/jNplppjI9RE7NNuQx\n1ujPoMmdDgiY0db+oE4HM2CRnKfvwepbu7IyYiiLdYmPnNsT98VLSt6S+U90\nEhfgSfCQ4Q7XDLSN0qMRpWWMtlSpr6b6JMvbx4sv6hl4kMyFSKzHJylAFct3\nBpeolSwLfEYdt08iDHVWC1kShMzbBlVldJL1NAD/+zLHvvXOhBwRDPP11/R/\nznojrt4ipkNHXY8dUeCqa4kQP+GGUIDZfVcMW7daMQhBITlBefbgQwd4g6Mm\ndVAs\r\n=ulgv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUZ2LP9SX4kdy4lYiMjzDHO0ZNRPVyl0yC1qbnXML8ugIhANFPrIbiTSf+PKlM0skrJfI1ro4Scsi/6/GI3cF5Is6O"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0_1645002032358_0.2733444861348855"},"_hasShrinkwrap":false},"1.81.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0":{"name":"@sberdevices/plasma-ui","version":"1.81.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.4-canary.1088.068761d536e9545c767171a330d4946660a4e896.0","@sberdevices/plasma-sb-utils":"0.48.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"068761d536e9545c767171a330d4946660a4e896","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-sw4awJJ8Kb+D/iIM5yIWJeN+3nt79eLc+EaE4waCm9EL1iOd8f8BlGAUwXjQMFHwVfXIUSLi23b9KYkzJkDhuA==","shasum":"777b5f411ca236074f9fe99aa4ca1e6becfd37d4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0.tgz","fileCount":904,"unpackedSize":2466820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL3bCRA9TVsSAnZWagAAwuAP+QCKMQ0vhysdJ6Q9WFus\nX5xu2SO/LE2o0gqZE9BZxwXh9nOfU1AeSH5mqENFehmoL8OvrvTa0MHS96pD\nsBOCbFLBndHDQB3NMjptBzbgdJRoqhUwg4VnLhksR3ujoNCgy/qSNFHohNeO\npvsj8DuJyq4P5osrGBr+YACR7pl1Y8nSC3PLXwCguTukdwcwmplAnDYJKOP5\nks3jOb5VUOcsRsl75YUGfyuAfm1pap1ly6sDhwm1Q41wap55kkPmIzl9OslK\nZNY9wHu3GToW/4qhMw2hzxZVQALsP3Uhlmo6qphlr2JVvyPhKmaKMiHdoetd\nVh2tlRyt7cbuYePRQ57lwRGB/Rx9Ok4o3ZzUkrBL3LKKLNrJvfSC515GIkbJ\nZt+fuM+Cn/beJkEuQR1sQ9lIBDd3h2PC2u8n6Pz0efyUQ922u2cmjRNg9mPE\nJUzDRcARKyc6eA+bJRXxiySdJL5sVgeSQkZMd/BGUxGa4pSABeIbc3eox/y5\nO9WQb69eFZCjX8S6L2p0QwsyKbmL9yLIWR9nmLV89rlzFUg16O+icuzcEQle\n6EijuUaFlDklrQPM6Zf8cwudu03i9/O3uhtYPe2rkYnUEPTMZ8wHqT63rv+G\nVnYClLOwUcotJ2/7+gEUqPWJ+reMtOYzxlghhcql6PXCPygIMEsv67zBrjFI\n8jpS\r\n=vUn3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7wvv20DU4RpmuUzx+YwWietRMch6Y2nIXDxgbRhhyXAIhAPwQG9aROYSVGiJsE2C3Oq5bcEqc7Er+AAyP63JlhcCu"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0_1645002203398_0.5778995639446194"},"_hasShrinkwrap":false},"1.82.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2580f09d7853e88abb0e77f3b50bf7d445edec88","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-XKxjTP/hSd1KJ4aZu9zbC6Ur7TOooP62UWfWDhXXnGu53CGFiUanWkQqKXSsT9NWR6eEeCQK3tSG1rHZYvPdSg==","shasum":"81eabfb537eb3ca7765d34f1b473b6ec56030353","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0.tgz","fileCount":904,"unpackedSize":2470888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL5TCRA9TVsSAnZWagAA1PoP/2LXVYqNkLNG2LRZR2gW\nQnpRO8o76MtsLRE1C4jngN2oIUnXYTnO8gEESb1LTkJPp0LM26qgdXhhcja0\nSLiRBSVfudYbucYjt/6EiL0BJgM0FMyc6ZMuvViaG+GERG1g/Y5k0bNpGtk2\nSaAFuUgWDGxL1ou2duDjGPp9+RR9Y3NbUZi+1yWq9cs0B9ntrJzA3wNP99ii\ntgUVnr73HV/6rxq7F4tZjNlV2FSiJb5sy7UiQTw8JqMQE/7abV2j3NRyr46q\niCX0heh0vk22tMkybAUmrhO58HLKnsN/pRzycE3/BDdV9ASayCoYIk+nm2qR\n4vEbIkHlyRPBBu7Ra0YOzLeRx4NcgYNr2zB09/2q63Cl/uQSDFX4cV4/dSyO\n4IDHo/4HZUelXdKGUegHTgh9bfWeiKifob9wK9wmWxa7qb34gcMRr3F4mBCu\n9g5wS0O7PUphdDGN2dxXX3Nta4QxPmW0Rxe9e3GIYJ3UZJQH5iQE1te74zC/\n2q1tVYCEdZZc6ydmGEjxQIUQGn/1woZ0anxHq/FK8EwPckzYQ4fEElUQgCE2\ngrl9vDr58bdm8VkVs1X62hJM06oLsaOzoO2gi+EV8WOh7LonXGzQN6iNbFN9\nS6MhHRGSsBI7OAwQlmJ06N0rbAxhQl3xh1ua0xgemRvwOwCUjsi6m0BA/wW0\nyS8A\r\n=r6JC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuieQylIX7k5Z5twR/Iz4SAzl5USISkM9hf59evMOYQQIgDxpuTb24ZC97cn/guHnn3tkP1hTz22k1u5mCo7q9RdE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0_1645002322803_0.4403621718353208"},"_hasShrinkwrap":false},"1.81.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0":{"name":"@sberdevices/plasma-ui","version":"1.81.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.4-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0","@sberdevices/plasma-sb-utils":"0.48.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"37c80d80486dfcb918957ba64d2eabb02fc00e4f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-rsLIimFji0hrz0QggYas1A0kxm0EM54YX5AXq68fiNcEA6LBzpUY1vW5yuNICBtxYKucwm7+ypKP1SuNnzaVeA==","shasum":"3df35346b9b8de29e04812204e55bfedbcf4a299","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0.tgz","fileCount":904,"unpackedSize":2467220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDMCtCRA9TVsSAnZWagAAqicP/jLE0MtZZddMq5Pg9tNM\nlhp2D8iKQLYspHeHeE9Cb5Ho+kCXxCcnHhZPsk/wMmpzu+j0k/gk3K60DdHP\n0W2170KfFNQVMnmU0g7CSRdxwOmSKfP8i3j1GEiye0a0y1Mw2LXolbg0vk1N\n31FSN3fooUcdyMG9YfqoVZpDLsTdi9t0FEZdfbmF5G/orObkjpGJw/7sTZXd\nihkPPkmWNLbEUQrvhdcX/HZVCvETPs+yZtjKAidUoCnN37sLUyPvFSjRr4Bb\nmyExz1t0WPx0SBBF2IvVN5ze6MXpdqwZduh+aHtd9vXypUbZ8c/j/sqB3riY\nDm/CSp7BspCeP4k8dTX8RDGrYHDBBS1J6OZ/LrQvOWih1eZG2DEw1vgvAdsW\ngDm40dMWfLOO6QUEqV5c4SgN3yjOmja8lyg/9HTTEUvu+m67JASFoK5TCBpe\nyvH3Wkuoi3zjfQyZeHZ9lKhsR2NN7EzlbLqHoQlNlPiLv8IZ6e7mDR+xyE69\nDa+KDXgchNvmeQLQwGPQ4sgnOZBP2Gn3FEgixbSRSWF2fa7+fMdJvQlthI/k\n04lUSunRvocIagCqdcwSulHh2dN0B7f5Amqd1AKxq6eH+lryM5VQZ/1xbxmF\n5VySb/UDqwvzx5/6N8Pt2KQ/zzg0zBd0w5P4ZGqKIgsVk9g19KmuutGb07jT\nrcQ4\r\n=vlJ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/gDDfKZRzgEOT6MIuaQsNzIfTX7d6f/Y4pO90RSDEkQIgTOhWuOCum+m4Om71yWU0fvO9wV2m0chYdMTHIZ2bsYU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0_1645002924907_0.07057203174406235"},"_hasShrinkwrap":false},"1.82.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.68.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-R1zZ5A2yZOeYHmv9jAUXfpZftSsyHHWmdZYyY4wLxgnXC4nqXCazMeqZ9V//1bmbUgYtON7tCvkPe9pnMlHRUg==","shasum":"13c6b5f4c698f2b3a07fc256ce60cbe5439d1d35","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0.tgz","fileCount":904,"unpackedSize":2466820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDNJXCRA9TVsSAnZWagAAaYMP+wS+WRjj9drmzOyzUv3u\nrSd91qbE8GSTk7kO3MzkYapqFU2FkN41Tor/sTHB5OS3e9zIyH9InoLjv+0u\nXxNLsHhdxuLVQgfExNzACMoNkPlXsMGTA2zwpc+Op3F/Aqz2bJawyYKgDzZA\nmBicnR4Qv4bvslDNmh/SEVZ7ScyaWeBxgxG6FvgTK/EZrpp5sXHMXN1LPQ9Q\nddbRsyQyqxhmthigYnrQRnkkl45pv6IdDL38e5N9kLf4f9zcIQ/7x+0XVSxi\no0lwKFRqqPUvCPMngNBflRAwhUvDCTJUi1JcryVUH8ic5ZtG/JNwAacz+h/5\nMO7e8Q3MZWXF3zqEo7Jfvr3bH+1FjoBVWuMO+Vr9rR7rXQFeNsv1/eMMNHQY\ncQ7b7CpX6oc8/iHK4+hHIa/dOU88+Yj+Z6/OQ91g/8mAXfu6H1O7ZjWrpwzA\nCjvPVepBfQwlmdMgOAt/uMAIyxVx5gGFrTfcY4WICO0OvtRj+NzeEW3fZSio\nqaRJPiQOOF1CArok3BlWfgJYoqTXzTPOcWCxm55sw/+243A1EdzOSbIQy5Qk\nuZkp8bPIuN7g4OOCGkP+1YifqLERnfmoFcQZ6RtUfFqzQ0NTEkoMEKH5afRZ\nBfJxxhq5G2hsLV3Du7LQnPMv6y1sOrA0e7aLno01a9AhMBd7F1WxSkbbjAfg\njMFN\r\n=U9Ud\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC26DZERXxiL8Of1LBzt47Rf/Z20DlPeo4xKdkzYndM1QIgeZXTgsqbDrqQf3XXMV1leXZilxbOezF+txtivgx9kiY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0_1645007446800_0.22317826998066237"},"_hasShrinkwrap":false},"1.82.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0","@sberdevices/plasma-icons":"1.68.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"46dcb329baf2b8fcc65e8a6a3d487f6c68469624","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-8AWmdTO5Ic0ODkCk6V/pBPM4uOVS4m7wAKSMmUhPe5aaTDYVyiI6gT98oQ5riio8KWnVf7TrUX6N+PuvOLN3Wg==","shasum":"c8e6c2d0eef713e0c264fd01ebbf3b53f7420c1f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0.tgz","fileCount":910,"unpackedSize":2481547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDOGTCRA9TVsSAnZWagAA89sP/0LcTeT7ASURL7ho8sxM\nLWvzJNFSpsIgHsZFxopWmxP3c2OYpS3RaByJXwRSo4ooQ91W+e9h+t4/NKPh\n7uDM+IPKp8V1kL7t8moG8gW2AJ6c/ifEPjmzeKZQvVwZ/jtTZMBCS48OqJ5j\nGQ8jd3NQyNNSRPj1yn4RN10W7CMvPQGe4YyhJ/RYjPV14QJHn5DtlN/QKBea\nLtjyDD3g2KkT8ulfa5PkVvo1arZ+fDT1hTQqvdv8BiU+52DgM6AovkTJQB5B\nHUD3CdzPuWp1iy0GjGaQDYp3mJe5ezrulmQsYj3qunvRvlhR6tcWVwV8dwdz\nmRKN/HSLs9qloV9P8X4cseChSK6468UfdLFk5UNk8ryV0ntw47AWALGeB0+7\n5Tp0b0Bm9AksmIshR9OMoIWSbofsHQISvj9p5A300qO/N0kBfxpbOz+k8iHm\ndMR7fVoXf0lQCddVM7GVYEqcKOU19BGM1ZFbYmJArKQR6IYik7+xe+FWZKnV\nCaaJLAoopM5+giRqxHVc1DKn++Xn20b9lOoR/em0F/tYnQ/ct0XbrwvA9iND\nYEF4m8Bq+T+F5yB+eGtLZCFTqqdKSt1DL/nWQCxNwMV0AvOuHrHMv543RbMT\n6He/p81X9+itj6n7rFdZuLUd0LoEwYW8zouI1mUgtzKKHaxppA8E/PRgpUK7\nm7AA\r\n=ehgw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8ulZ69m+IFbqod41HENA6CqaGZGvEw0A7z40qtIXVIAIhAPHaBcoXjYDvbKYQipPZZDbQa0X6a65fsyTESjtS1/8M"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0_1645011347227_0.7520545521129087"},"_hasShrinkwrap":false},"1.81.3":{"name":"@sberdevices/plasma-ui","version":"1.81.3","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.3","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.4","@sberdevices/plasma-sb-utils":"0.48.3","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fd59facffd4294c08a2fcdfab80b905066773cc0","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.3","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ADIN+h/9GfjYy5BfTe740jEtUDpHdqEHS+gE4LIB9gLJaSA6DL6GVvvYtjVj5Zy0JvvvuYhSpBLPMJ5eQcqPNQ==","shasum":"9c7fe6a6b70f68976ad61b876e99dea417d4e659","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.3.tgz","fileCount":904,"unpackedSize":2466905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDOTjCRA9TVsSAnZWagAAhfEQAKSSvGW/+3xfzkN0dOlj\nHQARdoBsc40Dg+BxVIhslX7hysNY4BviXWoRv9jB+rG/iyj1FJxe6px5oCgF\nBtrxh1fKyFjB9q0hJkwQlsDC4RYK8GDpFmzCTkmrekUbxk8MGP5+dASrYs+K\n4jw7C6OF/hnqHeYQe63c/BQfQnfm5LAl+qeu0BbfRqKpJa385+m7ecGd6+nx\nFgnSKTZrWaXVNPrltgV+eRpDOK+AMknL+clEDOc9s7Y5J5ZGq+3+GboLDCNd\nkgkfqWfS+GHA+mGu+iWhD/e8znDEgaDv3Md1eDIaeafkApzN6upgzMGj7UCM\nXPxC5yvR/asy+GLE2bRb1OniWZDpmtKQad6MUOfY22mmJ05oC008o09a/UXV\nZGERGApASFIby7Pf3FYOYAvvKYMaitCro0nZ0NQ6W6AhmvuHKZdFtOiNm7rH\nuS4IiBccXmsrlssp4mmp02gxOK5kd4JREGPh9rq+tV7W229e8FEj2CnmYTAY\namoYJA+A8yHS5S5l5QPukaj9nIZljRfYpL0UdWRHglFZiwezbDT9h/lC5LLH\nybegIV2aqZPSeYWfC4DFghWjxWJz4SvX6fB2WkxOTj+8OYCDcnXyVXudUK2k\n9DKKttdJhIejP8XLG3L7Yk0EnnNCyZ1MQhvOu2ru09i3GNdrbGNAVyRSZcGp\nwaFW\r\n=pm2R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxGpPBQEYKsFlDYVCJMqtZzIdeqFuApH8/6ZstNIR49gIgdMBQDdrLv8oYyIKUEPFJUHYY7qFmOD2N1lkLfGXHwYQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.3_1645012195382_0.4698875057953218"},"_hasShrinkwrap":false},"1.82.0-canary.1075.6f4d2b5938de6348744e2340b0e62e635f2ea8c2.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.6f4d2b5938de6348744e2340b0e62e635f2ea8c2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.3","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.4","@sberdevices/plasma-sb-utils":"0.48.3","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6f4d2b5938de6348744e2340b0e62e635f2ea8c2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.6f4d2b5938de6348744e2340b0e62e635f2ea8c2.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-2fbHug1fzc9F1H6JaS5rNJS6JvvcDDaaFgHlzq2jDBBivEzhJJ97noQN/xTQ5Ej3glR5qkI+tQiil9yJHAxSSQ==","shasum":"295cc00f4053e17cac5a130de44caa7a62bb182d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.6f4d2b5938de6348744e2340b0e62e635f2ea8c2.0.tgz","fileCount":904,"unpackedSize":2471028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDR34CRA9TVsSAnZWagAALGoP/2aQQ5WelUEdOOPhn+x6\njlYljibcA7+qrFUduPB6adPbnpyHuokh45a6viFK/MWJ/igmyO7kYJKzKbwG\nqmCXRxlrorAjC9Qr53KSfLV6GcHXyLArwdJVLcl4gvafOI6DCVAnJFx3c11o\njdhXXFa/X3BKiDWksPL/VqyYQjkAhiDsmnpGK7jDOrJZbUZ50xsjH9v6WZu5\nKQOsAw7FYk3FpEiDND1Jqpo7j67E+5iC3W2pH4YWnHP3S4yOWAQ1N5KGRJRq\n8cHNyxSSNf0XfSr6o2IRiCVjJbQO2mhCguPQOSJM+VdrVuR/rORSAMJFGuaJ\n0aaYCLm+WtYX4TciuigYN4DBNIYa5UZwrfQZQAOoW3iU5nGC7/vevtJhtngJ\nB3l8IFbi1Msg7tCYpTgtjwqNhuTFprr45RyJKV4y2l1jbNXwO4Tnn++iK28K\nMbcyVRNpfJx09WyHQf7CrfGqETR8MaDq1tQU84W0HfOZ6S3jQO532q+x7k4y\nEnEpZnK6/D/vJ5NLzFZ4rzd4rsFfjrUKYV6topNdnDHKNOHkDCEVjjroCcBy\nXkT7XOuBy2N3BSM6JXRBCF7SBFzlbLlh1bXQD9OjCcGFoBRBI3CdoXeAt9cS\nTKqCYfQm1bG0WVSo9M8HQFRFqiBgoc3fyYZEp9y7zQ1QYc0PurrTypjWDaxa\nWuZ0\r\n=0eb1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCPxWmKBOktI5tcyfXZtDn9livriwOTSV35IHK99vICgIgczvHXn13ZoQ2jrlLes0+kgeH64YLRCak7PDoyqnzxXc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.6f4d2b5938de6348744e2340b0e62e635f2ea8c2.0_1645026808210_0.516813829086159"},"_hasShrinkwrap":false},"1.81.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0":{"name":"@sberdevices/plasma-ui","version":"1.81.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.3","@sberdevices/plasma-icons":"1.67.5-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0","@sberdevices/plasma-sb-utils":"0.48.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0","@sberdevices/plasma-tokens":"1.15.1","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-kw8lIf8uzIDF86P5r24C1eCCNd32B+vpB7eZz2R4JneFxMNOSz8+CZ7s/r6DLK6ahJs+jR8Oac63FQSULBVuCw==","shasum":"b69ea889a38bd899798e0315f0ab90b205d1a3be","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0.tgz","fileCount":904,"unpackedSize":2467125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDUuHCRA9TVsSAnZWagAAGLkP/jZuE2ZyjPqlAMvJFWMT\n7NTmBhp6ld1FOBvSA4MbpAmZLeEiEPQpk/5+UxG3CvOzr2UpCmVHYaA4J9b2\nI5Fdf8iGwTQi05wjlj6siTmneEfvZwS9yZCnehCnZKrjIDGoa2hECg8L7n0Q\nIuZqUB76SZKy8uJjF2aVP2FEwFN5K8ui+P7xavn2XfqswnHyeCMDpO0Y7tY1\nHRuWQn6pXNu/4oegBjqajefSIsBwRiSUknG2kH4q14yYI/Db2q87tzmWnb6V\n61VMW66yQYR+QdNbtBcdXKTwD+/9eqa+cPBmyq9meAKliuwRaZDCESTnqFbT\nXm6RrKYYH9ixklweBf4TNsD4ylly5j8epVuLVtasw2bsbP5/xEkz6WOFkDrm\ng+YZvGUh/cQD9SxRczKLVApFDBHFLbdXzBwzAxrcxl4Ogk3J42RXKA7lLD7f\nb4HUKIudDpNyT6ClIi782HRKuVTwZYYLnfuI7UM8MuJgxWCU04J8F+BjreSE\nE+EuRnsJkQJxCpuqmUvAMozsfSi/XVm+hN/j7sUHBPdSXdwj7VYRULUiTieC\nXUbsBmJPN4nzt6XXoc37are3UTzw5Yh47JfLoVC5PSYej1g2aZleOd+IKAyn\n5x1cX1LgQOiHPm52Tix4GX4T/7Bc5/p6v+MVqk+5Ui3TEBahuqPSvamPd41O\n8KAL\r\n=oHAt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+HNMI4NcFs6za7bQQxmvNMm+syJQFlLK0yvpQ7AojRAiBxW0lmqM/Zxsz5H1y0Q8XIVtgY6mc/pRyfTDOTqqZA4w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0_1645038471523_0.5996214883000237"},"_hasShrinkwrap":false},"1.82.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","@sberdevices/plasma-icons":"1.68.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","@sberdevices/plasma-tokens":"1.16.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"310f151d902a974a935fa5f11fc7ddf38b8c281a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Mf23VWxBRaQMvXgcwvs/hoHK6gbVzDFRgVPVMCIuTi12pdpTsHLJqdw44ucnN+Bhwt3WJ+9clpohluQA+FtDdA==","shasum":"84cdd79bf35946d651d0194e3a196a185690f056","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0.tgz","fileCount":904,"unpackedSize":2468697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVHzCRA9TVsSAnZWagAAlncP/2TlhbTSpQUlTB41ULmY\n5HoFqoPnoxySwK5236vDjEHaIuloHeABxAVmrz7BJxSWUpvb+fWzs9vHYkbl\nMht+FWYrPgOw3enWtE9aisFpfAhNcCpfW4p3ZL262pizQO8qqOdu0VfNHexE\n3cf3VdeM8hbXF2XxdSBRlndgER38O2HSEEHTsDfypsEhfQ5pilGdJvExtPWC\nRjpM3ntbu8kA7KMuAG1Q2PVMRHnY1qRs1eJwsPGa/0RmkDJ5wSZKjS8j/LRI\nvWL213D9oORdIM/yiC/LlZeljT3/U8E3vyjQqqWomIMIvXcrLgJhytG7lqW1\nZt0mIo05xdhewfVo20duPZxob7UBNbxTq2VO2cO5WUx/R25m3dHVUzFudcJJ\nDXI6skN5Mtjn1gJHwDP2lTt/6h2W4Wf3jnDwRPPLB2VvfkJuI0catLiGBUTL\neLmzaHoMnwiQ2/j4MHstxwIl43VqMyoLVEjGLQYZGj0N4VNH5FJUc6GorCKq\nzq9aLNBHL1WQ0yiZjiGOeRxelcBTI4imW7/XtRi84kX7BfQnIDlcwM79v8W1\nmnGQLltx5qaXN7kBhnxi5NMOXIV+qvwDPS/Fq7J2bMJKtUKIcmY/c+M66CWS\neNjTv7Tgmm67oXEeJZVOSte/KRbIAbFIQWqT7LlcV3J4xoquha0sjRs6RKiN\ny0uV\r\n=Zemi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf1STZXq64fSIxmmozayuWPTYoJrr8jPN6nnytgU2FGAIgFvOUwU8nUMzW6HJgG+i3Qd2DHSZKyJ6frz4WwckLaTM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0_1645040115454_0.5965659015159686"},"_hasShrinkwrap":false},"1.82.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","@sberdevices/plasma-icons":"1.68.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","@sberdevices/plasma-tokens":"1.16.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b80011a3264fdee31eb0e5534741d2c1247b61a5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-xzn8VDGEMZYXUw7hbVhMUPaOMn0wOmgXpoGb1aIddAK6jw7njJwG1blvz1q36DhI6LgCy9Dz3x/F5FpaE3J9UA==","shasum":"c422a54df07a469c2b9ce0450c6f13106887f6db","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0.tgz","fileCount":904,"unpackedSize":2468697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDe6LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy5BAAhDYVsZSN/0CaQHNPIz+jrs6BJnilMF5oxD6mEUxwwndtDoH4\r\nAt6yhi7E8hkgDPxzRSteLa8cXpmCSkTxa2OfvTinDsqakJj3DO85Q5ZQSR6u\r\nSKXExp/FiHTY07QKFe61HG0cH47+zMb0mfSJomtQKaoaRcQl9gzrbtRFwipE\r\n+jLo5sc/m1qqcU0XZv5TGORGAK2eVn+vb9i1PNA/FMQ/qt0nF9z0fWJLYBJO\r\nSncFCws/tSoqrW+7JMNvWM3BHK/+5MbBPc/XSKjPqha/PPEn4VIS5/vfSPDb\r\nRBcuimlV/PWfoBz8uWdm2Z7+z+mZvubAnS98iuLJcDqjRsF9P2tV0SUgc43W\r\n5CEYLc9lc64/EKDiEKMRw0ZaHB+cVROygVM9/oitucC7ebY/QY1+Sy+rtG6N\r\nvE+KcfxnC06SzkOmAnWVvJnqyaOMY+wLR179Z1kQiGLK5HUbQVwRHIo0lmB8\r\nq2C1IgcRYQmvWvVnAL7DEYlaNZ6WFgxaEza5f3Da8Bf3m7Z+yDW9RvX8VMRW\r\nsdF75zg/Je26XVPc344CjRZRHAKjr9oDGlZG/a1Bf6GNSMyYXyTJNyBKIaKT\r\nPaVxNAX7I5uFuCsj3dvxe8deDU+Non/bibwkTWeSVLViQ0mZlU7NeGRpvtGd\r\n+zmbx86kH7LvugPHU1B2WbfpOamRO1ZIX/k=\r\n=YBb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgmgZ8wO1+bzOkYc/6Lsow51aar7FpBYZoWO/0bN9TfgIhAOcEy2u9jXzf40c2aSe8hi5gzwAqeDqyamAIrFdk2NQo"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0_1645080203597_0.577560302631237"},"_hasShrinkwrap":false},"1.82.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","@sberdevices/plasma-icons":"1.68.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","@sberdevices/plasma-tokens":"1.16.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"94fe0e45b5ea1a1625883994032742cfec15bf32","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-69SUm6JQ/b6uZTgRDa7Me9FV5NGupDqPXbF3UHNVOBHYZj2ryaDxQC6jp4LsbTG0pr1XcdrPCrSxvtFHASfpFQ==","shasum":"64a2477be3aae0e2ea17d1b6a597178c72e63bc7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0.tgz","fileCount":904,"unpackedSize":2468697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhgvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsxBAAjAUE6HhpZdsoMXN5PcBZZGncEsEDOYHZOs2ngDNIT6S8WkIM\r\nDakaE/3xO8kJDDjeo/zg8hHkT2vIIi09VB9B1lRn+ATjVA4zcF7YToSonFsr\r\n6Z38DiCxJ++m+qDnqMQ8YT2Rnj49LSmSYk8X4VDuwwLg5cR1ouQ8oMOLV2+d\r\nlg9/NGnNyaxj9VNfFSuoqAH5XJZ9lf7gh2nKYqL/n6Y2uxPNE7+KJnxF2Eb1\r\n54KwBYSarP8POp3E3WTfqjFoTinOvUBQo1igKYygmgpyDlVodixkfvAv6Bm3\r\nqRtsIzf6aypbapEYipE2s8oPQvMWxBy0fGXXxsOwdlbH/aQHnM/PNQLRFE3B\r\nt5wnDQp80Z0e5Xb25nmckOKnc3F0aCf32sD3v9iv+b+6S7imNEkb+fBG+m5J\r\nqYQP51a7RE83GtoMpALMpwyQeSlVI8olE7/zzc3vFT2YYNCmLqQ+GpJSBvmU\r\nrPRZ/hKAeFkxWjyFAAz78mgOqnNxdrOWxrcBchDkqAtxkxk4SENSrzzXIWkY\r\nXUXK2g8pQq7q9lJ/zJ9uT+sVXMLQznJF9Qxw3U3wOcvg1ypoqZSgjrZtgfm2\r\nMzX8dBtuo8iebVi73Dnt8jc2WjYo1X6xBywP15OPBod649Mzf4UgCFsXHXpO\r\nrKXcLMZ2O38B8JvPP1Ny238gMftVwNIpLz0=\r\n=sei9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqtNyieOT7l5gJzqOcvGurUT/dge9iqtJvgnbqfJozUgIhAJxmW6hfT5feBT0oggHXc4f01z73QlF8YUD968sJczcT"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0_1645090863452_0.1653886024674065"},"_hasShrinkwrap":false},"1.82.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","@sberdevices/plasma-icons":"1.68.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","@sberdevices/plasma-tokens":"1.16.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cfc03dace31c7cb6c6107c724d1496d827fd1981","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-OLL/WmPppP3z9rmIvsJvWJigQYXDiHcYgBMpYG5iviiH7009l3Ra6HD1ZWh8OV5rQTnsmL+30Wjs2ozIBmRPiw==","shasum":"c64515830b73d3f21ed32ad0ac56691e5b98a6b2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0.tgz","fileCount":904,"unpackedSize":2472765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhxZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocVg/+NOCZY/O4yA1xc8IswZjyDc0uE+6YhDhrmJEldspFe4cdY5DZ\r\nRjbxUikm2CK7F4DDQz02ybho85maSGLCC+WMgdXpwGX8UbLti7+0sqXy7NKH\r\nx0ijgreaEu4fwC2n+2Ehe5oS/Hu56vI259ehhNuDsWmkce01H6dT8H0MikSW\r\nJ6E5a30k1yq+xBoCyS+IsEddyBo+mWEE4Baosa0TGjZwXmC4PXWV3kfwnFt0\r\n8r+eZi07C+toMCDjMHTeV9QSsdKDNZUpA4/hbyPWZUmFW2KHfryqkpjDqzRd\r\ni6EZIL5fOamxxdESQSa5kMYKnre8LdDZGDfpplJ3QupNgjDbzlzxH/502rrr\r\nHReniXfPTW/IESBxZemuNvb6bAE1FsL6rIEEil9u0ZbL9ZRK5GsxF84JSp2U\r\nKIqS5eoph2YmQteO5ofDcL9W4waOWLEB4uMMC+94bBZHO8zf2FTEXSa0l1UL\r\nx9pvxC63Jy83mXUl//6vzLIT40pY0gOH6PIq7yo72P9FRVeWaPcYRlr+Pm4U\r\nQOCIraVZmHXZkIXWJrVKirNEfLUBDObOE47Pr5SQNvfxJ5Tx+SOgIP/5fg4Y\r\nmRIyQvmm+RmADYR9vCbw1MiacE2SwSFcQNWzSFomVcObr5DVBE+8/SH0Tmso\r\n+giQ7EndhTQToegjbqnqgfdM/iIK7I5LPzY=\r\n=3aPM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoUZ2j3Yr3RO0Im8CalsdLyQ8BtR5LjxwFr/eW9BmGnAiAO3DjGOwI74v1q5KOAXoXAUztTKW3PLXf0ruAHipgakQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0_1645091929240_0.532496910806276"},"_hasShrinkwrap":false},"1.81.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0":{"name":"@sberdevices/plasma-ui","version":"1.81.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","@sberdevices/plasma-icons":"1.67.5-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","@sberdevices/plasma-sb-utils":"0.48.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","@sberdevices/plasma-tokens":"1.15.2-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3832627581dd419cdf60751509a35625be54f156","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-XjO4p9xmdpHdMrNsCawUsBGRf+wM67HONzRkALBICe499JvJLEgEMAsVnH5HO07nM/VynYAfQpB5XUkttOULXg==","shasum":"4707cc9a5dbce4823058000c92b4d6b2baf76d43","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0.tgz","fileCount":904,"unpackedSize":2468697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDh0UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa3Q//dvW/T9DpP6xSNHIYCf7+fIyrm7rPzM00DrSPHxvSQHZBx03v\r\nOGkUJwk73oEmC+x10HDMuBKkWD58uyaJaD6Y/TsIwpXzcUAf0pm+mRVHTc9Y\r\nwdDL74NAxYwFyETVnnt5tnLCaZAJ4bq+it11nYSINY42+ktdO0h/+pcc9PYK\r\nVkSLCVfPNQ2CX6W1qgimZ3WF2WdJW0YJ1QtOzPIiTRa2M+mnG4oUMYNy/HD4\r\nwVFKu0XPhxtlHl588BM6LGrp6Bl0Dqu+wTqlmn4bUzr7rP4tLUSVoDo+PbsU\r\n16fdu90PCP4NREmFbhYeJaFCUIqS+CTaWgfUC3czaqmku87+ZxUKpeqbedQO\r\nVYn9/wFWLw17P1XSazul6118MzSeo30eoVb11vVVyfTa22cisthuMa1zy8yI\r\nLug9YrQbdn2WaFcTFOKvh+xqbgBAw2SNtzQEs3U2a1EXnlwjoFgsV46gCUK6\r\n2iTypdtRZ1JxPBHWCC7nxbaGdBmdZ3DzhClWP67PZMWP6sw65D5jSIe44HW3\r\nWHnIoYJ6Xxg1dteXcD4gkwirz284k6MvgqABB+YOlcwA9co/ltV3Eb1GN682\r\ngvz8wcuxKEzT2wV1aqszF05dQVYM46P5dG9dQ/FKS3bxVlL6JehpMIGFsIop\r\nrhH9X1W6D4O0Dd16tEwOI8HpGDq2ZSY+uXg=\r\n=+RM4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgqLlJq6W5wpLJez4bGxAFSW5RVEGwUu89q8AsftYQYAIhANquQec2pybVpdqcJHd3qEuCtFhv2aQZjDT+dkWTukLY"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0_1645092116410_0.5620918642308725"},"_hasShrinkwrap":false},"1.81.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0":{"name":"@sberdevices/plasma-ui","version":"1.81.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","@sberdevices/plasma-icons":"1.67.5-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","@sberdevices/plasma-sb-utils":"0.48.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","@sberdevices/plasma-tokens":"1.15.2-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f6f9000b5272fb033ab3716b0f1fa25771df39dc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-EWMISZY7tvwAuKQePxWa/TW+5Z2pVhQZv7x36d9qU+hNlHw8WEBOlC4ejGuWaJc7c7EWBjsRkFdCRQHyFeafvg==","shasum":"0ca1d3118a2fd8ded769798d38cdcd9f9e4a311a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0.tgz","fileCount":904,"unpackedSize":2469097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiGkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovsA//axM8k+7r+GqHytqVH6XJovqEr6WWKq0hDen2Bmz8lD1JycaM\r\niTgJ1x5yvtl44pl0I2jQ3r9d/WjqLmeK4BnD5LsLnD8DOKd2P8BO5a2W2dbJ\r\noh8aGFCYMUqfnZ4TGaCB9/smoV8vj7+6EbPhtb3IiDZaOnPmXEU0+vWJeTrn\r\nSSNN2LkdEY5tM3rseMcgEdpFJSRkIGFXFaAjCdyeV31UhhOyXSuNPtEVzaND\r\nLXUzFJnm+SaGBLRKJxacMmAPvJcrWk+xKjjzM+++8LfcjXgX7I/n5UWSrRx9\r\n/KK5Pmayb25PWKb1uTLDc/43zZ780l+NrUAvxqdCFy0+pp/n2zde6R6SxKqC\r\nVJ/Ve62e91WLRcITEfkcx2nZfjKA+y6HPDZD9bcaizC9VBH2tb7R/5DZwe5L\r\nJq/Ej+6E0SeEj2EYDkqmAubiRE7Sk0ANzuWwUzdk7hz4uoJnVewqGzZNPrrd\r\neaCzcaUG+rYVVDkxuqrK3R/4cCvQZsD6FFqNlHDVny34uBImWaMGLhttGMX3\r\nYUAlNfJMuPBp8WEFTlxFPF9pQeNZuZ6zyIFLwf/BBGUGjpbPZ5R+bvRH998H\r\nbAoE+eBHrqEw7UWdWywtKu3XpO+RB+PTCKZbpJVe6izVUxPoYN94klEJSoOH\r\nbbkhFmOtP/08MfdSkbtt3+1IRxLS2k7lp4k=\r\n=XjjV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCJQXBbUkT/XyDln0yRCE1b6kdJQWgJXDbkTPPa4bIPAiBkVuLghJwf2evwXPgc9cL45s5orcsYgHUrOiBLP32HjA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0_1645093284153_0.25762385266978094"},"_hasShrinkwrap":false},"1.82.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","@sberdevices/plasma-icons":"1.68.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","@sberdevices/plasma-tokens":"1.16.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f1221c960c807639cfb6f866381d38a066d40737","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-9dVGQcG/g/rsPxsNrx7Hv0r11KCGjqY8V/6N14HNyILno8tUFxeJKyjsoEK+C+ZWScMGscJ+u7j37Z0YpRvzVA==","shasum":"3f1bc2cbc8491c5122428b998b4818f7a0dfb6df","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0.tgz","fileCount":904,"unpackedSize":2468754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDicoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbDA//XoAIVBL/xSZno5cjXKiTlenAR53FZ7PMv/xWvrFn0wwn5mNC\r\njMg2KGaaJs3OBLzKhs7eIgXL3CdKU9FN4EiuJHA90qIUc0/UcLFXvM5m/Fuq\r\nj9TwKQXSF8vysJJwaOSWr4Rnkco74/KwDunmNOy50T/TE6BRCtTElXYk2wAZ\r\ncz1rTBH2UQX6kO0uqd+eobKcr7FIxCau2lPPQ9xTu4LygztFH1qpXp4RuJkO\r\n5yG5fGP8DyFoTg6EjbeHwgRyeixVjfN8TzAMyOZYl2G1TOR5FvhrizVO+Gbk\r\nc4TqQQBkGtclroVYcZfRN6IELOBEr/oH+4EBAZefbOTR9rQGw+yTEFCMBL4t\r\nnz8TL6+7Qsgaxe++1ClJPco8BbhHEMTZEUZfhzzi7xN9CZE24CHzLWmZy9Y2\r\nwCUEerB+J/g/biWf+zC4F/0Ko2dHlCoiam5ucc1XB/IM/Qt0tTy/+XkTbqdQ\r\n7yBxZrBqhGR20kSHEub+r1SObR17MIC+O2WG+2ofhZJhxqY3t63tmDYLJ0dS\r\nGTS71z17YHbalKZqfJQPSuuEJYd6MwQFOEXhdbZrW0bD4+knc69o3d4eCNm1\r\n7CAVOR4VOXECup8QN6z4BezIU0FZTFhaGsRjQOP3YGWsRrmK5ZlTzX3mWE2/\r\nYhDY4+mF2fpxqfxaBgY7lqlGeAlekFMvN3w=\r\n=1yvY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMub7dfPUvzs4AxzN7aNkREC142PGEIFsEv5jSUOysXwIhAMzl4ZhdrN2qZ1gBqvfG73c9Mqbb9OinG135uHo8kcyA"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0_1645094696006_0.6143294288608707"},"_hasShrinkwrap":false},"1.81.4":{"name":"@sberdevices/plasma-ui","version":"1.81.4","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.67.5","@sberdevices/plasma-sb-utils":"0.48.4","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d8c5a0be5fbd504a7c9a0131e15b591a3e962d1b","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.4","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-T3ksB3IHwQujKPGYPBCXXezncbOJ59cPR/U1183ioG3IdxQQdKYWIpEKKuWq4SCmsJ7G8T1izP3533Yi6AZjqA==","shasum":"69aa3ad25e1df093544c6340d53759ca469c70b1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.4.tgz","fileCount":904,"unpackedSize":2469367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDisAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTUw/+NPqNMxg0QgMJXD703VqK8qRpmCpv9r6BuSn2qGWSq4j+6ist\r\n5gJFvBjQXfHT/3bq38FjEfX7l6fpyWs3uLfTZWQQyaiZQBHjwxxMmPiegqnT\r\n13x4PR4AEINoX6qypf2o365P//hEQztG71mk+i3r5rQmqzfG4VjFKL6uKTnv\r\nYqN5hg2k+M2fbnNZ+5yjvyZzV1PC9E56xR9Oju5G+jdvt7xmsjbzqboRixP1\r\nKHvG0gQPZrrcmbqkVBmdjvPNvj9QQsW0LML6L/0Vin6BdvLgnSy9/TCIbEsm\r\nrArR/o5KY18QlbDZ1MXVGdqWNxRMrVLiuFqZ6DbqxU9PzVgyHKFklGE12RA0\r\nukeJ9UXTet+N+wVJmQ/KEC0raP9DxOn+QxQDPVHlHRrjs5IE50Og+yt5Ghio\r\nsublZRIXSHKlCadoHaUuCY8ldGdlp9UXpWu3PNK+t2ZFJc7NoMI2iRem/JaX\r\nnaPgfmCUymasS3ZfJZlz4jJu5dU+XBkReJ1AHxC2gOucuDtVgEbmaES8ZC78\r\n2q4A/erVpGTwDX/GgsETk4J2Vm1iEqUlOyNQg1KOoaEDK/b+1LaWm/+5Q0xm\r\ngyzwp8GPYG+7E1vyESHAL1CYxpacKuRzi+apLVgjtV7ijksn7JjaAbfV+G4L\r\n+1PlAoGGWMUZYOjFKFeSa5mjG+BRVGE1q2g=\r\n=Fjbo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnSh1D+mbL1YBb+E/TQnnS/jSRdgbu1kS3mgh0gY/D3QIhAK0InHunyn3QB8EG2TsWTlgzZU05AGY/ac+Cqhnq9PcZ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.4_1645095679716_0.36616855691399897"},"_hasShrinkwrap":false},"1.81.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0":{"name":"@sberdevices/plasma-ui","version":"1.81.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","@sberdevices/plasma-icons":"1.67.6-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","@sberdevices/plasma-sb-utils":"0.48.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","@sberdevices/plasma-tokens":"1.15.3-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e6f30cb9f609a09b3c0683dd0b67ace4ef84c579","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-rtiy/N6Rm7Wj+TaCRBN1le+BVnzysFnHFEpu6P91eFqYzFvPyTjXiTbdwQs1T5y2pnZAJdKu1EEQarO5+vDcEQ==","shasum":"b00a842f16ff20d4c8cf984f26e96c516b0826ac","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0.tgz","fileCount":904,"unpackedSize":2469697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDj/fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSvg//QUcr7Yg2fROY4g5u06CYE6QeKt7wbdDBbFOCMKyM1nZ/z72I\r\nCzX3i6EoWJpI9J3qnQL9GokakEUsXQHU4Rg1sxWr7eWA4D4COHtPS8dAWacZ\r\n+mO2s6026GQAlgCab/RhxCNL2BV06Y5NSBf+inkvaFnMV/V2oZ9IelfHx8Zh\r\n3ARc++osPiG9mcO5mEXhsA8uDCulOZLic4yfNcZt4wkA/t/OKTdczGFN3s8S\r\nvWZxLRnFFybipN2babVcOX74HfDGc23LrAc2c9sqEDrWYQUjf6VKegfchGJL\r\nDGMcZld/s9BcBObmfiCPuQ6rvXtm6YuV/vcQkCWePJ9ZH7HtHgUlADIM5ncb\r\nnlkAI6HXdGSsg213nZSki1CRlKwL49MSFlIr8Mfxqp7+rZ4+z+ffKQEUA64S\r\nfs7LcIWtpWlWWGOYRzt/NzqMKebzu23zB19Ed6Hb8c3klyv6fAbqqyrxk5/S\r\nsFqdLboWxUj7KXkub3nnmg7K5mWNy9zZq7G2cIVujjccpBtI4ofvqz0FLU2Z\r\nEjMT5oPOfAV0ZKL1qey/zFAmnYsnKa5hr1apV67Q7U+7Q/baDFpRECyXKVfQ\r\nIfAnKo8RFfGycQ4Fqc2vSrju6rdP7ju4S3GcIpJpqMWQ+EDeDaz5LICegWtw\r\nNdTzWz6VNPekhDSRyknC6nBSk7AvtF2QSx8=\r\n=X6FZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRqb3a88zksuVdtM2BinlhnRO606enxGqnyeQeFJoJxgIhANAcnDsaYjRzekKqtOjExnW+8+NPBS1u9h1A5gl00RIq"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0_1645101023599_0.11885865109607652"},"_hasShrinkwrap":false},"1.82.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.68.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5d4e965439f0b7ca9f169233c81779e49511002e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-0NKYZ5OHKOVU317HjmLbjSbX/sgzXHA6xEyiR0adFO6+2fj72LZH9M2qDlUDIOAfPyjCzFFQzL27gSL4aK0Mkg==","shasum":"c515c6b9dc47c9c987db716634f276756ade8d12","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0.tgz","fileCount":904,"unpackedSize":2476490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDka3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruDRAAm14AsS/o+qcfC0zQ+784VaqreYQJ+d/TBfHZNpNNa1SSTP37\r\nQnYJ8Q3uU9vEE0/fn5WhGbGhgIgA5vpAyyXXA4j6UNaPnYDGEIpiycgBw1HK\r\nIwhUnDY3nrwmfazugRF5rRfsuJSMF1i5AU/QjSWpziI3pMAtImVO7w6V57hW\r\nSm0a3NYW/7N2TC8DM9JTCB1kZlr3swXDTnBdJF+KOll+eNdjnWvgK0Zq5K0G\r\nCrQIYlCldJLXxk/d+rup60UDMXcP4wS3I+hv/nio1smY66Hru377ZOuWgJCl\r\n81YLoBmxXV2bouNydlwaw1e21bs0ovmJg9lznLmYSzJ4hPyAhYgd3SSTn43d\r\nbg3hkN2hu4lDMrM1Kbxfh43vOGwxWPwNL1HhiBIZ+JAvp0F5u6u6EQWNH/xR\r\nPUXTZvKkg5EZjfoFFKW1b586TLP0q6p1QVOFTkWncKKRRmUemriLOre4e8nX\r\nuobuWQCzjoz+3zB1F3c74x0G3vRou1DkgJiGK05Jk01Lq3XKP42SIAczFuKH\r\nzHK2vEloeOGU5bN1m5sYNqNHNsr4rAFmjSvqImtNyJ/QU6UX2v8LHZs8wykw\r\n1kQ/OAppmoy7Ujfu+PQdF+R5ePJlqgEXiLkOQYG8Gc8Z0q2Ge0ogH9yB+FWh\r\ngpvDice8gMPalq8Yh4pd2Vtz25JbJRkQuUs=\r\n=Vbci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7ruyUSZ2tkjNgSqDAJkFHcRKxHHzEnUVqr4NuwS5XYgIgRAM97iUQCXpYKWdSomd36QxkG01QoA7mA7MNaQByi4s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0_1645102774899_0.4305041430097909"},"_hasShrinkwrap":false},"1.82.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.68.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b8a2a513349848d723073fc5a45637246f2edb82","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-VlqaDesbdlGVZyBB4p5CwHKpy25qO/gdijDAhJiPqqV5bHJ45KvILFDlJfjkgAMOB/C8JochDfphruiZKEUFhw==","shasum":"6f1889058810ee3b648ca666cacb1a25a2f8b555","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0.tgz","fileCount":904,"unpackedSize":2481019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDlzLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyQg//QF8DZ7NfmYsFGsXsprKLrfV4nj0v4HPyg5k4iDYQE3YRUwen\r\nOmxvTRMZ0YcAB2fs9c/gWcmOvNFjruGKzCAHIijeur4+BIWLDwFAJWuI6kEx\r\nBBwbyjnyghtj4jJLU2MKdnVlD5HnhEzERW1nhutI+Box8wppB8cUDKZAo5Q6\r\nnefSYRGBo/tLrhBfCzCgF1+qDlyeRIE94jwKSWH/SmKezpnjvzwd3y1um8NK\r\nFUvKqPmAC47hBBsJRnjDD2sbkdtVmPU2exnwKoC3uneB3ur/AMBZNHXOi4K4\r\nE1KOWB3X29AD7Etfm/UsP5ixqazzifQ03e+YGp64fuFBCIX9R+Sp3821pDUq\r\nv4F+bHlS8SN9QLkfMdyfEIsNdu/vZz/Q8H1Ibp+7VJQqfb+ZJFLlln/7SC50\r\ntt0anZTZ3+8zUL7+AmgiChlRurdxNvZaozr1LNjzpOEssr7W8aZT6u2trmK4\r\nWKyoqNp+6AweMd+Wlq9P3csTDXxHXCeaK1gXBTLxai4T00lkMmTZAe/Jz+BI\r\nd9npJA25aKialfYHNlw2QXBFro1l8bvs0V7asWSznTTTCzPBYS9SM7ns4puN\r\nkvxBbfm1zaOSeRDuW35gpmaivxNfPLC2G4HAEF0M9WDoNj2BCc+LOxQThCNe\r\ny7z1HjjovhxRvusQIIpMMbbtAldkSAB5Rrs=\r\n=g0d0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIsS64qf6b3+NLyu9Yp3goOO1GbM1ldny5fuUuvpfu+QIgBw8tvLglNAis2bFo2tP7/Upv3/IcK9LA+S4DX6bxhVM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0_1645108427126_0.9548807684166787"},"_hasShrinkwrap":false},"1.82.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.68.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"84717b25895cdc7abe9ba6e159b4c7682ce14683","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-HdMHVfPKbIrn0QGJY7QC7wMNWv6BxQ26xOkM0fx3Lpltr97USwdU7lxb0EMQC9kKStgeXQUcqT6N3J3TOkjXGg==","shasum":"0994ad1ee4672fde748692531b9ab08da890782d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0.tgz","fileCount":904,"unpackedSize":2469587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDnApACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9+Q//fDGFbRVWYe6mR5b5MkWORERxbuif6oJBv+RkknAxrAugU0ov\r\nItyEZgXARwxkAvYO4r8So+dRdXKVhoN3LVyXFZ9s+Uriu/novl8Jf+dRbPd6\r\noA1GwDaVXPda9GrFBeSOX5RONK/OBRJtmYinwuDFjH3gm7yAUDdO+btHwtjP\r\nYg+2PdEE7VP6fjhwnn6Qrpw5+u4+zx3QY/AC/Cf9POgnJciSGNhWRYLObenD\r\nSyVA35FDEuHIRqDHDwch0Rlz+QQjiq8ymp2R4dE7LpbuLOGHsaJ+NECxsh1x\r\nzX7uDG6ZHpwUhYMbD/QpA7grMyDEyqce5BGmRyem71fKbuJzsa2b7eF1RzAe\r\n3XPcmgPPvx9ZEJmuthCylTJopiBiFcxNxHPiHp6+EcKaQj8Jfgh4ZSga8Uar\r\nkgHKSLTIq8IkH5bUzH6nkJ/wRvrQinOAFaX4gVx78htl+3HaUYZS6NwHEZAb\r\nAAacwbLbjDwb8v/SbYYoAKx7sCFeEhPpMDHrMu2X2KynLB4LVFiY1EOeDGPU\r\na6QSWb4XuUumzzH5zzJPjM8HFq18uzNJ8n97h9cj8YnaBpjvAnxpfT6Dnz0L\r\nwJyUiPbjRgCXfXEo3xNgadqL1VQHGWqXISlfogYk736NII3tyNQVW9movXOy\r\nbAqL+fJHiYw4dbHhuFFAN0UZyECue32ePEY=\r\n=tocY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEdqa2sQHY8lh4UsGm6rsDnZmSRGzxCoY1vZvuRz3l4AiEAqKYB4WHjvwJtG2iKE+XK8tzHiSw9w/OzHFH9Yv3lD3M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0_1645113385110_0.759022630557419"},"_hasShrinkwrap":false},"1.81.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0":{"name":"@sberdevices/plasma-ui","version":"1.81.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","@sberdevices/plasma-icons":"1.67.6-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","@sberdevices/plasma-sb-utils":"0.48.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","@sberdevices/plasma-tokens":"1.15.3-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.81.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-WbkLjk2MFqPt6LomIxSI96MoUCNjsDezg/Pgmm9ldf35dZrEIv41qpP6HLhyi27XwWE3hbGiBHkoRi5HWnDqYw==","shasum":"146426a651f600a8f48d8ec9de0754e8c44faf66","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.81.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0.tgz","fileCount":904,"unpackedSize":2469697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDnCVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB+hAAjVd7NSWv1a+Xa1F0xe16hH1vmdSpg/lanmAHSagcJcaiw2h+\r\nP8n9V6aAg0owvdmiB75/qb2fULEo+TA4hdG/btu8uKwjsCf7hjLrkHNsXMra\r\nWucYCf/w5CL24757N/84KpajDUZgDyDA/YLcbgPEAXi/93E5WBUvDpMCDwcy\r\nscAZOPYbqnjFFFXcWYo0MLyCBh0PIpTlz3o9ln4zi8XT6CG3wL5VIZqX+djd\r\nsCAHWAGLWKV07PUhBhSxPfbGqs8Meq+gP5D7F/rPSXgQz2yUAQwmKbKSCc3B\r\nKOYRgS3vBbCnn69ginivGCfweh6iYh2LvW2k8g6nR/DRmm8OqFiUsLdUPAkd\r\ndC3ipT5EghCnN2HCqqH94/VM4HkdhGBgRWcF6exKGAA8T+aUpu7cJ+vODeQT\r\nHFeNEPu39Ss9g9Z1soCwlBuLuPWnMCjIKVe0+46wdXKvV42n3E7tuKcfNrSa\r\nXaxvw8QnKZBa05VpazT62Z3nIMkplNqvam3fK4marSPvxBqKGxXzUOmDMGhw\r\nZSMC6VeqIbC3H6YcAwUf3oYKmmLRvn9YpDoGZTfkO/X4zsTQNMz7MqE8GZ+n\r\nhHk+kxgnISlUOCCsQHHQbGSlvTy8IO3UXrowZNT8Y97mfwTd3ejZ+6l8b4R9\r\nCjRnvPyPhS72FQUGD00lTzi7OXhVDUeh/GU=\r\n=M8Sn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDECMP/dogOf5+B01RAvjZGXHrqV2JM9QQ2BbRHsh81SAIhAKH5OxQqJ2p+sYnIhfbsrSQ66Ci1fYHKBKwGbNcekA4r"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.81.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0_1645113493370_0.5109543277700865"},"_hasShrinkwrap":false},"1.82.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.68.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"137d42c941c94d85c82f082d0056ab0bdbc95f5a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-V29A78er4iq5G9q7omENvvjd8cDOeI559JAt9Qe8YoN4MBggUthkVtL84od3ymtbHvDODNlN7SpixpBD1U9IXg==","shasum":"bc70fbcfdac7fdbe0b742d4d3ad1eb9f9b76ecfe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0.tgz","fileCount":904,"unpackedSize":2469587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDsA3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhBQ//RiXA/kNwOm8tMcSkn9gI5hMccvk+/XTxI/mez3sc+K2z8Cjw\r\n24uWrd0Ue3bcBlSwVXLKB25hjb8h+b3cetTOEg//CUneoGs3lLYZUHQgaZqI\r\n/qReN0yCFzy77tzF+e5UmOwhIRKV6bMPhQBAIHLNV3uwlVrSkUG1AyIB17QV\r\n8+xhCnxLwTvpxlxP6pklrE5DTKVHgsNkIl7xFGZdXPBcRDJss9TgZ/+nake1\r\nOBFY2Pkn9GC+n7WR7YLGJIUKdMsxa8EDTTt9c1voCb1DooEwz2T/9EiuP3PH\r\n9KfKqsbfcgAFcIweTGSJZkenBLJAAOfFYdVNIHS0zaCyIAUHRuvX/9h+GshI\r\nEIdTv6dReHpo1/i6qfe568vJOv0nMG9faT+kC3kOKdWYZ8um4IsKyjhl6lU9\r\nExP+KwtKBJ4VpL2iTGgkERO3vYH3qUDOi/xXq2SkcDyPJFSh6Wo6RzuCJKN7\r\n1YZpQYF6Gk5yOpey17LX1zsH2oRnDxn9ZWyBR+6SZ9D2WoC18t8kWeWRgNdV\r\nYL4BX4aUb4ty2GB6RR1rq7FD7LdA8jb8kJ73OdKo5uSfYYTz6b34puBwI1pw\r\n2NMLSZ2SW/8gsb3X0H5NfAoM1HPQXiZk7JYKxnh1nqbFg5KzQ0woZQsgBcll\r\nz+dzNr+k2nBthUuj5pYiOsrdrsQs+wkLFwk=\r\n=ukZN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICA48d6TqGw+E6KGn/vt/Yk/yCdHvSJDlpv8h0G6DmwLAiEAl0BBSqVpfFAtuXn5c6x1QNfvC4Yrhxkb+3ejdMwb9T0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0_1645133879445_0.6592798338900581"},"_hasShrinkwrap":false},"1.82.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.68.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"126a074ee13990a04a67e21838d7c4c965fcea52","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Otw2uNishMF2i3yDP1699j3WqKPPEC+ZW4MOVlTFsV0jn8Wvm6b58vCm8vhpML3CRDzuNBEVRwyiiXhPhHKxKQ==","shasum":"6b57897f69e02a135db2067d02cb74da54f4fadc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0.tgz","fileCount":904,"unpackedSize":2469587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDsHrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrREg//VK1iXTEoEkXdlriKSBp/xfY+p82R3MruQpH+OIM2vsBDidoy\r\n1XNr074OkyTy4vmVQXAplUUlew/ktPAzNuhYMrqtTUM+/Eb+rD3gVquEjelg\r\nqxnjFE+1kcVxwk0lGLqUEQX+7gk0CIyQZ/1/bOp9N9xLZvVW4hlJgHP4NZMS\r\naOy9xKAwdhAW1A16bPw2VVJQvghNA/yBbQUchVxyLo5lVdgiKxyxsbgF7nYg\r\nOH0OYPJbsXGq+0WK8d5qmUYntnniAS5HscmiqZs2Cv4K3mhN11HxRMGDj8oU\r\noFzg0FGlq3+mcad2hYgzkvO1k4atCEHDUpN289kTL1P/y2tD/sjpe2+w01/7\r\nFV/q0LsAur5e/DbZUgOUrIBjABBXy5CMFG42Jz2zbrLyCFtJmqWcGwvriUSy\r\nzQ7Ck0NjIU+NPt+yNdRdOiENhcq39wsrFcFJXotFlf1f34h8uX9HDK5EizFN\r\nmtKkLSBX+REYPvO7JozC2Zc1/1eCTjp1M6FU4wfQYxDUiFAt/H/7V+13rKRi\r\nuf+97lNb7Azu5D5vsZbNDGb7uWvqSLQxBM9hAJ5Pfz4grL8m8AtJL75f6pvT\r\nGGbdSl0OCUuczszNEtL1BSxR50TArcI7q38wkqFwImvHx5GVCFOTd0bnWvYx\r\ny18WUNtAJhVB6I51KgVCDjPelzYgjB6LYUg=\r\n=gmks\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYMaJR5cJfg8CHjSLmzzVCvnS0qUrKvNvss5WfZeIfJAiEArX8K2+g0WJgmliuinb0/Pt6Fqt6roE1im9BlpshjFLE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0_1645134315473_0.5805332912246308"},"_hasShrinkwrap":false},"1.82.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.68.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f6576c5a71b64869dd470474b42746a093de6ae8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-KDpBmjV694ivYiuL2VkRYjt3NnuLwelTpf+R92K/fjjD1zsHn7a8BmXdAnMJG2LJy3VwrieUAveU7Ep4giO5vg==","shasum":"e4ad5c8cf54000e780f3bf1230a449e5d140ecd3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0.tgz","fileCount":904,"unpackedSize":2469587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDsKUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtBxAAi8SsfovegkMbPIwdu+nj+oUp5EfUHPxh7cTVQUjWN+EOhxrW\r\ndP6zmo2kyPrLpzHS/+CNkoyr6Eqm05sK9GV5NoRWyq1zQjo1ugYSWcdoMaSr\r\nRcL648EtHb1eBbZwcTpbZyovRQJBB6HlY1Fswv2u6pz+dSAl7RW9qYIzWI5h\r\n+tpWvN+whlR/8Wg3EaMMyug19to62aOwSj1Y5bpY6w9BWcTtarMbxQ0IFRwH\r\neg2RG0k+1IJy9JIMdkRzqItiy9Cj313nXt6mlofPpVVX7OVU6hy1xhcLWphC\r\no5iUZinx4xZ8Rk+YRoNqBkQVrejx8rMx2QQhcCe0wDxoSnaQaYMlzHjwJlVy\r\nhB9Jj711fu8BZhO+thi31iz91zaviHzfEJ8E+y4+0Obg4B66uOPleWJUkuHH\r\nDkopK/kI8E8Yx4CoNbIOkaiqO9ukt0PCD2uNADc/l/S3DfnE9rCBr+Lluoeu\r\noKCBR6+rNUAOWHEvbVYHzsy1+eLa/xykSeSaHkYI0dG9DK5M+deNrP+T5b5O\r\nnCYeyZMh/TrEdzLDpUI1AY/o6YrHUhKWiDBCejHpVCvqseCPNidaAyxZ27f+\r\ni9dhWNi9PdqI7YiokP6/caQPIkWqIx/U1oI2vTAQ7aTgCQYIRP6GcorSG2vQ\r\nvjpZIfsE1m3wP6r7MiompV6puii57lKwsRA=\r\n=yaXS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8YbLMmEu7t5VjtIq71EgvmT5x46SKJ0hPk6TXn3snOgIgbCbuZkqaUcS+F03Q/DZRrQ6PZlgVKGlZrrhUD19te00="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0_1645134484409_0.4411251222195496"},"_hasShrinkwrap":false},"1.82.0-canary.1075.80d245bc11860c01e312048444f4eec86dfb3a20.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0-canary.1075.80d245bc11860c01e312048444f4eec86dfb3a20.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.67.5","@sberdevices/plasma-sb-utils":"0.48.4","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"80d245bc11860c01e312048444f4eec86dfb3a20","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0-canary.1075.80d245bc11860c01e312048444f4eec86dfb3a20.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-bMHRwZDi39BH+4uFPxNnu1tR4rW7N/uiYXn5PGknAD4XBj7I4LMwqwQubUaA0wectaHYnZhPoCVt3lRL4I5JYQ==","shasum":"b408b89f669b8ad5a3edfaca5eb0ca673a265db3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0-canary.1075.80d245bc11860c01e312048444f4eec86dfb3a20.0.tgz","fileCount":904,"unpackedSize":2473490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDzxMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu3g/+MFwMmFyEvBsdZDE4m98q8aKuzH0V3npmpPkA+npuGT5uUfxf\r\n508F4t176N1sO/P4/nLarjD1EI/3M9QieB/SxXmR36G8sRE7MbcJGn7YF3a7\r\nP5HjQfGNxCx362NeTyy7AAhMQqD7x9ISV0vTGB/Unn5PbDZdx9iemzjs6/6I\r\n91GIZ6/c0i+gyPMObp06AY8BaerKKu1tYp0UN1gA649zbjIzNnY5SahGCKUE\r\nRsuMFPHUCpfbsBQWxwzby2msr1qCH7xHFRgE7Zq9+0gBjwGM7NNSkgZURmD4\r\nVzlLLBQG2HN6xXu9VlfjoQWTnh05BDG0+DRyM+V53hXv3Ca2YRjrIkNsUw5Z\r\ni8gNMghlSrFicrXNwf1EZwQ0zckS9Fjvvqn+Cx9TwdPOr3ni4TjdMcNrur4F\r\nvmA8ScpXQCCwvLGMl+rOcNsodvF6/TBXyyKggOH5CRivgjFEdU4sYUc9Zq7u\r\nTD7lKeuoaf8euVz2iyWdx6isNhPn03UbTcolIE/NTZ6lIT9Pj6o123G3Df52\r\nN0Yszj7Nr053mJ9d588IbhXUnN7AKfHpTTK+5sua5JfExTsW1vADPTTICDzO\r\n4OduXsCPrlD+EdpfJpDSOCt0cjQ+mnW3CzYHKixCisu4fJSh3zGhdZP1oAkI\r\niWX5BFvr3XNcV13fqpDFx7QipBjybqUhzkE=\r\n=9hc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEen9PK99nknZkAOCRRmMsE9YDHkGxVRHlTFyEYn7HfqAiEAhFUIR8rOAxF162DsB6ZuB+k5IWTr/UAjLYwA8MlbMo8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0-canary.1075.80d245bc11860c01e312048444f4eec86dfb3a20.0_1645165644334_0.7254853720015164"},"_hasShrinkwrap":false},"1.82.0":{"name":"@sberdevices/plasma-ui","version":"1.82.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.4","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.4","@sberdevices/plasma-icons":"1.67.5","@sberdevices/plasma-sb-utils":"0.48.4","@sberdevices/plasma-tokens":"1.15.2","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"29d2b70a3aba20d2e38607b96649200de8eaf5ed","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-TJlpG643PFx7UicI54i0QimofrMwtprlOGr+K0mOxyoAJ/8ZFT7/uYod6ygNLVj1EO8QzHQ/tgWgbe5i5f2exw==","shasum":"d5b6853c6dca15ad0f1e3beeee35056f9383825b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.0.tgz","fileCount":904,"unpackedSize":2473867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD0f1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm7w//WLGSpcBv00qoVcnBYoHrtnMu13m+8u8E+Qth/kGOtQp8qjQJ\r\nvS3XOHByOdN8FGvMI4qt9ynQOmTyAiUYfjKCgrkgWuy9eWqmhNyMUgvbSYd/\r\ndt/jwz3K9+D2CY3wQsoljrWI9/mbMXNICsyxUZssvbLFk5f5i2ku+04lvYbc\r\nhPn7vHLYJ0BBe8ajNkDgNkYzUbQBse2VvAN4gugNoKXG7lJoSMamwZtnu5cC\r\nHowNBzXMnrYD08o3UXNRvmCFs7X2qYXp+vM22NauZEpE+8rchj20EYw3+nML\r\n704/9Uw2lrTBOvyCZI+NUMW7WFwsHR9VFGpmhXshu3q17Im+89VCVzTB2AJ8\r\n/Kz828P5LTMxX6jGzNTVAIyub9ZD79TwPcCdshtfXD/+j19N5POqWkVuP2qB\r\nMsLva7Ty2kqRXz6dA38VRk1JTvC20R8JqJpkddIHeUSs/NeaDbA6IJzzp/Ae\r\nZHhO7A9deQxlfs/saQ6yRbbFpmHCE+wsVNmluHjKalsayAV/IVcN0PcFB2u+\r\nCL4FpUT57E7/gEbXnmeOJS3VVVxF2t1/eZ/wpih5ztIPHXK2WxP/hHnxFj1y\r\n6e0hxMhHLd71agty2ZzUUKuPeS4MPJLSh9b36IYzB55cVu1y2pouWl9FMSct\r\nr890iajYp1VoutH9eDFdLeT2+K/os8ML0+M=\r\n=nlnD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiKSNVwlfa9yBxEX/Igs0s3ugyvLEoOHC4qxJM1FYO3gIgb/zZqnDpkc3ky0OsDqswtzZ41DzueZSEsYsXttZlyrA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.0_1645168629029_0.7126590245396016"},"_hasShrinkwrap":false},"1.82.1-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0":{"name":"@sberdevices/plasma-ui","version":"1.82.1-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","@sberdevices/plasma-icons":"1.67.6-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","@sberdevices/plasma-sb-utils":"0.48.5-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","@sberdevices/plasma-tokens":"1.15.3-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c4874ab89f4285777d721759d5db59584fa3b736","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.1-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-pRmXGudettMa8L2jGZ15AibhINAtybFiG6y0eiyJi7i5TmkumhdK3uaXLXvjSVjwx51fyH/kvg5gXiR9XYB7mA==","shasum":"f32546e78c8a7f40a3728620a1def3f2d4b826df","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.1-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0.tgz","fileCount":904,"unpackedSize":2474197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD3vQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreXg/9HIxDqo3cOvZJoyzjbQy0DKQQq3ZCVPkNBIn4Cd1PECUVDTz9\r\nmLC/IGUR3Uqe0RvOE7eZ/PaMAFeFeuO/6FzZK80bDquSGddF4lQLu/Eu+0gR\r\nfQjoMqMtsJohOE/D5sbp9FNV0Rn7ygqGIa8qF3MFs8hW5iHxCuLan4r3p9G3\r\n5UgaZ7g/CRFpAkxtzLSfJ9wDJuqb8rQH+lZ0uZs/SBzMGuvsUcg/LFwtxl0B\r\nRUygUM/dAYQxVPj+Wni3tjxznWrl0QKnkke3RXS2ojL25pnwdcRUv7pxDygF\r\nZis49sGVakJrtIU2Jnj063iV3mAPL2QusRQxbdg5TOJBZrvQTYGsSBsYcYvj\r\nKOUXzxaLnnvSamMCF9qXAbf0nYsDRNnQGlPRVinTbQCG2Oz/KWZzmOClAnOt\r\nyY1GjiAwT+m8qgRFdlsf0bBeo3797nfJCxScBCGxOOzHKa5NBbleiq8Wjiwt\r\njrEdHoPDL3999rxGPM1F+xJpm/r7925wNTfhFh9+ygI2Vwb/D7akU57gbGXr\r\nUNA3JwFoMTDE9a15Jn2I04/N4DIdyenhs72xwq/F3Vgjg6wt78xP0vPBTuho\r\nrnzsWPq+mXwvz1ZmXfyaWjDZg+18RMaYD9yWybG4TSxpCmtOw6zsjoT7sxM5\r\njddp2Auah/DSFO2KfT2pRlVNkcUt2M1h5/0=\r\n=5ehX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpAw0LlvSV+sSsL6lqfYiTDPB3Vty0eQt1rmeGuvTSiAiBeyBpXxjLNUq6C97cVk8YSFCQM2lTa24DZAbeunc25gw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.1-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0_1645181904307_0.8396731682529213"},"_hasShrinkwrap":false},"1.82.1":{"name":"@sberdevices/plasma-ui","version":"1.82.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.6","@sberdevices/plasma-sb-utils":"0.48.5","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c2db11758fe173bf85d32981be5b15a534cd288f","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.1","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-gJKxR6Yb9hZLdSdZPt6AHGChirNayzSB/0w1fkEsNEoZxPCpVtjK5kUtURdjVUJMRLE7QTIgzn5hYbXSwOs9Vg==","shasum":"0d1c5df352ad43570d37e1588544bfd7de811240","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.1.tgz","fileCount":904,"unpackedSize":2473867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD4UFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH8Q/+LrDsLJBvZ5hEZqM91xUx5rWm4X0TfPvwEHReWZM59tsQKw6l\r\nom/PC4/VHPOHz/4ypwNqg8NU8mtaH/ZLnKafO9t5jt4Z4opw9r7npglb7jjC\r\nUdfhhjTwpfyuC9eyD/oUEmJSgMc2BEutMQ6Yu98cQy+mbNiTAwf914dpipfy\r\n4+Uo89xbgCv8t5HnZ5E9vMqVr+3FeabXjJnwifBUJHQj8sPbU+CrtffTL04r\r\n2JFMG/WFItW6utjXVNcWTelHGLjDdZq2QavcubbRM6/wmKjfZrOqzZiFuSel\r\nImot9ojUOUFqsUjlwPT5VMgzY9Ofh2RrkHZ1gxQqgTw7fmwMTPDOsldSh4Qj\r\n3PkEvrP31yNGQwrlwjgjzJw1JQSrNoJHqlHWbfukVZ73fEXtGBHiA4p8uzch\r\nTge9NlIQVb1BU0JAinKw0TtGOa1EAYEPfPZ3To5ZVpMzXyeHtD8kVy59TVxU\r\nhrVsWUWSQNKql6gV1ly7sBbcJOixKzUr8zDhlCDruqhfUlWT0B3g/XfFIXoX\r\nuk+IsF/h5RTujmr7eDPWXUcnL0mZpVnx9vC3gnkFu5My5uw7CYyQmUKk8wHr\r\noPyoTZf5NmA/MlhjL8i7oYwvTgqtnucP2w2mHYxAHu/JjULc1wHtt31I3lDB\r\nZOAEO9cKJJTw7PxVGfyqkAvk7ceGNoismXQ=\r\n=6gYM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDK6ZvtEsNKym7yXn+hjNcPf2dlxC+KSLfDxpg4nhOAAAiBUlqR56yQNpSmx+QmRxGQmL5/Kvrgy5AK3Zdzl6N4IkA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.1_1645184261314_0.8412269959064917"},"_hasShrinkwrap":false},"1.83.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","@sberdevices/plasma-icons":"1.68.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","@sberdevices/plasma-tokens":"1.16.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"53b28dfdb2e047b4692cb3fdc75bc03f7874eab5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-+FpaOBmyBObOY+4XTj/l4Mnaspj9mXTJnZymzhnyhI8gofaugVve0CtTx42c/WYA7UIjW6sUFaoO0sfiXGiG1Q==","shasum":"5c187d75f7101601e388b6d8a2b2a6cee736b663","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0.tgz","fileCount":904,"unpackedSize":2474197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD6ZjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo2w//XHI/bnOKE2LGy8J+B96CRUPVGlyTugnbAiq3DshLEveSojHB\r\ngDuz0ONuF6DulNhsIYHCYhdUGd7u6gfJnYVfJaGTaktgGfiK9RGXJob9q9Tz\r\nW30nXsXjSiLdImiriwBQhKi8cb4M9WDChdxW5XpmoPI3FXkhdrNf/2OhKULY\r\nSNFl1HChx4lw66+/wEoY4J7vBY6JLLvmY9/B6tsaiRFXUs39wrgcMDh7JhHP\r\nwNnyBJbTVsLBYbdzrEGPpo9lQvis2bbb7ZpAQ3dy8Q45iOOanF9PRQO+E7Sl\r\nRjjdw0VEwSJ6jMIuSYLlyuSu093QsFDudxpT9CnRi8MQFebHljoMACAg0T+P\r\nQuFSBKpl3WmePJh+ucbQ45hs2JGDyRAE1Oovj1FnY/gfr0XHOprvq/7eNXWu\r\nwm2Kt25CdaIKG21S829b2UvkUWsoIpcXtjeYXqTMEap670f7c67jKCO16CC2\r\nSKY93JuFffoA8Rkv10c8rhYzWREqMo0pnNXn2wdzdwIDf8ETPxdDi1EBlo3C\r\nnsF3vPBALKC0VPovykbXEdb9UtkndQwQSpx2GSFSSkvDkdLZ9e/4urbjF/G6\r\nnGLXb0Ovl6lOuLJUCkyc4jg16XCr6jacdfPaTPA3YqN5oQjBV7kDFC9vbd+h\r\nePm8rs2a2wOzBpwrvPXLr6qQV6RH8MAWXFU=\r\n=6dq/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGNixA3Qj1OWwLsQ0ESN6ISWsIlzZbJ7+L+0yZCkel6fAiEArEXUnk/uy+x2Wk98ReM0KbN7actkgs3nPIsCv+PwmII="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0_1645192802750_0.031432553328453405"},"_hasShrinkwrap":false},"1.83.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0","@sberdevices/plasma-icons":"1.68.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-mIN5kXTuJRG+8+1R2HL+VEdcJZ0ker8zElXtMrstn/c4/9QcFQBMmFxkvLt0jzoTu6ZzWOJXkro+QVJw94Ipsg==","shasum":"e04521bf7d0034de41fa4f48674c0291540ce3a3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0.tgz","fileCount":910,"unpackedSize":2488814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD7HuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnrA//bu5MwxPnzb+aCC4mLTnDyzpGXlkloL81OdZu9pnOlliSv/Xg\r\nlbSD0eaId028Rlw6jwLXRXlLW7Ptv2+ZdtHKIxoqYjy0tGI+ek+y+sQNy8AI\r\nqzoHayAw4ONkZk87jhH5GEUQ++r85XGkpdyePvUgxubKc2FyebZsQbn4nD7b\r\nw3VK1MIvkJGl+M8PTkejo5YIQKY0hse/Bqq6S7xc4LcXs9R55617ME+hodGm\r\nJ5lNcfTVNonwK4miSnceTm6LFIWrxKXpvoOkObfyDxS7W6tBrILcLHz1/F2f\r\nQrhV+IKDm3ZrmSouh7LhRW0yLm2if1YXwsSVe6QPg3L2rwxZqANLXITq6Qxj\r\niaJLlJeKWP97jU3dxSNyrOI3LadEpZeZV+KH17ZDAyrn2WaQP2c28IufWehK\r\n77X2vB6r3zS5eVttXQhoj7QxnEmjU472WCghWle+eE+D+G5Mt36w39nkvqpV\r\nZIIUZeFYLeZd+WrXv8RLX+/eZqEDf0+dOznHaIKxKX/GH+xhXZgPHmL3PWuk\r\nPrZRGxXcop++rIz0YPX4XE7GJjYcOcNwUSu4TRnf1FAmz1qycgBz180mC0VG\r\nNQVbtuAdY0hzmNqFAYoKY9SvqQZ/pNi7i8KkwcZlVQOBUOlZKSmDKtNllL+H\r\nSgqO+NXcyL+3LIentFNq8X6bZTNa2tBHDWE=\r\n=rUKw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaa7LT9565vvfjO5ZRXY/e8PhU/3g+spYu72oixwqtCQIgVjdk9ICwicrfQxM0EOYqXTaNrwhRK4KlmMG6NyG+cOU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0_1645195758431_0.48669351954905116"},"_hasShrinkwrap":false},"1.83.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c687b717b7e6e658929d31aee5b3e0b801491fe7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-PzC/LL4pboH71dFm/aTbFTsfkMgQvcHJwZ3OLLRWqvISDEyD9DiUiLKLBmw8zjyPB7BsGXNprizIkl7fGIdIfQ==","shasum":"735bb063e07f8f84e3ecf7e252e2a5bb3220ea02","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEmTqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3sg//Wwo3YfVL1mINu0MEQ7XIV4R8IH9Epg3QPt2TFz27BK+SKKkA\r\nqR5DUeYhYb0NZQz/gNhLvgLF+rsD+d+DFxz5zj8xIJRUP1xk423InzaDe8q/\r\nZNKnjAW8bpslEcpIyCYAwpguLU3Zgcmp7JdXy0JBTsL0sqL9A9mGIi2TaHzB\r\nlBj2y6676NudBtj9Zx2Pgwl5e4rWHjihXclyOArCWxwFS4qtkex5wDi1Urx2\r\nvcxlKKbkVLNUABekgjdhpHjrssWA205ELJtcbCjeSxi76PlP3XByacUpsvyK\r\nY1Xsfx4LjF2WMGWtUiBWCFsRSeIPFjGBrvYpmv3OxrVNrZNc50BOuH2DFjwM\r\nfT3mxKYpi3IRa0z6XkrcHzPfrP7WvC9hWjbuKjB6utxmcZBGvcYSJB8jXNrC\r\nKKQ0L716XqpDML9Aq+LX4QkH/Xk1xXCChgnpMpBFq1XRHWHE2bFNWCMgJFIx\r\n0uxG6U2GYJlj1FUtOtCgJ1sMspdef8U3oQn0vHeHLLnRLOe8nRfb3AHIDwxO\r\n0iHSkumBD594LxnvFaxfAZKt5e9MUlUFtB5uYnRZ3DIPxm4xoZlYxKx+k7ql\r\nlvce/SRroQ/3JAlEMfBYTN5t8y5Zbw3Wx7TCdLpzAKRz1qwBEYdg86wHjMsU\r\n74ltMb+gOwqpzVHupKr1cpMF+5q0R/pwB4Y=\r\n=QhYF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1xWWh5u2aGzylXgROfhfYQJNajBsA1yZHn/EcHYyL9AIgVpxMhYAyrswmzGMZpZ44q0Yc6bcmuxfJNiiez9XyCYw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0_1645372650726_0.8420076498049431"},"_hasShrinkwrap":false},"1.83.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"66eec31de992e2580d3c032f0aad8a3063e10d1b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-5hnucdkAJFL2aLmU8QDT62UpC3bzzKXNPrE5yPYdYIAV3xW0Yq6hlxGCXP4JsZxZJ4tX70v1+x2LiuZT4fNY+w==","shasum":"5ffd6bce16e2e6a7c6b54dd8e55ed90b5efca0bd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEm9mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNjg//ZLU0XOQJfutIjP0hi+nyfnjdNstFeC+yKDgpRiNJNFOlZY+k\r\n6AoWZK/HAE+ZffRz630A/kfekLpYPzjveEce5rs6V3L3qihVilcBv3ZEZmFc\r\nK3GFj21es+L6AD17eVzHv1Ti9ODpf7hCSSfkidfwzrOMG4idNjoY2I78DAF8\r\nioYQD5btP2DYgDBnvMOuRWpY8sGYdvg/9NNA9qTb/drfcd+qO+o0kaYrmdK7\r\nG/ePnvm5RvXYC2Ku+v+cNjwM3X9lZsZ3vjHRnlzyCnY6tPjrI0m8lXVHGt9a\r\noiIUAsgIgSyXsdk05R3DFA2zdeSPq1/B5UTN6gSTAWESRsL1cB1YhL7wvlpv\r\n98Jfy3JV2CokgshSJS5RP6VhcB/iDgr2yR+FuLeNXCXzePgjo0GRRqZPbCs4\r\n3dvU/VB+b1JHb5B2GebF+Rvsmui4RgpcbBkGgAaj2CC3rxVzt3IkQEyV09O+\r\nZg7OhPvFWnjmRR6lQE9NDAFHcheaftxJG2byliV7I9CVPSNZqdWEeZBOkDvK\r\nesqRdYQsQxH9pSuBTQoYNPEWDvNYtTHVzbypP9FagVHyHZE+V4wDCrLLGxMm\r\nOIsgjod98MKjNQFS76OO5j6kfYa1Eqr57xSqLKTtuSkryFvRe7tprhzOJXre\r\ntD1cf5s+FO5u8feJfyJpto+Dyh4CMCIWd3A=\r\n=GPhJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1PGvm3DbygM/GNV6bfSEf3gsxEauQIJd4O9dZatisvgIgb/r1ZRRivzA1oZ6BX8/k3oH0n90UKAt4Y0sDkdNqZLA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0_1645375333992_0.8164033027303443"},"_hasShrinkwrap":false},"1.83.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7831390cf8163814f7c634741bb540ef9c50ce4a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-7lNeEdnBUChIlB5jc3H5+J2OGHcfN3Bhboy8xMyrO9zEi51fBNxq8+9yDXydlGuHIbhlKxubClQpNymcxBpTJQ==","shasum":"9ee0071be9bdbf043d2e0f55d5d9e319b6c9b38a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEnVkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5OQ/6A4j3aYR8a1mci+u9PTCQF91h6ER4t+Nfehw51UYseuw1NIr1\r\nyPIoSMgzX3tdwUjQd6TSega7tn/cagxofaNhXP8wg3sBFHMEljKb5iEbl4Hs\r\nkjlGO8awFdU96+fHEO8AYtpOCy96NonrYT9D5yFPk+Qvx4F9thryN/hsR3se\r\nt7lNIAyE7kqcCC72FHUtv7nlil64e+G7VnUcHJzpcZyFOrAKg/qq+BFRDACX\r\nvX5qpfgmrzEKQHEh/wTHx05ODD5hZSsiotmL30ZJDFRp0v3xEAjiCsAylbYn\r\n69QE7m+/3ol+kN/NwthifJe25LERQabP8booLJDJtz1hk8cqzdpjilhfHtWJ\r\npuUKSb/wpziuEbuVsHzXwrf/aXzW/9SGuDPLFbpO1/oGBaPJ9ENgsNceLgrE\r\ne9oyv+DsalWbVaShrG1bZB/F12AzFBYKuedJCDq0/zrZGS5Y+qwprUudrelR\r\nXGga32f+98dt+nf3UHw5SStaGvg43z+LoJgwbPXSVJ4K7oxYZuO8BTm0VJVH\r\nEibLBWqzUd6vfZ7bTwbnECha7eEu+i9yd/CLu30wcPEEuF/d85MHnDRQ3PLT\r\nfng1upfkXZ2G7CFKGDz69IPiQEx5Q+orq4H0nV+TqC6d2Z71gY62PKRAs0yP\r\n0oaC/0JteTWXY6dosrQkHOodEqPLqdIquCI=\r\n=QlV2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWMf7MAnuG420B08UUGhFYDtHPxurXEwtsV7/dXHxQLQIgdND7DtI8InqqVvGTGlG1QcpwhPUsoJ0XK+M5qu5ZOD4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0_1645376867959_0.2809690886557934"},"_hasShrinkwrap":false},"1.83.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-xvy+XQW8/xinlTQdqF3hiLQYY+B90HTpVvw3znfeKwQEKnwNrOKmOjg/+zt32kAfv+dg/fnkJRg0qi9c3k8IVg==","shasum":"2ddf788576edbc4285a263bd03dd80a62294b645","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEnWTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGUhAAloGUSu5Foprwda6XzLYSWUjN9KssqgyL7C1Cxydp1r3o1i8G\r\niYjy5rlki18op9aR8ENSas8b38OI49llt6fV//xsEbsH5n+9ldn0kkJB3fs7\r\nHYXGKK5CuPWCStpCLqbfiIWNEy/C+DuqvjCmqRyIQk1P30yJKi60hWCZZ7v0\r\n1+S9EY7AAkVsYd5LCEm8yzfoGeoB2bCsnSZ8ioDy32/JUYKx6kN1tBbcXtPH\r\nteh8FAt2Ng9Z4gYu6Cz21nIrkN8m/33yE3rGE1UyYjOQCCq5LH+bwPbu97OI\r\nfaD2rgTuhJmDDmfjcOdRNmn99Jow/+hhX9/R1EnpTTXQIEeiewkyXy+H1BKV\r\ny2WC2qdDH4eOOQVwfYr7xtnHiurvUeuCkE/nozi8vBqPkaJZP4Ig+dmBw79u\r\n7Km0cxgnFAF8Sq/soirmFZEwmh7DxnpaDBk67hvbI0hI0m4NFKv0x6IG2YcX\r\n7+IBLvcnVXivTB/L8WGNJ0z3Lcca67TWBY2Aqcgka76rChB7eIsOOI9o0Ia2\r\njKOzXzh3HWGVUfjr0frVL4ggMgRXXITi1Jo2nZRhQ2V9H3fafpgHAzACl+xA\r\nLulL4l732GDaoasP/UpSud5DeV+GNbfEONFTdI98L0sNts48uOAgP+7eUhjV\r\nw2kKzhaZfGxbBkygMnHoz9wMq91nV+/MOg0=\r\n=J7fL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDLI3OliTU+4tr5i2k4nJp/vEMLPeDXXRcfCGY8Gi3WQIhALgNU70gKjrPi8nJU5WzSaUbXrqhpJ2/ptqE9c896+I/"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0_1645376915072_0.48825099649234316"},"_hasShrinkwrap":false},"1.83.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","@sberdevices/plasma-icons":"1.68.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","@sberdevices/plasma-tokens":"1.16.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"103999b8d667fc9bb7eac350bc17ffb2313b1d17","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-+ZY5gvWOGcms3DYY8dwzPzMgCo/OvLWHC9/7w1PIIRiGRxVUfKxQy2JEV8JDpj79N2eo+EEPAzN3E9Zak4d3Xg==","shasum":"ee8f3c1655ad90fe1b0d527254d88b00e4fe120e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0.tgz","fileCount":904,"unpackedSize":2474197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEnlbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsNQ/+Ppv714ho2f8Ce3WRAzNgQ3dt7xbHJNEfyr7os0nuUpMxO3WT\r\nwJ2qoJZV7R9zPN+ugojI9GvgOazY+sy3dfmIcG3JioNifLESuyC9HJ/4zdrq\r\nF/r76u6GapZTT59M5LPRpy3R6expZhgOIME54KTuoM6To1MmVRlmlOvCkrOW\r\nL/vE3TzZZiqGoQbtqx1g6oucTZTfuSrE+fNDKk3Tk+nLo9kZw6PCMIhAq4Xs\r\nYojHI6cNaDHnEqDDMTdDwHRz6zDknAqvw0tpRbD/rZufPvENoTGuRXeuMAY4\r\nqwM7kFwRTO2uoV4tSHx5piAc4NlU7rKuXkjEv99ePZh0BH3DEI4HrPphhIbl\r\n97oisXMSiIbWKVcStSPNHG65rp78ZU6amtGUYsShGGa3DGN/lOlQscP17BLr\r\nU8luWSsNAq/rPWXkh5n9Oy96QThb6eRD3ZqoPgIOPzOGxfk7dRdVk9PRrvY1\r\nBfIRr2W9SFXHvz4/ZDbDfeZixNBw3c9VhvEXb3wM5Q8kzwLRRL/xpQNp7fsC\r\nuZIGnrzVcdaa9/bXYAuA2CnQK3/g5py3jYqVKxAeAQbn1Qz4ojVDUgtqJI6a\r\ngltdbFS/nEsOtCKVuCchm559salTKh7Z0WWZ9CcW8GzK4pArP3rM3qM974KH\r\nUAlP6ubTCJ2IAAzKOmimn20pjsq44Nj9eGg=\r\n=qdsX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6mlKOoVNb+HQYF3SGJrFQhmBIO2JAy8S3SE9fw75brAiEA7/V+4JqKPYVezIS3IHp/FAUVMLaBRM/cju2r5N9/l4M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0_1645377882869_0.4034879813631824"},"_hasShrinkwrap":false},"1.83.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b16b434c2ad57f52805e0507625a8b5e0a3a8d39","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-UO6W01QszvQ7jsOLdH9OM6Bz9KEJIAbTIP7pJYAs8NHoRRMb6/gBHIAciVfFYSCs61uj5yE97g74UPPQ/70VGA==","shasum":"d788855606d0f0c1c1acb67ddf0c2b12866d2ac4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEnt9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXoA/+O8174jd+IR4aFVTD1nLzCp1A21oWnK7kDM+DNgazF9MceOuG\r\niiX3zaMKbbuWnlM+ufsuPHwazLfBr1pAC+hOZyoX8Fz8aJQh/ZD9JyjHRHtt\r\nDtlxjuc1rnBqxl8wXeuJb+fb1vaFc5h/ykUpHi+nfGL/yV05vCCCm7F8nbbE\r\nmd/9NxqQ9pOiV/lfwWaebgSMibxKKitWyl7cWfpWQLWJpWFGEdseHG45ilLt\r\nJDoIpaF9qCbUZKWJwJ8LasNoNyY5kLNxXIbbO8HUrKbo++P4Bt3tOl0zTYWq\r\nEW+EU8LyyF+vCZiecQNJpNeTBPnQ3SMQSVmYpP9nyUHbw/YD5Yx90qms/59c\r\nuxi9fxztSMWuOOzd3ziZGOqX1smDdyry2QhdEgwgV2QHLXJjtjo1lIfgP6Zv\r\nB4gsQipuszy5wdtD29ut2EAgP4yZoCu8oFc3PAtPb5Ui3e79GhFrb8AGYf1/\r\ncyCtdumF5qkcxJEh2Eemf5kzsARlcnQwWW0I1eON+ELKClIhyLe+tbmJLeqc\r\naqDq4Y++7WLwELLBi21Pft721JWM2eL60MkWYSWTV2AS8+FV6hb8NCjics5f\r\nuJAtrjVEfTaJLESftT7pg3EHqZJ3fmnoR/Fhz4oqWiQ/X+2Od9Z2qBLKj7IL\r\nu3msvdZtSadWNsRj5F8xqeZ6miggdRRfU0o=\r\n=/TGc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJyAUTWn4H4ORtrAE/URichUWU7UXTpYWxH8qm7SMFvAiEAwHASar9VUr30/AYVToaqHE/sqhBoYDJLvysrDEQ7VHo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0_1645378429593_0.5203097577380762"},"_hasShrinkwrap":false},"1.83.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","@sberdevices/plasma-icons":"1.68.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","@sberdevices/plasma-tokens":"1.16.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e5e98edf231b3d5074920c63f323ed2060e5da5d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Vb4C6B3BxCfdQ2zpp3w+PYPYa/WhA01KMQh9cljS5qYdp+E6r4/ay56fUMdPQx2HnWAfGpYcSkUHnY/jf3NYUw==","shasum":"a4a0547403c50ae2bba6e1156a593a232cc51480","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0.tgz","fileCount":904,"unpackedSize":2474197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEnxrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobaA//STbVKi3BsYWeRf5wZn8ok/FGoIrwg8ZzCWx7uKlyCqzozHoM\r\nZBCSVWvMFm62QRl/0UfDJWCQpo4PA7ghG9VFNMiwGD1vcTyMG2vmi/Jro75e\r\n/rOSOuAlR5cRoBQVqxA1oc3kXhOqTxcZa1Z3Lrem9kz5K6BArorRw3RVx7Lt\r\nvE391MyOwVwmo3MDW7azFYac/anRO/AHfHWc+y9ue2ZxNyUPERbNB3MO1LZ3\r\nBfiJwcFXXgz/ma4Edae8rQuUOu5tTLbcjqjYrinTPt1Ujc1u+vdzWvI1iY5o\r\ngY2TloJQlbWr/tdw8KIJdUU4QQPRxqKf7LTTO2FJbcGE9dxvvTJxuL27OcdD\r\noqny0/YpJpMdyIZNJlFIKxbRXHWrkpp1IC1TMjK7EJXKfzJrVf859xxjv+qQ\r\nAFi1gFI6fxZ1rkLWBJE+71qZiSGaENTKBphx0kV0zEW8O0BHNDH/eJA0Mxxp\r\nXUNDgGS4MB040qAMU8830n7igC8tjn0KIYTIJ29DDVKCnIhWqQJ3krY6NMOU\r\nqoxVs6KNvXvG1iOOg6hqP8jYm6d7ngk12PdCUzQKpMtxqmbxuHwdsCFpkhok\r\nzr/juZQMzAovqJwDDPHMuj+WHUAY4sjcRl48cl5Yz0mJwljt6I6N9cMmnd0Z\r\ncIOYlyLEwRtV+m64QJ2tC0R89vT6vKcH38M=\r\n=SrGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBN4qgGogf1HCmcL3DAcEbAoXZKlEVuzew5HzXxsqR0JAiEA0a2SQIjrjnxpPohPKX4uEPCPIr+zhh1CqwBZkzjI1IA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0_1645378666806_0.42726259532286726"},"_hasShrinkwrap":false},"1.83.0-canary.1099.950339cfc1a8dd2b9136596494d003af570463ea.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1099.950339cfc1a8dd2b9136596494d003af570463ea.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.6","@sberdevices/plasma-sb-utils":"0.48.5","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch","typescript-coverage":"npx typescript-coverage-report"},"typeCoverage":{"ignoreFiles":["src/**/*component-test.tsx","src/**/*stories.tsx"],"atLeast":100},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"950339cfc1a8dd2b9136596494d003af570463ea","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1099.950339cfc1a8dd2b9136596494d003af570463ea.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-RP9wMV+jupKOmeHSfNd1JW7MIVfRQdM/qUcZn7QTK5CXBaIyEk45iWJrxxfqbqc6snjYT3hpq/tFMgyAnx17wQ==","shasum":"48d2b62cead23c600586537174faa27853c90b66","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1099.950339cfc1a8dd2b9136596494d003af570463ea.0.tgz","fileCount":904,"unpackedSize":2477430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEn/8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLOw/8Ca7ynCRTXQDsJdSPe4JMWjl7v3+lXlYmmXKlykQCfGxni19D\r\n9lAQZpslTYe73LGjGA9OJu1TpRei+dDmy0nuyfQGFl5FSBk0n095Ug65rgAT\r\n+PiNIPhGoAqW328jnu33ZYncjZJuCAX9FeG5vseu5Oc1mKq8Uuw/F1RQVh9B\r\nCmO0p8oMk9ZKM9jSFalHw+o8XBeDxS3LS4B6kk5OollSVwHDOrYqg5PXzupt\r\nBqlZG+1rW8Akd59boiQvpBXxiwMgguayPrO4MTIrutokNgPDlj0f1KqWbkxK\r\nrfG0WCvaCDUkG2CFLfOLdk9l6+JxKOoENN2KLgkHlUKq+sNhnD2fCenwNbD2\r\nFdN9MJ+BjxS+B9LrqK4WvE/Ccdns2ZQBTagSVcDl/NoZL4V/2/nUeE6Ujjk0\r\nujbeMbxMjx4aG4GGlqabrSjo26FdpSXsp3225+hoEdFW5o3JrX/UX8fop5v6\r\n2KA+PB6n0WSp4netjaco9nZrkOMKhM/7JZGdDzQWx4v4pZvJXVrqiuJxolzX\r\npbpfmnbWjKGBzFH79HNWhdUbSDwUBExsMv7uQ03hD+1gwpah7vABQlsCnJoZ\r\nSwlkwiqdg29DgtE4VINSNrIueDhX+ok4R4B+3SXo9b5PNkfgOmcbV7DgVGrC\r\nIelTgp/a2sQeKW6vbwKtvOAdE3ZKmg4i9lc=\r\n=6eia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnOf1riikHNhPYdVeYKQQnnW/hDvYd82yC3cTm0QiEGAiEAq+6Rs8l8FxZDlU/X3F1pu1pkaaRm9Ju7LaeUZ3ry4n8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1099.950339cfc1a8dd2b9136596494d003af570463ea.0_1645379579337_0.4315664802689336"},"_hasShrinkwrap":false},"1.83.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0","@sberdevices/plasma-icons":"1.68.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"52a5b7f1379831fa02b05dad43ecdcb6b9f49d80","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-78Y3X/cTlQuzIANyGLGYwHYsENm96iuWIEAE52pi3zvwdV9uVJPUmoQnZRWdYzKEQhapG+3OhhaBesbb6W/VOQ==","shasum":"4e89d07e04e8d9f88652a10bb5fce35ce2280d64","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0.tgz","fileCount":904,"unpackedSize":2474142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEoVyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmTg//TvEABwBP4voYxX9Jw4272nAV1ylcSTajP+sZHoZ++7SeUANt\r\nRWrL0TKiaAeCZEKbAsES4qpNI6ThthrMnVNjNVTlHAeKiWqcUgpFPQ0Qf32h\r\nAhtyZWOJjf3mPnhf7uu51CzSHHNF94XQYhKmgqI9s5m0D8yaVCkV0W6Ho0iP\r\nTk4nCoJgJ0d5rqEWO9FOJ44uiIkSfLAMyS1wT/bzC831GCyVRJlQDc2N4HKs\r\n27PX47wTObt10pJuALljXuoS4Ao3q2e+gP7URe/Q7IM+84Yn85wYuOXqXSbN\r\niqL9+7TDgqxms/PD74i/73wiR/LKvrGF731aCtQ/CdVVA0DoNb4vo3PdBR7B\r\nlMdzYfEe2E7vwsBIr2h+/ER8BFUG5aAjZbtZFg67ahwfV8vlemOEsGSdkVvt\r\n2Rh6PoM2dZk3NCQ3lJRjfyE35BYtmiztyV0iZUi77gug4Bhwk9tCBifjtU2B\r\nvRcmzAk+j1rkughW5xlZdJgwBzA7jA1hm13K+3ILR8/1/NDGn3CQTao/VfB8\r\nM8YuDnScNbtykd0iQvNyUxG12JF2OW1ORzXeDCsMG/heNpcuzi0C6equR52u\r\nVGIZqQQQFmzXqP4uthGqOg7GjvaHHKudRHBktpzOBzaWl6qRGUopIQgcx+Sn\r\nyUINxTTr9rCN6Giysh51c0BHrc5t0kHVjcg=\r\n=c0zo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1VKsyhHGAK+vA0nCn2DiHsX+grFr0SFCFv+3ZujcWmAiEA36xDR7u9W+loalwtHOogUP3QWvKg3lm9VS2LoZlxaxQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0_1645380978666_0.31376210607767696"},"_hasShrinkwrap":false},"1.82.2-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f831b445938d41b09534a11476c8f9d61acd7f9e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-sdPIOe2I5rHjqvNkWoSjqY+LL13/EASWk3GN3+uMFAP1KfhikWGMXWC3nsLfVfqjcCMTwj2zXFOAUCl2sCU/Kg==","shasum":"d48a84a597431e880d4f04f5b153b361b370f5fb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE2+lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXBxAAop2A4Cb+fpxAn9xp7kgFESzXNm+XnxtZ+nNxEgQan2fIlPkS\r\nJw8FzDJyRnPaQaeLLBH3vmPbggoi+FGhJ+uqFUsjLPQBTs0x+F9Or3SB76Bs\r\nmLDTxPEgxRt95LEASUulHKINYfclrRqb/CUY9sAqaIxj6dVPhBjg2wBDxSAo\r\n8VMA89kDXzPR4RTp6jTlseLSJdeG5Dqui7U1M4zTCuN92nAiMRsQ3bTyAfnK\r\n0Fi7nOuVgDqR4z1n4tK0QorKKG2ZYQx8HqoY6VpWZAixWHPQ5mvfW2PfnJwJ\r\n213ONaUXq0nPv6z+Od/REvcEtxTv4PZ0lMtFJQyEc4ytXZAcLkZGyemOpp4G\r\nmUAMi1OxEt5eRAlm+l8Uw2v6XxnlQTUiAF1iMnCRoQdGNdLmAGXzw/RN9EMX\r\n2Ng3A4nnK0iLg+LLfGI6JTY5c7Kt2PXpvLGljHXf4kEOSXW5/ZrRk7ElaIDc\r\nlV/tH5taXyQrKVFO7Oe8khpQcIZTdNFhf7WyD7CHR+mPmHDMrZ6iHn2dYL4V\r\n1MJaX1Q6vtrDlpqOGxru5qOU9hJ2aWeTAICG0zMBuyiqwx4Kk+faX1nC/kyF\r\njbqcF2Epk4l1LSDJkqCis6n51Y+mpoMXRfNblFcZpQzOLKq/zplT+Ry2qwTs\r\nfFfn9mZiM2fsE0Ml8hKzLF5evrcH0Qe4SEE=\r\n=R7F8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwTtBpjLZ9TOZ4gpZjI9AKaXa926A9duppC27bRCY9YAiA0ylFl2xvXstDivZfh6Xed7dyobytB7JkxeVDW2FOocg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0_1645440932938_0.7641517539235805"},"_hasShrinkwrap":false},"1.82.2-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2124c75fb35ec8286610d5a9f9efbba088fff086","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-pt6Tq+SevnOrUIfBMa8OFSf6GYrugJEjzsNGF/Gh0wMZRcOnvvVyQGxFBMnu0vu175+zWEM9msIpVwNWu9oIdw==","shasum":"fae765184b43ec2ece67473312ea9047e97e2c3a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE5nwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGPQ/+LlhIA/ITRG3PgPaHkN0xK9bru13LuRXEx6K9aKrPNyVtRxtm\r\nvHaR4worVnp4jVTkUWKraKHF8ytFidIopKCZRKC+Nzn88FsmNtubbxfZHKYb\r\nSlpSDF5Bidp5xwtaaw1ZN52+qzWwNOXuD0qzDI3kzbJIPsoiu3RKY8PnVPg2\r\nbSmfOl9PABMl5joPtz3+TRfDOooZ6i/lS+wfoMRJRct6bKEcYLmgyadafQKd\r\nkUfqOdLkc943vKNDqP/vXQHqD2HlHMGaJ4tmqAZM8YENu6OKVLZhs21hgGuJ\r\npI0C8boyd2ZRsFmno/7FL8R7rEfBPeFy5iwBqhDI0/Xirorp/aDFyRrcDasR\r\n5yQjDieCfGvkMd///vntp4rpndejM+WMeghRCiS6ZnuVu7S53VCd7i/xfoet\r\nkW8o3dKXiDtVxJ3QY//i23YRIQnLo6HW8a8gOuLm8uzt6SOJV1hVxWMfxgRu\r\nPZ82KgGpBByRDjLqZ8DuUPuPKVWLO2xVHutDKH3dg7Qgw4mSYpTyycuneH3h\r\nW/WToaYnH3Z034UEuJaOdp6oJOHvyylxpmHjTHBUe+vfqQ9wpFCrq37qrmQB\r\nAblG/jqgCqtzCqglVLNScrRA2XSsL/skuyxr9nnXV2GGhbqbqUybEWpJ/aX+\r\nmG8gyOzgYm9mu48vkTXhg1xH6Uy6cox04KI=\r\n=z5C8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfvvKkCvdEb7gVogSFt0f7m6gFJQd4mRGWkbNrkqlR9AiEA0jhngctMvzJClCAJR0oJT8VWy5u3UUNgGcJ0+gyqLxI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0_1645451759878_0.3072218147825063"},"_hasShrinkwrap":false},"1.82.2-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"432ea028216af3594cb8ad12c78f98b51b91d57a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-/v9k1yE46hP+XyVsgknnIPHbhywAS9M8RnRmd9/iN4AYylOv6+Truq+kUlJidN3GtnzWwRANUoEbB2vJtZf90A==","shasum":"5f3a4876c72385f9a6f73837ddda71ce2aecb9f0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE6EJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriWQ/+I5xAqvF63d1/ffBtxMwVNDgzzMjqDXgqQZrFc4FU+Tiswzrq\r\nOyGalrfDH4fb6hIwNP0qxC/TNtJ2Gf2Qluf9YkkFRAfoKCk+kN93k2WuTRhX\r\nVfuoogKWYNZpwdtOm2zvFX0kPALPC7FjrAiObZlYNGNFo7h8hNiX+l3SU+At\r\nKOwf4yIlTQdvGpgmho1HRkNWs5IGVW9sm9Ngb4Wemykraww3crBxmb8dK4vM\r\n38tRz98wkw9BeE6SvbmF9WbpYlEkw4/Hf3CdjGbLO/znHBTWE5AAHOj5z/hE\r\nFn8djHmQfNLFVUSuK2N7IvmWKGVq0dZc+bfCZ9RFBfks0/ZWdr1KALRvwDGm\r\n07oAg6L88LRXYiYWb4jJL/jKbWR1QSlK5ESjZYX99XM4LkWp5MI40+QWwMea\r\nZjInMWv+u/um7WImPXxDZvHbMgwL77OcU64d44cbC/UPVA9tvKeWfs+P1Ooo\r\nBRHp0HNk9TGkFO6I2x0NdlC1ERh0ZQWyVATf6kxI0NzkW0NjYnxIMch0taNM\r\nwMUE/vytahLR8CjCxowU121cFJNM9xFYsXbCb9o3CMxDVOPjjKBNO8lUAVVO\r\ni1PRiIJGY+G8azDkEDIAHQOs+uMjNz/YjVJLJarIDx/aftv2M55FbIT7asfN\r\n2M+li0UhBdwxgb2fyWipG7BTDKVW3el+bM8=\r\n=TvTy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAx/iUBi6zjlFfxXOzka7ec7cgR9n0O86QlotwWC1fmMAiEA64mihFxown2y4c+mKPTQoAtEUERoJmADKthY54RNytU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0_1645453577637_0.2392523855083568"},"_hasShrinkwrap":false},"1.83.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0","@sberdevices/plasma-icons":"1.68.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1f185a96872baf98c97b49813bdf32206af0d215","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Wkd9DZNI2u1dZsVsJ6Jh0bO1Yl4gX4NCe1hnyC0DPSDCoQY8soPrCJlc1enMZ5Yh/1CD44jVI6295UvtzWMAHA==","shasum":"4ebfb2d08c2604dba24f56b328a0db138d89fbb4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0.tgz","fileCount":904,"unpackedSize":2474142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE7+bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWTg/+Izp0LlIwDBT10VcpXgbWDOelN/00WCDx0dNrXKlL1l2GsWXI\r\n6dAhjO6hbojQ0m8WymGnyvUTU8XaAvGKePrKOt3TiLb7/3tbvsXxmQjd5ZvS\r\nZVcRwrmuvDHw8H+XaKpSB3joRqRzCv6l/lQG4nwxpBb5fRY8ZdQHdCHQdu3a\r\n+X4F3o2PG5bvhtZAa17afKc+ENHt/ISFpJWQW8y5q8B29GXXf00YI+82q5Gp\r\nc4r7WDWqvp7b4+OQ1NcOYKGDjM+UgPNwHumxjcMa1oX+wbbNZPtW7iZj/RKS\r\noljTDcF377+nMOAYeD66U0mMjozaA+w7OeE94/s3a4lZbKzKa6U3i4sZGyHw\r\nEqBkaiJGTcBCUhJUx/6tmO3Ci8NMgiOL7mTIOgUs34TS3szy9Rxmq8uv9k7y\r\nAtzFmXZyRCozMvpUX/nQ+5yNPKbc5mgX5Q8stokcc7y2+9PooFxV9gGKapUU\r\nJcW9OVnVFCbgOt9THduJcqo86HVyqh+yIYJi1Dzym//rA5cGZ21EIc55xOz4\r\nIv0t1DB21e0505XU4KYjAxRREn67YC2X2hPu5xnwM5hPvdyyCdlmpoQH8GwW\r\nO9Cv3HZOx+Q6VjxV4qluGEg8mS3S12yFcnRV4tUHMgiLezpjOKBqOtuwGRYx\r\nzM5V1laQDZ3gj8isPr+/wYiTXSlO61U+iWs=\r\n=7ejr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqwRi7FprlmYuHSbdYn4VjvcLet4QViCx8EphipG6fJQIhAOA5QabVWGw6mkQVjge0oM4kidTchiuGumeWrZ14H6BE"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0_1645461403020_0.7129330137003997"},"_hasShrinkwrap":false},"1.83.0-canary.1099.86a7bb4fb5e97b43bafe6743c81d7e8c74413928.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1099.86a7bb4fb5e97b43bafe6743c81d7e8c74413928.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.6","@sberdevices/plasma-sb-utils":"0.48.5","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch","typescript-coverage":"npx typescript-coverage-report"},"typeCoverage":{"ignoreFiles":["src/**/*component-test.tsx","src/**/*stories.tsx"],"atLeast":100},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"86a7bb4fb5e97b43bafe6743c81d7e8c74413928","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1099.86a7bb4fb5e97b43bafe6743c81d7e8c74413928.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-2dULpXSm/QZu2OKqc8bsh6HeSN4YRC+PRNKmMxTuqA11whbVm+cMV2bSG11bUSG6eiHoGqAylnJoidyZ3PDibg==","shasum":"698cdfbea6852d679ef99ba1a7f17261bf9c4f1a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1099.86a7bb4fb5e97b43bafe6743c81d7e8c74413928.0.tgz","fileCount":904,"unpackedSize":2477430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE8K5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0EQ/+Nn0xKCY+lquKIumKA1QJBgAbE1ckzPCYM1mNVjiDhFoJBSHT\r\n7ZwPOGjhYYiKrUmvZHx9JqyA8RwG19NSkMYSEPiITRcQ7LHOxc812WHihxiI\r\niF4drx8gNJHe3Q1fsIQ/Hf3lmlGVJu8k0gdVwRNTZb6w+GwdW5npUFNDV5hz\r\nFPmhM45miVcxOap2w4Zrm1jfASsvOFM5lKkwMQErH/mXr5OiEBUrP1oo8XBG\r\n+NN8xVjwKkIb1VFevSmOlC3r2m7s+3/AzQlu+C2XuXuy4u9nEbuw02HjLrTy\r\nsVNnk+HCtshMOkxZUfm6uOWUJEGt01RBHSZ7nrIsPCOpItB63VrMI4h2IA95\r\nz/OlalXxKJ8ODmSsE6whmr5sHABB1IOz+/s6k7AW/aKGZnmOyY0WgFTqVbJT\r\npIfzM6cncyM+HzP8hb/oqS7y0m+WwQAyCIdisyjAag5m+ibm1te8drjapYu5\r\nzE27uHPaEJV965m0zn6sXQrM//l6ajnFaVzC3uQLSdcU2MXX9kfj/Zt+mMZc\r\njXQ41PhyIQ6lgQ7KQMG1RCLXRtujifonKNZVTbgq1+uW7Ds1wNO/9AQQSmli\r\n1SDiPJYclCcGB8CpwRwAlEaony3B5TsfTT54IN6CgnWqQalkT52rEesZb8XC\r\nNYk8nb3VlbWBTkjzWdC9IZ6W8Amz/qtPJOo=\r\n=aiQO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQbETXYT2d4IFIfJaUDRyMMpURkVI0mqtxsa5CzD/PNAiEAs7gB8tUyqoi7eNzuGhfQt6VPXESg4ursktPJPq5cInQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1099.86a7bb4fb5e97b43bafe6743c81d7e8c74413928.0_1645462201189_0.46408618006957836"},"_hasShrinkwrap":false},"1.83.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e78215a8f5b9f268cf9c3f3e81f66153aad8eefa","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ldLCGj4/RAx3c9RjSx3GqOjLFPpafgZC/8hsJXVeMYEJ1rz4a0k4c++TghkRpQsVWWL+28EPvJOawHEHPSIyNw==","shasum":"0b026dc9bd8f50fdbd8d50a64313ea3ecc25c66a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE8bOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUpw/8CwiHHNEM8c+aRWeOlOgeFS4n/sLVoDUr+6z7VQECBXin/li0\r\nprXlfOa/RKCotdKMZga6z7w6Ok1itwEsaxUBLgL64QdYRGX6P1iLDYINaSvL\r\n2d8gAtjD7d21y8s8FwuE+CnysFstI+pspHX+ntpKfEoTG1wXrvnz66RoJoC0\r\nDLQy2uB4yNBVzGKk/Vbo4ejC0in6dhVq5V3RnXmC8CHdnNPqsb6aX4ho/1a6\r\nivZqrur24H+jArkcoMX1vXs2lRym6cGuIrn3o1Re78vuKhbunZzisLaDkozX\r\niBzgrk4uNGd6le1S2vuYMUHpharXLD/aFIuhOSwmnYjQmO73/4FLtb3VQ244\r\nWWku9tQJ8HfYVvctoTsj3sPUFiC3nvs2cBtCQA3ojjC/lxYlbx++inAadEL9\r\nET2AsMWeXGJzhoGzmyYjQgWD3Ji29yV6z37Od4vM/q2MG7d2aE212vtY5fgB\r\nQC6hu3JT1ld89fKgJrdF8vvqk5UVhKsM7hhc6NgYGILA0mwUY7q3ioKcgTNo\r\nkvqsEunEnC/7yYnrAYHtKR8RglE9zA18F0HgmlRTNsg24Fv27va0hXQ9qlaC\r\n0i9/q6OH1T19jQQd2YryBbNA3HQR1Rf4DKZEaN9GWiSrwc3xpWcD8+Sdfrj9\r\nsIQasWKqeYWKR2tqD7p40zp6s+LWUrrJAig=\r\n=//a7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+ITiDw/g6FrPw+rgqDJXKO9bFzH7jahASLm75kW8fCQIhAJb7EWAsEs0hFnbk4d1YyHWqCpHKNKSHjJ9hJyJsTNsY"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0_1645463246317_0.3299786727763052"},"_hasShrinkwrap":false},"1.83.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","@sberdevices/plasma-icons":"1.68.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","@sberdevices/plasma-tokens":"1.16.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8ad43dede2b75a5c85f80def2f0420774b7fb7db","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-tnJ8KHmEsoFyiTZb3LvEDz1JA8B5aLYAUr13JbDWi9svpt9LM68K2vW0255uUgjC5RL5y2Xd0KR2GkFwnPc6/g==","shasum":"d87619879d345d877fcf533fcb45b53f531f2eb6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0.tgz","fileCount":904,"unpackedSize":2474197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE8ouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2aQ/+Ptk/Kwtz/D3JayYS6+hLK9ao38RffiWbl4JsCMHEtOWEFzwq\r\n7A6rSDiNRzdP/+nWirswc7pgr1xtzlODBcgHDndif+l+I4Vqiqn0mdU7m3Q6\r\nXd809guT5mpPdtN2NHKEV6vxvQV7e5DBobNV4R548NjH+RwhRYZ70GD/eeN1\r\nY65jFXsdaVyX9WiRHHyTIXM2U8rijqPtcZbBzOnqoiMjbGZHlW4h155lU1Ll\r\nzT5W3IGah10GDyu/KidDVyLwA7oJEBGgT8WZhVYjDCqX1BdNYH/YX6w1BlBv\r\n45KMIDFkRMgK54QnVziUDdbV9KRmCJNCVoMldjI4GPjYyHL2EpnZyPn6JxcZ\r\nbI1Iz9gYMCVuRYaPm2E9eTbI739F5yrib5yP9inaptdqHMNY7h5LuFPjxGw+\r\n3waHgQ5Lfhp4CJaGfeGJUki8DxjQiVfuxiG6KiK6gyo0anVPYhQ98dv8WMT+\r\nFAJ7BObMotKRS2pNC20rH7isWWK1fLXW4VqXrJMeOUt/ILsrFvzt+3ikhG8q\r\nRjUf6anYYer+Wy60nvlcYSkArIsF7SeGNyRrfiiyKjYiACiFxVjdEVPssP3G\r\nHoXoD2DVbgXXzIiKZs+UAg1obHjmKj5NlbyRJpLc0h0e3RcsE5JSZTriZUQa\r\nxzC5YddhtS36jO+WBVUgb7TV9EjAl+Mul/k=\r\n=QXaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAufLy9MylM6cp6K52pzZUK42F0FTNe2QlSMeyk+/3lmAiEAtEvJ2msUppN+teFI9n9xc2QnWd0zamGRI9K23Vr/trs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0_1645464109972_0.7894566644577077"},"_hasShrinkwrap":false},"1.82.2-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b6b38cc49462a516b4acf03d6b7a9b0a6f91280a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-OwIONkz6uHN8uSLzddcng9iohSXMlDsBBFRNRToYtHD9QAWUe1dy3EJKk3wxnL/36d8up6HDhK3iBRo4+hTTGg==","shasum":"49f0a696b9d353febfb95ab6470683968ef10613","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0.tgz","fileCount":904,"unpackedSize":2475818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFJT/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMrg//RtUMRHY0ibaBnw7qoWE1T/LA+ubgB3o1fUuiWaeAjxLyKs5S\r\nif9mf/QLgKBbAXR8HNLI8kufCi3zyQdQ34vTIQ7Dx7ynpEZa1fHbw5gMPXCa\r\nmCDKGsWlAy3kcApABhlOZBegrViJoB8bxzhlA8HbhLDP+iyEqHCG5AhBw5gB\r\n8wo7/KHxyO8b1W5Ksp5qmFs1r3Z/I3BBG2NpTfiUJxu3mJ+8alOUhnihvoDu\r\n/Lh1FFq9++p4Fd6tMMlBUjhykHJQsXigm6pqVNLFGLM+0vHOqMn+dH7PeSBo\r\nEl6yiijUz8WPH8LkjXPdJPoJMNjb/Mh7vt8SgS3Nqp7c/8bgojjfTJ/sQZ5c\r\nKWu/LCsAnNCJT+1auNMGBIrBRsRtCbhBERG2y7k7gBqRKhoprArpWXSnTu0+\r\nqPeL/rCUxziT30j9zAYH5z4Tc3he4dYLvKOFLm0rVykpMg4ItpJB0Jtug2Qv\r\nwQoFxqZ4OZdDb70yj3WbZQkfYlZSG1bxBBchgHZ52FPvVmV7MwSWiK43ISVj\r\nys5nX5MckLqvoPmaoCzV5xLVJam8uvKDajb4t57O3IGx+/ddrZTi9HNWh15j\r\n/vftZJtewZkysPQLYQ7Rrhc5jsH6fsPvb0qQw5/1WBMTHujhs1ONWZQjJdTh\r\njiO1oL5mZbt1dNKtLcLzv3bqICc98p8Y9u8=\r\n=F+IV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9LAwRNARN9zOFJdLNDohxJYlF4kMPxMlxGLXghXB62gIhAPtmeZBwPjmBOpxglVo21cBu+l7fm8ACL6CjEacxWSCa"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0_1645516031685_0.44971922118501095"},"_hasShrinkwrap":false},"1.83.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","@sberdevices/plasma-icons":"1.68.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","@sberdevices/plasma-tokens":"1.16.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ee10bbef179d76d259b8dd30b8bbfcf786aa110b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-/LR0qcATLtHXwAvlMJgdHcarTq5TtiDM9JAbR0qaGWjqDACyKipFii6zjXUyEsQi8ry56mwRlz79wFrCBrsFRg==","shasum":"5832c38951481ec7f680c9f8964096b9b4bdc3f8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0.tgz","fileCount":904,"unpackedSize":2474197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFJ/TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe1A/9HzrwRq4UFncn9MOp1zstawMOA1/IcM7xS0BuY/TdFDpN/tlK\r\nDMYlJ0Jk0Nv5+9XUp1bP35+sld7rDP4dwMXb2B+buW6dP94+pw+bqMADetf9\r\nl9tymquTyEe8jwLTO0RnTLzaLoCq6oCCbqRinOQ4+3b09Hfkd3DxBeWuUzKr\r\nt6usleuBmESE9FFJX42NB6LIVEHMo065XUg5PoTcdj0/TcVY656NqKW6yS0U\r\n2rEDRXzA8egFexEqIfyHzoiulAw9ix2jSdw/wWfGuWts4+FbshUtYXH1MiAy\r\nhFJ3awVww7FxvqfIHcH/XbPzYa/dTRqkTd+P8DC3vzNdqU1LXi5isl4aaeCu\r\nv14FzrUTPlpgZ2bqYHAST7Q5UPpygNy4hcAl+A0dtRIROh6kdoNCR+1J43vv\r\nzcmi2useiicvGWzAij21g/ryLEzlSB8LI2DhplSBNSaEc8IFLzWVlJDVDmo6\r\ncL9SB0ZLzCKSRMFWOOSu17xJ9DqORLNPcVxoywyVvuVy1xcOfQ17J1ODMtWG\r\nfVvC5mI8chEa006DnqfBIxIpDzXmv6vcjFQlnUeFvl8UA3Gz8jL1iCBP41JJ\r\nTNpMvlqMbMt5F8EFU88e0V8Nt12dngaMepNM8WCYe7P84WKWvjWkRvEkWDnk\r\nu1meedi4UWQyHw70z1w/yYZWxQXodrhefq4=\r\n=Ywjm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJAjSqQIKUGwr/5RB61VninTN0LGcCf2QtGZOfJeEYZAIhANxjOWVkE7s/rOvoiyLEKca1oFQ6aZgTWt2zO0qgoh+l"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0_1645518803599_0.953297173724903"},"_hasShrinkwrap":false},"1.82.2-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"11c88bdf4ec97c275a9f0ba067b67f36a2147979","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ncM05puWiBtm5dEhTUsZG/dU/w7vH/3B/xWZANX8cCiTSU+avQ335g1+9ASYl8ubdSnzzl1nGmqNSkTsximJAA==","shasum":"f4da1c6d1dbe8fbc9ff713f65e5021c0ed89012e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFK0WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1txAAiegMnjgYL4REImxWDeJMBBzZdPlPH9/Tj/SjwKEJSE2LQyxk\r\n5Q79q3eRnzysoytBKyob59riTAnTrlHFBQdWDSvYf1MCixNKOYDizBryH9BZ\r\nUspH+IrubBP4xW3IV/TbKCFa8Qes+8daU7ZWCq0W1s/tHJ/lr9cDCYYM/lDt\r\n48FdJgbP0v3X4aIb5n/K7cm+tC3leebFxUdezd4ofeZzHlTVoqiBBsyUPHzu\r\nPK8gyy+9Kt7uYrGOyQpumlizYAv+yycMgv5jDaCGVYDFnqnzyQe+v27th/5P\r\nMLIEWbPR6OVTxSapC+q2nbzwaRTVf3h7P2+ORxTTGgwbpKKLdUVy7ksh0Iok\r\nkawpM2UWidxgbXJWtIxIBNO+If/30OOatquKoTCijDwHO12Ny7Jh8D6EI74T\r\na9d+DQEUEgHYiUOZ4gqQc96CUj7StwFB2wsUfirWAvh/3ks3760v81rV4pKV\r\nrIeRPmVeQ7b7epyO0V7OAabl+JX1ithpVbL3sEh9n125LA6LeZONcto3vogu\r\nrkOj/2GfRjIKptrwUGoQFwggOA2qCiGqoCqxol+lefb0QRXUisAhcfkEQAEV\r\nl1uu4sf8QKtDxFzZC0DF8qv4fyJyaQozSQIcPQKqWpsIGheiCxdWU4ntL/8H\r\nHYURaiyT2irkSyT5ghVEU67yYJXS1z7mXKk=\r\n=Ehxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpRCvlwzFtMCYUKH58dJO1Phl41DNPVL6r0MB6FiofTgIgVPEbai4VcranXIqaaxjTEQ/PRY4ofr5TMyEy0q2aXTc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0_1645522197864_0.4626491470222922"},"_hasShrinkwrap":false},"1.82.2-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eb62e28f202cb4ff6d0b2f0ee672934047bd4d82","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-vU1PG5F6aGyGjojum1VxSyUariIUIL9XH1Tpy4WJSIJb65pUcIzltCV4HVmJO9h+7R5MmZ540RVg/cX/s9Elug==","shasum":"f3633bfe2369b704ff3491b83f294798431b967a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFLP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4mA//f7h0k5d6uKIHGRFU5axNOGAXaEw8/LRWt5tJOGSD3fvdVDi1\r\ntkmrmsFOVzuytEXfrc+Tz9+rK/ALs3EEnTOR7qZ/OM8oYlQhRtftruazUDdK\r\nZ1VI44m560/DxGMe6bGbjLLFAV0xLJ2pNaC8e4y54r+r4702L8hVQRm7FYOY\r\nHiZcPuY6G887Q+jfx/CG/vruS5uKczKey6nAlBTNpBc4bBTkubyxJEgPkfZ0\r\ndcroBTbxixRzLCtwKkSCHSfuj7xkZVA4V/HrcplZU7YmkdgrVZ9idRd0V+yy\r\nCNgZj8pZV4yXwVLp/78nQeqVgefU1xCluFJEegiKgaoh/BqmON/3Ake3GYAX\r\nKYPAXuHcpj3wRmZsa/odqW74rbidEN56BJ8KtiMY3h553I9wD2E7zwQ+a2FB\r\nmDnWVPhSRyE9KHLjDY8jnu2TN1H4nhseCiZJamTKVEwqIRUhHKrKgSBbfwf3\r\nApF9XD7GtlqtM0y7et0yZ8UvVGAJ1J/cG5h1ghZD6MlmcNhZbQ360ETokZBb\r\nFu1lIvduoWcpA7Hi61VhSYpzpkhyElDMNtaQOMghhE60Q0dLA11S7l6qb8Pj\r\nWjDnmGdjMLjTCWtf7U28Z+VSYyC4LBSkYjLZeui8QwGFBHa59nDKBlt9mAJb\r\nBt/89lgyX7Z/XyQsEnBrIXLK98uxJlNf4jg=\r\n=4b+z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBp29m0Hg/xL5/6NvfKMf+2S2FmAuaSvjYQHKrMrKjlwIgKwIsMwpnMsTS7Lx8y3CMUnVEdL+pVXJGG6ZeEyKTeYk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0_1645523962312_0.8133242719812959"},"_hasShrinkwrap":false},"1.82.2-canary.1116.10eea8faef160679874949e3bacfca272c0fae0b.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1116.10eea8faef160679874949e3bacfca272c0fae0b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.6","@sberdevices/plasma-sb-utils":"0.48.5","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"10eea8faef160679874949e3bacfca272c0fae0b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1116.10eea8faef160679874949e3bacfca272c0fae0b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-qqaErIoKuegDnDnu3J1jS3idfCaNn4plCr6FnF4rLCYBBFnk84wcZsSnRwQ2N5C5HMX558HylijcropqUCg0Mw==","shasum":"4d31c7c8d012579a8b2eac1b84ae8eadd4f08227","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1116.10eea8faef160679874949e3bacfca272c0fae0b.0.tgz","fileCount":904,"unpackedSize":2478742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFLQ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGRw//fke5kVtV3UiH0oV/uoeQTcZTq1yV5zmWKS/FeM9sFzv/OaTF\r\nMc+5+ZP37jPvH7TbHWMNVNpfdHicifwdBrhnFdk6XDuRtu23KCM6sbx4RnkK\r\n+a1mfp5oZCVgskHyIwuC8EeHWZmLkJAKlmql19cmvYkOoQi8546I7jzPHJBA\r\nxLOuRPuSbSETZaxiFtk02lXG8+oFO4PGKQj4KXSuyRrkgvE0zAQrodz0wGUl\r\nmqE4qbwzQcyOUeUzgPsUvPaB+UsmshyAjMi0Tq+SJJqi8nOPOkc+0KD9DcDh\r\nNiJvID3In3XZjVrBBuAWcg/cv5s7hgst60qoQIqkghcilpsD0cZe1dJeuX7S\r\n6J2IuYbiD0Mj12sPsEV6spmZEWsUmsZzdr4QOMs57xy6aUuYy3kLHcY7Zfc7\r\n22trfVIfKzhIs4t3jkYPZwtwBl5Mst5kL+yTrpJg42IUb5Ibb1Lt3qF9HVIX\r\nfoA19OWaGBOCjboEmn3gfUdRiruDfrjROoRy902faUG73N4SxuP86kxtOpmP\r\n1ErpzO4thjLAoc0OOhpeFsNljs8uFCCnzdkN/dZqvqKyspiNmV0Dlo6yzH5I\r\nrpBv4V+RZAQrRloo/ez70qYRG4rRPBqCuJLvq9IvSfxszdzqrGLXQNBssWUb\r\nIRgspWjTjFZYFw3NcSSMog3PXk2XTq1R2UU=\r\n=199V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXyU3EDzdBTuom7aKHDw1gAWDJch1s2F0jUDBb0S5G5AiBFlZCGvORfoiOaRY2v/YUr5Tf2esxFCAiXlkObJlDetQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1116.10eea8faef160679874949e3bacfca272c0fae0b.0_1645524030189_0.7473488286443672"},"_hasShrinkwrap":false},"1.82.2-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5b8b004d07eb7e5020520a090be7df647a60a93e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-lubfy+ydsVmMy6FnFbee/hulLhwLW35JU4E/q7nB2+S5cKNuf06R2pNafUDgbqlDLEGr5o9gKyFUXGSEUyHmCA==","shasum":"c85d08d8498187cd3f0450d0128339b6578bb7fb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0.tgz","fileCount":904,"unpackedSize":2474087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFLZvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4uw/9F5+0xzqNiF5aSr5KTuVYkJ4kOPaGZFDGimq/I5EbPZjSyivK\r\nZ8gPzqTwd2tYsoDzzDL+7hcWoQCQtvqYaBB/IqY1F2Vp+bUW0uThqfCyk34v\r\nZT1jnCBSmvrtjvseDBTjipBUp7e9AjYO/14Td3wz6stFGDMHB5RGGl3yfizf\r\nxp/velyYS3cW3VxNlNnRqpZtDfMXCJukAjoEex8wWc+BKiizw6adSFwzlhzB\r\n265pGndmCMgGBq6AJpGGbAzwB0gN/v6V3VUi1t2pfbzyK7+FiYNH0ok4tvWJ\r\naw7Cq49Qc0Pzmc/SAlJIqfimTpuEcgP277McTzlD7CxT4/R1BNF3ECH3k4pd\r\nFtoL2KmyNITL6BHLpJt/nS+MrvHpE8cAqYZvmmLBRXfNEXQ2ScVvao9Wx8aZ\r\n2hOpOIaquzIbZYm5IRyFhTDa9wRJduTsse3eONqelgDpAlzWTKmYeyC/XrmR\r\ntH8E/aHE2rmWrORmgIuPGpR34CkcTjosCLAygCIlwb8SGve4gYPq9vuCEuUt\r\n3iCCasF49OC/At2oML5/MR48+IDN7qCtyxTfe67tJ/GijxG6UUkkI2XZQMdr\r\nI4i9u2Qc7G/KAg0mZyj1VbXSMsegTCRj5ZeK3rQ5D2QYJuj/XPrhOZAmKDOc\r\nA0bbTh1j+hdWDBIp3sz3R6MIH0TUh5WMDfw=\r\n=Owoc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQ8EtoBtaqxr4WLe5KWF0vFEBEh7OOxMu8IuCVuwIeMAiEApxoLQwfzXqOJj6Ujsuq+271OYwt/9Y2R2QoDl5ZpJzs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0_1645524591782_0.6915786427889372"},"_hasShrinkwrap":false},"1.82.2-canary.1116.45146db10bf665e75fc95170c01f188e7418af3b.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1116.45146db10bf665e75fc95170c01f188e7418af3b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.5","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.6","@sberdevices/plasma-sb-utils":"0.48.5","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"45146db10bf665e75fc95170c01f188e7418af3b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1116.45146db10bf665e75fc95170c01f188e7418af3b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-WazLRwziAYnYxitutRkfl3eyjAfYZad3T4MxU3BrjtO4pR6o/JZ4cQyCc9iHW+y4FQ4166E+qih0z+XQkLrYsA==","shasum":"697e9bb783663d992f9a78383643e1e66f1d25fd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1116.45146db10bf665e75fc95170c01f188e7418af3b.0.tgz","fileCount":904,"unpackedSize":2478072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFLd3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHfw//f01S9s97kwuLOXUTOyzXUBPFFThv+r2fLGuosEYbDh77scRo\r\nu+k0ok0hVvNyDDiVLnX1zEsSFkCkm4p47TBQhfAqAr8zefsdyO7NcEX6HpWE\r\nTjS5s/9ow35ybMW2pPWXfApCe62DDIxJNMWh5ov1z6AbkgiKga5DM579ovBE\r\nIXk3tzjz222ow22uZJaIuNdAevS0NoEDHDSp6/Oxxce2gtLQhrC3UFmDvtjw\r\n4ZPFHaTZ+uRcyvz3ninljAIlEHrG0DSsEHN229udypZcz5u++r/I6Dl+8Xlm\r\n5idiNBHfA+KHUkM/6671iaXrJPrmkRNIgN29BH6rlPM3uQd0HT2VURQ4kv1L\r\nEBM8yKCb9avT1USlQAQxNBA3P1Ls219IrJ7m73HWVaAH8Qaeo3kW9TddmhAx\r\n2pyGE4tcNO2xOZhH3CPtMxdyy1E08fKTTzJKxl3DhdP9O9mlAJz9zxON3g/x\r\nd24xHcbmlQPLuSwLfS97+QEsIOphFsgSGukJdPo6mnJDpHXDgEGLvg84JuAr\r\n4brQt12WgRpCwBOjVokP+ribRD5bsZLkaUJLVVULVZnwayMAPaoIZHJ3qluq\r\nwMLwcIoborZgCBsoRwpazfB0ACceL/wrbRLRzL95OAwwiDOLZ0WuNZFXYObp\r\np0jXDA39W6wBFsEuKgnh6oyLaJyknteKe/w=\r\n=eydE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAt7eDjlDhK/reFxYBbaQi3oPZt2uMfgeG7yKbFX5sVCAiEAsE/HHqgaXC1mceOlw3bFz+s9vHGeaf5SAWnLxfMX2FY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1116.45146db10bf665e75fc95170c01f188e7418af3b.0_1645524855170_0.2480215956597296"},"_hasShrinkwrap":false},"1.82.2-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dd44e2d2762390998f20657e5c6c2b81342b3197","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Ue4AKqj3LvQqGmi8wU5gVgsQLX2R524+5YfMS0kAZOlKOXpbO0LKT7nfQyKVRe6lFyaWOzxafBNxnS5uTMDWuw==","shasum":"ddc1ce66c450d566e708eee25e5828d945bfab5b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0.tgz","fileCount":904,"unpackedSize":2482165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFMafACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr53Q/8CoHEfujnw6p2eLyDdX5EZl0FDvGwuy+Ck1r+KFgSnWTBVEZi\r\nSgzur6m4hhi4IlOLH+TSJzn2AAQ6ocgEGzSd0rMHwo5togT0IXB1VMgZXz31\r\nA3JeGtgAySQn9WQW8s/bZxLJPuB45Hcjc+BE3gtj2pnhCroDfmhDA0uysuUe\r\n4ycz+SKJAo2BWvcYvtW8s1BXux2QSDubJW/nKh8TH34+uS/09tZVicldrPGm\r\nrWlhYB2nejw+S/kV7bdXw1CJfhumNyx8d5KI37FRl9FIqHnuk2Vf2TZ0sipJ\r\nVGi2hag++vIt7LEaGWh+U0Af8uir7PtRimRPkV024Fj3pj+Npa/GRq1xMJcR\r\nkTONQfskpn1EhMxuwrz7D3TveoQv9BXBI5/03PiM8qlNHP3nC3disfqUb9Aj\r\n53hJNLiGkVY0/V7p0sPItsI3e4P/Etrkr8PT4Y4WpmpIMbcOTWHlqfJ1LyRi\r\n9J7Hvp3LXyrvAr3/Kdi3BBeOZMKVd4TORx+si8PSqNBJ9jhpki6gndVm2Zlg\r\nRhqde9EAh9QhPBik+G3miMZEicGooSw4shSex5M+ZD5Qq4t6GM6pwHrN5ndx\r\n1jEMv3r86mrYE5ar8gT1wDmBBtkl2hPYqrFCWNwdJ9edI0x8EAp9lVeFgSuc\r\nzs9ba8/0ibpMHkZPuAowU3A6hRdB0nbnG8g=\r\n=3wUM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIiaQpF4jkSk7pUISx6T39/DJVL3jW9szJXnxm0MrSkAIhANo0IHkl1g/AypJXsUWbjzceEIBjZgJy1nEYhma8HHzG"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0_1645528735214_0.6139888964976548"},"_hasShrinkwrap":false},"1.83.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dca889795345ee5ad156deed8fff9f4206b99ec3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-rih/o7BSWFZoZUyrev0CzO2qqM0rhsLYYjNZ/OjWHKisFxQQaqYCfzYSi+1+TetBae0UNs5lZ5Qt1BAOyv1+Qg==","shasum":"f50b74c841db3a12a16de21c4aa715905feb26e1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFNRBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoujw//SSQa1kO5EO14iDXcY9f0bNN1ZlOV9iuAXKO4XzlRilaCAY3c\r\nnH9nYhsAU9VWMtXpanI8I8TBdK8Ge1RJ3ZfnJsY9mYcbTiaixLB5KOs3dyGu\r\n7n6e6J6iC5j4KRPL+fRWD1+/9Z1FRXbO1Pp648cL9xLWQtUteGUweO+WL7or\r\nU8f6qNC9T9n5ijGjZVHRg8KolCqpk5QQEP9y6Fu4XH9fQC6FtNfkH5jW+lDm\r\nVdi7PVxMVbwgfvWEuoPpn6AYel/298jj3cs86EOxShq9AlXUSlmlB6+0Yi75\r\nCdOlhvx+Gtx/o6JVK3klJgm6qrQ9GXhKRAV6P9mnqv4zVjnM1J6J7hZddTzX\r\nQqLV2LS8hwUInx6uZxbQ4MMf/HoKygy7duACXFSfTyteKUdjdJUCtZXCWxmB\r\n7AGkYhiukra2RYblxHWTsoBhYQIBn0FpXcUd2gTW37Cccl1MEt0cU8iKdqtG\r\ncPso+z2x8YtWuUJV64RAAYE1BUyAYpliAxpNj8y59eWMsPPOunLt7pH0M0G8\r\n9oznCCRrr+jFug8Bj+revpRyLbjcmJ9olfCaIQ3Nl2Lvzm8IT3xM48ltCmZa\r\nPpU/BfEZJlqR/oRz2hBMmrIdihhx/L42Qh6dFvBuwRzqsiDtFoM52UnTDeTu\r\nnESSr1G/3NjPp/vUetwIJtOopl7CrtdHdMY=\r\n=/KdI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChjoA3uSrDdquRvqWUn973vvls+kby0Wzr+qwtwqEZpwIhALAeUj1z0QBzeA+bHZ4gOe1CsIyh7mfSAUOIeeZt4eip"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0_1645532225187_0.4710987104649649"},"_hasShrinkwrap":false},"1.82.2-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a1752f7e1a77264bb3a2602964fa55511143c2fa","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-5VeqJ2ZIDkhHQuGhRQmW7LZenZhBCzoETFNwRSM2wjXdUDO49RvKWoMdpksUX7MGF77TLFRZD5JKq3FQulGsCQ==","shasum":"946310d3885decf221a8bb10012fab54983db5a1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0.tgz","fileCount":904,"unpackedSize":2481708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFOfrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeZA/+MQ2CwG7U6qiG23X9D6/eoHqEXYlhcrvNf41G6zGXQXMHmXAD\r\nymyoFWMHiqQlLD7twUy2iSfQh+ooFJVoFXtPhD667cKIof4QF+lj+ip/4DtS\r\n3I8qvVT+5wPr90WiOwMk2RY//cJcAN5x0u5yNbtnOi9iKHI9yqvtZ5UKRLGA\r\nbpKVKYuDocq9YjJxrX+Gh1xI9GiM+h42bYhqwNFPDGDwtRcveqJrYzGjuJo4\r\nB4MCfDtSJRDlyvRZSr5cRBr4AzHLwYz6M45DgmXgC3wJoKmXWbtInNRVoIzh\r\niXQWWopnKRmAuyYp/MsTjpUXZY2cMP84gG1+5+LAYerB3BqzxCJNY39hHCGX\r\nPYDb2vEDPJ1CqVQ3CmbkAoGm5WR/30Z81Jht9v2juKj3jyisWF1sfQuX2CsG\r\ngmiBwEzs+VaMp1HhKzTTU7ApKuNzh5wOuJvCI23f+eO7vM0D9y1qXLXpAcCP\r\nAa5OdK7m/Nmvmi7j/lwGk8okEYUbc07/jNPK05jTrlPtJwKuS8jy05Q1O5Ok\r\nHM9DBaWr71TOmu6CPUMiPRk37ChAoJ49oZ5zOJTGJ1q5m3gu5j8yfr+BwLFA\r\nvEXMlH+70Tz8H8uV/ob9EpT01d0iT+KToWLOnViBQM01vhGmRg7XegclaPXx\r\nAB+18ouTiwPHCBjbsh5rVYI49W7+VX0SkyY=\r\n=T7p5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENTerNymvt8BmtShr0LxUNKZgMr5MzXB+NJr5CCrGtHAiEAketufqe7PmWeyan3Udlu3QZZTFr+JPOQ8kdz1etKSK4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0_1645537259171_0.10868213415997419"},"_hasShrinkwrap":false},"1.83.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"32daae97ffb79d411d316ff19a796065efd2ac39","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-5MzFdIJA/dYxwgiht58lUihuF6SAf4BTV0alNIPArLM0IJSdUiUDthYJ0OdFegXyaavBb9Mcn3whTt1Q6vlPHA==","shasum":"9b9bebc0cb1b5b98ff897f0f0f04feb1088aac47","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFPNCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOvQ//TM/U9Po5hEHwrIpbt0ZhrToSft0xK5gfg93XI9QUZdqD+pw1\r\nfBkyht9d4CGl0c4rxnOs2yAFxH2ruw8q6GO+IhRVQovp+Y+lGpO6NcaaNbQN\r\ndvcDcoeKeYQ5xdIFTveJl4bHSQSQ7ID4TwjASrbjCJs8z4urOoEi6CFnYt1a\r\nMPnM+dSG/ni9xMF9l7T0OB5rFAhRh1m/7/PkNJisR3lZpTMh2xISvq43xeti\r\n9fGYPt+5uBp4OQKEcy3b98TALvjGJno8X92N4j1za6PbUEFD+EBh9S2gCFie\r\n6rGdgxbT8Nq8zk5/42NHx71n0Zn/7jSTcRgZYK7zI3e0wozzxvfp2LAtvt0K\r\nGQtpzXSklDLi+tJ2jAo72yczMncD9ue9haId2+MUyg2zrypYpt1aX8dGRbkK\r\nQ12kdFSn5snafSTrRugMil01fcsSeS/meLTWTypTkIYZN1QZa+R7/SjwOh6B\r\n/JOL1+AFVUy+dn9ui5c36Z1ZrsRhzzHT14AfWAgkuBeLjClMLq33CGlHiDr3\r\nE9hyQPhHaiOimUWGZSXbhBIU4jNrRBh/Dp8No0WCP5Z8r49Dsr/W2m3KTXQb\r\nucvIfsVjIZYJ+7CJVASZoBkK/sGCRNW8BxD8FqfVJKahcHzvF6JHzGO76gzP\r\nkFtSSHqoaJE98JB7nCMy9P5MPZ/ozCyQruw=\r\n=KPcy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4jQZ/ybf203SILArsbm9SMAXeiaMljDphlZ20F5Fe8AiBhTvjtnZXHW4vKxJpCwDQbyHiHXivKzsBdILvQeajqrw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0_1645540162676_0.5352177929317912"},"_hasShrinkwrap":false},"1.83.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"817efec0d1f8d64f74ec200593ea4afc92967801","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-D96vHX8Dqyaap3GLf7JAd0g5lnunUvWL8+oQJT/eRs8vt8GHRlvobqvOnRquuw7YfZnA4l0u4fqZ4BrrJuH3qA==","shasum":"78aee01a447d734f9d77df5c17a6fc40e58da09b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFxMJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouYA/+JuvKUFiquojsUGaphm9PKN2mzu2G9oJCR5H+jVsFPqZrtqp+\r\nqjnlrj8MdiRCbAN8Xd6Ge0ZWciFYBAl9mJII+J79RXG5+e6wUmsEgEXY/nTY\r\n8wYLCbs4/kiQiqSwyclAWLWdHRwjblC/U2tz8Jj8wuFVR9Wwsb3fGjL2WQQJ\r\nudQSz//tyNv956QPYvlEYZJ+XpEgfl7sql2aXa8sljPLorcHsI/zhWUD3tx1\r\nnqo3AMiif+y0NRfACRghv09QLYMAMgk+omkktbMIbny/NcmRAXmQl6ehEKji\r\npNDF0tvhAbOpcZbeH/yvgacyD7vxGZhs0bRHXg+OeGex9kPGFMeO00O6rWnz\r\nSu5Hb/MSjCtm/E/JTrf9azIXcHUKKhsGoZHCLpd03BPjiTYCnCaoUssx4LIE\r\nxOwQbRrpKoJXZ7eSMepzE2q3B+NAq0hhMGT10dO7fVBtf9GhPUiHb0Rk/egk\r\nwJTmkZ2UNyZr4EAC5opOAGgJFliCijpwX5pt4TtVzExEOCauddka0AvLxSAs\r\nc82alGqb3l0I3yehGDOnJPFQeeKvLvqK6IrUpks+0uiIG59Z0ecTIQlPR7mC\r\nEfFgGbI/7qSd0+WC1mEg5ryZWf489kKjU9LDyA8U442VIf5AVzyCVgDcHoxK\r\nJkbGCP45pXndQrw1sl7YaOCGDeW7gjMkPKU=\r\n=dmuE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFSKDObKDmuQHaDSW/TwpnOQgOpZuNi5TWJi/G7LwHMQIgAwEP8E9RoW1adPCfhnNDO31cQiSzdiE+zbOSntt87ec="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0_1645679368879_0.06522882259131157"},"_hasShrinkwrap":false},"1.83.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f0ad1d03df2a78c3609086a495404ac61005e16d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-/aE0B0DANovdhY+bh2rclFnMEy46dihEKSBBcXv3Ys0KXPxSHC8VyLwdvjm7TuRwyBTG6B6dM6QXXInmZbH8Dw==","shasum":"700d21c3d7790f14e53ca6a23247a9e57027c0a0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFy9fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8wg/9FgYQLdx2jnsaWLsyx6V7jYzhby8DSAUGmPqbhIoseJP2UxsT\r\nTGnN4a0mF26QTgwsX1ZieqZRi9fuQujStKGWEIo3+hi7I6L50dpPuavu+1gt\r\nv5dfBhMi4VPbIgaSofDlDVpAc0JBgJeKY8ofBvfJZmGL2QOikGZLk59v2XWm\r\no3j2tH8RwQtTuqBqMgslM6ce9BAdMI5VPcRNhiiFcxVyVWgmvUmpMT5MnBBp\r\nVRbGiLqBwdiqOCFW5VpMdwMb7z2DkUZPHdKDxNISra7ZPwbXYZDs+1xiaFlp\r\nbjFklwTLsWqp7bNrmC3YLU0eJg9IUOkFX6YiE1NqypLQyWOtw80+GJL09cEK\r\n7q9iOzjIA4/pxwOR5XlDqlW3nwP/ysHPpJhOli9jFuICMkQPBiyoMVLLtmHi\r\nZdwklsrpnOMa23uwFi/SYWj5CMCJjB8pQ3y+BpMqOpBkmJ1QK9T5Y3G4l0Hp\r\nKl7C5NgpDysxCST29O+bb7LvG5rnZcWEs5ki0hvUQv4UnDqYsVWOBsYAd1+8\r\nwvtXv27/0dYDJ/uvWSwz5qDijyg4oh1iGNTFG5RVI22QQgJc2Q1Jvge9OqWh\r\nPEFd0dPv4lntOODZ9HkmG9cWqVwsi+td3kBsS5CRL9PvYC6YrPEr8a/pouku\r\nBJmJnPncpXsH4ugl7Kww+lcM+lhIHctiXgU=\r\n=7+nO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDnixy7ELgEE2AKTg10VZnpjby7249/5Qtf5pBdoYNFMAiEA883G/zcnk2nwiAuIIv1U9l5OC+0lROFiA5SGf8Yiue4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0_1645686623556_0.11556307474867844"},"_hasShrinkwrap":false},"1.83.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0","@sberdevices/plasma-icons":"1.68.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9a84119662956cdcce263c11256ce46d879cb252","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-1a+6t79KX3YDuwTgQ56kxfjmo4GTBs9Aa99q2gMzHj0Qwr/OUMgPCPZdR1mTFymBdff7fEFh789HDaOy0ewEEQ==","shasum":"c3b403a5dfa61c7786afc9a20332068c2e52201d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0.tgz","fileCount":904,"unpackedSize":2481655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFzldACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Ng/+IsqjxN+Jp8hVctlwIxfZpbxL99A9KoEARh7IjbMfbTXF9Eyw\r\nIQlii8iZZ3/fQpnteHmAaodofn3MpS5m+y858Z8nUzrnNvxhylMuycDa52YT\r\nvutBQF6Aki4FSDY9gcQVn0EfUjlVbZ1F/c7LpiUPd2VMh0KNBhzLmzvZydKJ\r\nzppYngY99Bm+K7ck5DlkllO7/M3yQBZ8EtXYJlvxO5zZiIBnIK68bJweqkkm\r\nhzQzvLcW9kKTxP0c6vYeIlGHGphYuqcAMog2OUX/h9cl4hJIdBWXqiMcZAoQ\r\nKhfIkwxlg48j9y7CIAe46IdcCC2ICTcHErX+ce+4bpeyhMmbj/IYfjgDw2z6\r\nHcurYlGa2P5dYlWsSa2fHDNaELrlQO0jCW6vw5TK3V0hi730u8R8iXwUN/7K\r\nDNBjHdmuMEGHcjD6J9fXIRQlwBOtT/uPh2g3n+T+ZhMR+ySHCkmquAUNW6Nu\r\nhva0dCteCVaBiEnKM460MtG0FoWfmCQcnbVZKx+gGR5ecfHXTJT/jlXzyE7X\r\n2JxQ0tYuzSp6YB0v7dskbNarLOmf1UNWNJ8yKDZNl3zm+XM7m/9vtpE7l0JE\r\nU3QsE9uD6gIiFcVmRRz8z4wEsY5rbymdB9SHHHzxmgm9O5ZsqUNGAb0JKUMc\r\neYmiWzfMl5IwVIjXNxhOFJzqRDzDWmHXa1Y=\r\n=EwAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGUemAiFwC/8QzAUQb9zkxHGqxq9bMzXzQRFAFwkaOtQIgaLP+VBXfG1JSjG0+lV30iLu/QJ9jOTjhASuRKdqQAZs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0_1645689180875_0.692341044584635"},"_hasShrinkwrap":false},"1.83.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8ddf5c527e57abbdfe227edd5f0cda789d0ce937","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-E30YRztwd5rAeMClId+NvPM6mWtHIlkfk+r2yD4yHCXsxaEQEDtXu8MlMG8ScX3asj+ZR0HpewwfgCTMBWe7bw==","shasum":"e0ce2ef58322075c0de94649755351abdb087047","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFzukACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXDA/9GqX3FkcOunFfnft9GsUoS/r1D64UQQDCnFhQ3heaXDjNPn3Z\r\nS5zUwjuQkHtr8pwxx7mMPgNcBd7TF8XVwkF1eaNin3CpWKhrZsoKAPy8Ym8I\r\nEnlPkDWrwpfx13DQPe+fHmx8SGb2N6KUSu3oNfPH1H4IwS6q9KqQNFrYMAQm\r\nudF0flPzo9jAIpBbvwipBFHi9eE9qL0pihKKxnenlirI7mDHqb0Xpc8E3ojf\r\n2+YkkmBOVtsUQ09WXR/1t8LOu3L8wlQ65/TC4MszPItu8qQ7Ey2LFzi3CCQe\r\ntAj3pf4HN6NSp54m3kTNdoLtt7svH7U0FapITDeLAJ6UQ7cgnbBNdowEXSql\r\nIV/x2i5/QBe20gJI4V9il1UzH6Aw2e3En57uknPwKwWwsl4s/OveLsdzrK5W\r\n+/CoCuzyStkENEwye/jlhsW2sKDsJ+zEkT820REc+DLriy3i9RMNpyghmbAI\r\niPQUBhY6zV4WnwYDU3ECO3n7TB2OkgFuBcZ5S2Ul2YxP24MzYoYntfH7fIlS\r\n88pjskwkUh0WxZMzurPZBjw+Fh/QClshHqVWZ8MjzKlgHPcmmnbvptAsaCO9\r\nBnS+igVAl2RyGk3MM1sBt4VORzieSg9XQKtcoYXN+Z+Ke4+ajv/xWNtlMxbH\r\nHOKjg233Sy3lmenfE853KjuJ2hEWzzS//1Q=\r\n=jQIe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0Ls0tI+WC+gc1rnjfWApExI8cUrSJAUJ46i3R/1srSAiEAxKbyWCW0JeZaCMm8MJk5HvMPY5/x7EyRd41slL8QvO8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0_1645689764621_0.8998380993733452"},"_hasShrinkwrap":false},"1.82.2-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cfa29a1a2e1ce426adf8716b67b07d12c12069d7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-vdMaK2fLC61zpmCMiUdF7HDRAe14nVab0sqPJ/ZhFx7GOPR6WuNnrhN9x67ChKKdEoUHYEW204oIlPunV41GIw==","shasum":"e6e5924b6e36b29c0fbfc64d04a451ec2563ed61","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF1AQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpqxAAjERDCNVawRR9lP1zuq/8tpwIwXP8pUmj/yh1wFVQ14EAYlxp\r\nFVpHGtAmtUg+t7IqExdsmiFd7l2RDOjvTs5namj3CBy0prz4IlSIO3vK3z/i\r\n8vGBONlp180VBZuV+p+3Lfavl92jg9pXLz3nyKd/LeuW3z33uG6K1DbLdb1p\r\ncxevDCQYnKO6FXUCKjci+gjdUnd041J9Ky5eiUWR/o2tZSdws13fvsqgVqyp\r\nrda37ZdZYmGSwj55ox18gIFxJGBdIEfgr4HhMc4dVhEl66LwusKJ2cy37wh0\r\n/WOY4p9YqJ/5MSWFJbSdK2NJpgtZ3S5U8pa+8X6iXmqYMW/0pmHCmTBGaBj3\r\njD3paacwe9Y85oG2xnkvRzfWHhnnI/751LXXnejxG6eH0jM8kVN+RrZtHCGB\r\nKpeQMwdGXzaO3BMbwzJwxEN6AVSg8CVUbVK0TSwf41/O/1Hd7jH+DnwYaJRc\r\nh0IEln+UvAGolM2bIOBTJ02j6jLgHHnnkowccrGjgqb28LNDD5KexXNIsTwV\r\nI5qPe1f/kIeKMQkTjUUmIAZNNkIox50yMuVwxqaKRvTwyCvCjcR0tjYKaAGo\r\nzjRMRGFiQT5Xp54OtOWDqr7k1STQiMeb/2UC54fMOrqz6W47lbzFwCo6u6Zh\r\nbQfMXdyaPpF4HemR96GDm41UJHR44zaTakk=\r\n=Rj8m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGhjmJntnsSMzuoPR47ZqzZBI9kTHA0pQlCAY15c9++AiAE+YbebAhZtdhpnd47zrvPA6w4LQWkdGn+DX72HEC89w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0_1645694992069_0.6143763408077547"},"_hasShrinkwrap":false},"1.82.2-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a8b17e973e9f242b25fac4faed5c9d921098f6b2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-vBwsr+QGAyyFtHz/eaXcPFKcDhTpfJpFfSr0GJeC2tyvl35HNBKKhWd67cvkQ1H7FyEQcq4gcqXct6+5wPzt2w==","shasum":"831909492bfe41f9b2ea380109fa2e2e75fd485b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0.tgz","fileCount":904,"unpackedSize":2482367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF1ETACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjRg//dqupwthQdJu3SnP50WKsE+2IEqey+GPh4w/15Ih03vmbiWvc\r\nGrnOSuPYKWV9xkHtCxH35zzWgwASjqnL6RutulebIcW5ZPtD0X9P5sT6zwd1\r\njjikjA6WpKVvE9H5oRpKO7aZ8lNk2TdxOXoevguoL798tIYrdHSx/Y60dC0U\r\nhOiPttPiNRCniwVdUl5PVVlHNw5aa7HeGb69lhF294YYORqiaMpNaQaOGOv4\r\nXPA3etaivOdd/SR3NWR3hYkukYPSgCuFkY/RXopDeHeYpZU1GEbQsnI+ePDB\r\nz7DraQAVQ5bHVCDYAG8f3fOGFWcgQrRIXBYYn6IxbPSdh/mNJrNkwaP6PfHj\r\n/ujOgJ3sByeV/blxP2BYeNZ/ieraXR/zG5b3q8HRrjBy0xorfgQBzGiMScOK\r\n7XQYtymIJafd9NEszKltp+FVwDAHeXo7AOF4NRqOgBcS2+CHycfKNkI9fk/T\r\nuABrL8DZmD3ykIiGIgzLIqD+N9CZrTwxeoJSzl1WzVBoahGhUSdPJ6VqzaW8\r\nFI1h90ShPSPBO8jfRg23hCVqT6Y3Ed8nHWfFVZkHr1o09gl1J5MpUa9xAJya\r\n8fRVMFdUolbGyA8zW2n7hbvNKyqMdy3ncNi/daSxS9DGbOd5mzir9XIQ59YP\r\nON+qbCOTPecxGWdZhsrQ7KksAtsbTBi4xMk=\r\n=f8uT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBAy6uHFi55nQUJRk3mWvfhblnMlamrQCb1sEgrBbn5aAiEA3+Jh2y8HeGoH6pGajmCx1ytRqnCybTsjSIuAnD65ydM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0_1645695251305_0.819985453632293"},"_hasShrinkwrap":false},"1.82.2-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7afcb82860cc1a4d585a889146622c9d4920684c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-BM8deVjARnUpn2hImCS5TBRQlIp8tAaixO1kqRbLrJf84DiKBuQFtQi+yZRJ5pu433EO3QWHWrX9Bobl0y7nlw==","shasum":"6327fef201e18825526dc361725ef52b5e49620d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF1j/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQPg/+Khc1CMcu5fYcRP65wz+BTMI0V8hhWcH6+dwi1sO29/fPV199\r\nX/t/zPdD4fVeTzdiJKvn+8HM9ZV1dYt7foxKzHTvHNqqb+2XQW6fMXBHUIwA\r\nVd7eXay12nl93O1+n8QeDTgCL5Hl9W71Hd3CXlC5w8JOun9TuDQJj931jvyZ\r\nwRr8dDAN36ZVKlfijqrTSG0tJuIwMhQgZGLi4RqylqyHA2kJeu7dRD4QTFMq\r\nENV3jU0jgSViwnPhfXypw/FvXIetT88PZsD5M4m3khWXIY6W8vno06JP7CCE\r\nqR2Rr4qQP6eaPVk6e3G35mvhLiIAVdHfEo80hrAr5ngUIPuKB7BOED6jOof+\r\nrJ8fdvjkEBMZRaRWumuTYqpp4atsxkwPi2jz+9DZ7zZJgW+ZSKrnhp/2b7Mk\r\nzkIOXi9PZ82C7wWCQlBhKGhfi9HDZUhA3zIS7bZW3ToYzGceP0PSzlhx8d/s\r\nCGqURucXKSp5Divoir77pCfQmqVaObmFGqKKzxtl70CI3L/qLuw1jzOuSIGE\r\nr+DZ49q2tXHhnnEvWafznWIfRtjqkUBJ3KWnfsYIwM/XrnEwIigOyRFwTmIP\r\n2AzLq4OPDCPL7j8+C67xcLFbdxeijb2g0EtiW2w6lTa28iMBmjBI9XAhLhrb\r\nHztnkXiM9v5cOAO79IyuLnO5tJ0m1UqWICA=\r\n=Mofg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGz7aCQ2zP8c5YdXqDL9uiuanq9+wwkWIDu9wDFc4O57AiAbn4MLDRbvEfPdT/kehoRXv37XyUtQJnkx3jSX7qYGbw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0_1645697278825_0.03488724437381463"},"_hasShrinkwrap":false},"1.82.2":{"name":"@sberdevices/plasma-ui","version":"1.82.2","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7","@sberdevices/plasma-sb-utils":"0.48.6","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8a3008d5226cd543a02af54518048968ce0c5e0f","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-+ApZHncOgrdP3h7nTRNqursF+UjIF5WzuuJdYdJ/VkFnnwwAxJJHfe45Mnhyk00DfwDrXcgDC8dxXHfono7gXw==","shasum":"acb78b7681b5603f255dfe24c1ac326f89d8755f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2.tgz","fileCount":904,"unpackedSize":2481689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF2QAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFvRAAkLyMn8pcwo1ycusVCENQ7XhzHS7JOx/OKt9S8h2f72OLvm8f\r\ni3yl+5SZbKPw4Hg4enOu32ONd0i6nkkRCne/1H1EU02qzrj4W6boyusavwhi\r\n6NXLweRgrswXys9CFRXuRQ7nDYRrLyAcqfYmap8Zs0rj/XaSMxW0agMncTtP\r\npYZA9imYVKYXqcpZn+WQsp1xTW4O4iTlPMD6W9PRQEg6K2qL6hY2sFxzOeCt\r\nK3Iv42vAL0uML/TI+wpfx8drD9bFnNx64UGn5i7cqSNOvWtazeKZrBtDJu3u\r\n+msMhfI3kz2lssS2U7OkSIv1RFR7mfjvVslPRRZO+mXmfH11zwfTscdREXBe\r\nXgqUq8IYtVoMW2IKyeyyTPjjTsEcej6zp2BUuirAmadZdgzlSQi0OkHT3/ZA\r\nmMNs4O24UsAdbvjVihJOM8RLnPJD29qvlSb+HqJyrNNX4XriNmefmp2hTTrv\r\nH9vNAEGTUWGY+XT9vQW5BphtBaT2r9F6V2PAmwQx/9U69zFpLh4X6YO8ws2K\r\nC8g9RNL6GlSqOfuPqxueyt5yWrXPLoumRI8TrpbRcF+XkC0HRTTfnhjtYleg\r\nCveeAi/18Hu04YHzJ2o0L6TNkniNYR4D6/7Qkn4f+okRPrGsQ5Z1d6MuudWx\r\nQoYZNaWOhmIxfwK0ZTlpgcPm2A9TyljDjLs=\r\n=kYLo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDL831rKIAIEDZ5kZj7eDgfi3JUUf2zn8qg5zbU2ujUAIhAJ5ST90rWXKmvx4qoryv+kUQ2f89q0IRDpMyEHlqRGri"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2_1645700096085_0.370588455458448"},"_hasShrinkwrap":false},"1.82.2-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0":{"name":"@sberdevices/plasma-ui","version":"1.82.2-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.6-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.7-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0","@sberdevices/plasma-sb-utils":"0.48.6-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8e200969d93eb8e24dbdb36670ac115364299963","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.2-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-TpPex53QqKrpP5VKvWRaQNXZ9GmFTiYQS9S8xMkbALuODxL84UZoWjoNKpQerdY6D9rNAoDa+PyqI0He+Eq0CQ==","shasum":"399972894968dc376a411d5d8380a880121f37ec","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.2-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0.tgz","fileCount":904,"unpackedSize":2485750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF2QIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeYg//b9oQCVZ7f11dgD+cky/V4wQoQSQHshD4ERSp7c59dYHwotmi\r\nh0LuOAFCoTFILcz+AS6t+gEZKo/QZYMxFhPsIIs2krQAP32XUOCv/wdqD2pI\r\nNTEf4l4109etDPjBw/0RFRI9/sErlp08/g0kT3EUy4LfcxK/T/jzs/FVBLn3\r\ndIBY5ppAVaMYT9ODWByhtbSNRwcBhZoFGt224uIj2cZLEoXkj1CbCmf61GBU\r\nD8qMFV9c1cO8+pHBleEJ8Qe+3UrXOJca9GsQyhNuRAD39//JIjCCeZRqcNdl\r\nr2ocWfizHjhe2joo7NNx3C2NbD8RRGWd0IxyuVpGcLmzNL5xsBg67iREYIuV\r\nj30UCYah/uZofcNizjkWcQD4+xV+XYUv2F1XgTg/YjjKT0CjOGNCWSZFzYIZ\r\n1nebgMRyedc7p0UUKSTWUDqDK3wubVYQbDk/M9h60HPag+vbo3Vuws7ZiYvY\r\nXxJtze63/hdO9PZd3AuhaASrtCopOHS/P/DXMQLkSFEMeJ2corTh8UdTzMPC\r\nLWEM40Pt4FzOqOFnE6vx10lzN2/bQDaPfH9bFRJ5nsOFAaqT5UwIU4Upz+2/\r\n+OfmaWu1xNv9UqRgHh3i0K1fEFLlmj18WUpbulHjs421EnHO7e6C31NRxJkL\r\nQdP7TxtQY4ZnhCo1mOI/BSwPQRDxn79eM7w=\r\n=UzKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1M7LFDzcgKQ+S6yxs0G1jtOROkXf7ylGFOMHuSgehXQIhAI5D14cPayVHTpxirBleM0nKsZbH2U8SrzOnQw4MNG4i"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.2-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0_1645700103793_0.4378015299718494"},"_hasShrinkwrap":false},"1.83.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Qj8VDm3WhB62CrLDUl3pjTlxx1dvnIqf9IOuN+VBYLEfDU4eFqFoyOTrL9L1efJdU39tEbHUHfjbjJW6EJ8OEA==","shasum":"123509a42d820d7e02a8485155d41b0803bac088","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0.tgz","fileCount":904,"unpackedSize":2481600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF2UcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnVRAAjuf1nSSLyoqOUoujVKvean3Y7hnB0maUbe6p234rLt3UNI0L\r\nVZBK9uQq+2HENDrCzKunfGR0AfML/7ga+qjHvVAgIM4EfXjJ+Ql4eGL9a/w/\r\nGNfO7Sd4e0MmW97HG8uaFuEc8HYDhMt+U3hV/qb824VdYRQTaJEZ3BRhvcVX\r\nK4Jc1g9QIHl7Va/91xToJizNlAbTTmA9rhRIdODqeTae5gT/VD/J9pr75fym\r\n3cyABFXUXDm+UhUZe/Ha/5LXtE5m6UNDrBilVzr5j5zNFqCbDXtQRZ0ajj0R\r\ni6H+ozdnnq3Ejw1x3PjofKh3pLwxZzXFKHGsoHFDk710uwayKbWwi5wajtXq\r\njslIqrvo4FvXbWpzYYwgpWAeu5IT77/GMX0rKLeTXntZGtkzaqqwjxOK1TtA\r\nubAqJLkiM+brG/PsM2/yzvK0cWNCbcuErJf/KJ3CLCQANLNC6BflUgnEOG/y\r\nqFJODTe19YpRJeg6Nk2vT+b0J9svEDrV6FXsTflnM8CzeAljKMoE4UQDVpuu\r\nZBue5C6NpUA4MOEC9uiHkFS+27I5FHaU0UZF6Lru0eb6k180q2azowZA/lye\r\nKCd3jOVgGDGFHD+DDFZwcpeOg5ac95xTqtbO94cNLgAqi+s00NA/vqSQxt88\r\nmfJ2DbSO9yHCEWfwCJN/TpzSY6unFeQwINU=\r\n=ddc0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/+ZSN5ZJnfzYg6jfnRrxTF0hVAvkb1u2nbSgthPMd3wIhALIgdk2DC20o4GgAqUviBtT+Yxk1UPg3gRMQ+tVidcOJ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0_1645700380257_0.32252017478611505"},"_hasShrinkwrap":false},"1.82.3-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0":{"name":"@sberdevices/plasma-ui","version":"1.82.3-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.7-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.8-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0","@sberdevices/plasma-sb-utils":"0.48.7-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4d6aef8795510b00f0a33eee94250e72d92a4863","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.3-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-MnakMO7VrdHbu/zyZDycCoEG2cZG4z7jC9+Tjfwn9BosC4e4SkPd10fKhfCFTxlCtVGrCLys9P4qfxMK60uunA==","shasum":"b1add69a42abd09d6d0f0d8c18a0d2b17472e21a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.3-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0.tgz","fileCount":904,"unpackedSize":2481909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF3LmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbXw//VYfH2knfTlH5CCkEYPdilNIq9GWZcgoX0Npar0TYZs2K7dbx\r\nUVDGFvV+KavxB8Hj9U8EnqMLQp78WUplrAxqpNh0/rGejgDBy4OoyY0SAK4o\r\nmPJICmRVDNEd8NdyyuBjeDlWG+5Hwu8B+9++DfC0trNsxSUOTidh/7466tJ3\r\nqaPElOADkJC7YfuazX5Xze1gMfnNb9buhVvJ7VBP1fWgtVCKsDa4mQbsiK6h\r\n0sT014BQ2Nhci6oUmYXvaDLrql7ir20yYZ7IbuZ1Zq/unNnqhoLFoWIrEV3U\r\nueect2rvXpGcu73/q1ESZCjcHhiExbPGVVtWfTmQvohIXZ1vQrLOEa+dL6Am\r\nmg+TCUARx9kCIXRoL0XMR8222IKArNYvV3F7B0CNGviPO08Jl/+VHvbeRuBM\r\neQRYw/ITbpXkzdmfIpFqpNEsCuL/kaXs+q1Mv+Kp7/LMFxywrEH3PIqXOQyT\r\nAFGd7ptyBTRh2x8jkmfI9xwtDmpUmpOWXGqkY4l1pOgNWZlNxNKAEUtQ9wuj\r\nPrcxtTfMuaKpy1P5uvAh/UgiQfUUAzOvLf4Kye+ERVhk6xzhdOk5BooIo2ZF\r\ns9xNyIm3K2KEQAbfoewuz8T/YFUsbXy/4hMyYj+V1AW/tyig3gnOfbgBia5O\r\nBGRcCk1U8CHFtZzkL3JXdZh1A/MyXN+pVzw=\r\n=Sdsc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExwiMHJHdhRm9NmmINzYfjFhy13Ede4UIw0rgG1mkOGAiBbcnmv4OdweJa+bdmVCE5ugUP5dYbDsOJLKuEEHHzaaA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.3-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0_1645703909812_0.8011388779195527"},"_hasShrinkwrap":false},"1.82.3-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0":{"name":"@sberdevices/plasma-ui","version":"1.82.3-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.7-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.8-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0","@sberdevices/plasma-sb-utils":"0.48.7-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5f01a9cc59f79fe2fcfc711636c766d0da534d53","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.3-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-zvNfHwBuw66VvqRrHNrKypVUq9G/DOdRCbFw7p4RQ4XXY920eoQetcd3VT/rq0shsVO5qMB/EEV6P95ZuY/vOQ==","shasum":"5ced1d888f22d2307480ac679655376a5f9ae0e3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.3-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0.tgz","fileCount":904,"unpackedSize":2490120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF3aLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqWQ//UcoH8IU4xXtqByLZFNgNbH2bNNYmQBihE1awvHcJQSaFQ/rG\r\nxUgnYe0fu+rAHp2eL9am/IpRP9l3L4dpjRZkBpn7QPUTnFBbK7ySGqCJ+R0t\r\n/ZU+cOoTcsjS5vajZERdTb9HnLn5BEr+qwCQb0GNGfS4y7/5LJN365rI59HS\r\naRme7FUEc0v3WNQeI3GH/4Z5pDPPnWGUnDZdSDh0k561Cnry3/Tt54zJWLU9\r\nn/DEvjm/S5KqSqBqmB+U1kCLbrby6GRBS2FDTxmVmCSGhvIR/7W/qcEKs9GM\r\nUfYM9XODsrrckDkL7Vsc5r7F4RBQWJQ3mbaRv4EWzDA/vtee8/dDZ9D+UaPb\r\n4iat2CHm7MFsHzhsXKpKsdf2mDQ1vpZqAxZebkAqriH7xxp2Eb8h6xvdVXni\r\nQ9P1zydo5ja/3fpy+G95DWGXQoCpQatEpZ6zTk4+RBcmZtDHveiDQiexIZTj\r\nW0D3xEmjMW3zA+z2G4WsC0mpj8w4F8X7cHMNR3ztk14vyK2n6MAwC/Hdrdmq\r\nxJ6/5nTeF/ufcXtmdxNqvqZwopgxLIWC5961F2SlC0LEpVJ03z1UH90zJre2\r\nq8HO1O2yyaoc5KDScq0G0BFSByQ1iby34xJ4Ij+kxRCgm+An7cNqHW6XNhoW\r\nlkDWOfHChROz1YNFvAzTIC0RQK3TTQIoNWY=\r\n=wctg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDr+pKgpG+FQtcGTy1PYILEC8ojlKyzV1sxD9C4XOWDgIhALUgWBYf5+uYeT3uGuG+K97Afxc/97SYrNDTxgWcIxQ1"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.3-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0_1645704842996_0.3467082130320258"},"_hasShrinkwrap":false},"1.82.3":{"name":"@sberdevices/plasma-ui","version":"1.82.3","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.7","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.8","@sberdevices/plasma-sb-utils":"0.48.7","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5d6111262bc315068ed2ad66ecd450726644c148","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.3","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-QoYChqbs2ywa+h7+4sBCxqL0+Apn+e6HtSZvBsnS70JQIgqzoU+TSUBYBquO1NgbZ0FCRkwka8YA2mFmjJ/Tbg==","shasum":"e49ff26dd42fe1e20ac56602d94d4e9071b1dcfe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.3.tgz","fileCount":904,"unpackedSize":2481917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF5VAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHXg//ddmq875VdnS3yPy0d2ZZtLng/kMBvgn362MX/ad/cLPtpRi6\r\neb5DHQmkLErvrjmTjz6HbqMrrHooIc6Zvs+YcvrkDrP0xyqRmh2gOxcoYmkq\r\n9ueaONPHHNnsnLYfsTj99RyqWd9Hnm1JMZpCVviB9tWFfCekn0kenHM2pW6A\r\n2KiWFvzIpQ/UV8NdPuVMredp3PLTAN7tQD11T5fxT6Xrw7zOnbhesGPm38fH\r\n7zBF2aQbwxKh3neds6b1IdNbT7TPp3gORdYO3kkXzEg9XoRviKElCZaNI0Nu\r\nDKZVq7+mWuAAkAxoldkfgM6xXzTJDBzW59zLlAWZgVBtPLkNZ4+LdzIgr19W\r\nuMMz7AN9FzmCApgTrtfQCMgha5UhuSBvb8uPJP7usyR+KGs8g8AbD5gjh8Oh\r\nneVMmG8p3Y9rj9hKHlU1xJQQdmcbz3rAWAl+PSWzlVQSeal6ibFDbuhaU7Ix\r\nXustzUMR/iT9VxXMjrz8tIzEb5LAp5zR9S2ZcAv1Kya0ThVj47202ZvYhujh\r\nbshqO+Eof9n2RF8+tnW+zKtnQEUyQ4n98Bi0kh3tFDBMlEiMT9/Cfi1V0Nu1\r\nZtmyzbd02G8odQNNiJXotwP8IxEiIsgqx8KFEaFnmxCK6UIscHVOGBIs0YP2\r\ngv0ZqkKpU4VLXM0W4qfLnnmJX2rtr3R/JN4=\r\n=kwmq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEIroyXGz/a+MP2TEeDsByk4BsxIIIbeCZFE73ymUgUtAiB5pFZuXMesEAZiNUAZoLuhNqBECKxkfdXpJ5G9LapV4g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.3_1645712704213_0.900415746357268"},"_hasShrinkwrap":false},"1.83.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0","@sberdevices/plasma-icons":"1.68.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"96ad687a17b4fb0206de4e321e7cec94f11de002","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-x0JyvIEYRajlNv3WvdhmUzHdydCoS/nZbeow/cZWwIDVSlnutSjIc4Pf/axBy0TvW5nxslymTK1LKQZAQTQPpg==","shasum":"6bbfe1e4e80f0d1f086fad237316f075d0e2e99b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0.tgz","fileCount":904,"unpackedSize":2482192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF//PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphUw/6AlbkXXX3JLOvxceFOkWCaou5P2+jG9RFCRyiyQJGRWwKJU8j\r\nfZICx5YYOOjr7OlKb4m5wchKr5gaU+qHeUw88nXPa3CDrJt5nWhL+L6x/0Tb\r\nlkzrHCKdKf+kXrGYKfTAhIJU2psCTyGyL3hmch8ClccuYLRyUN7xLAd39Nly\r\ne8lK2EOpEJX98tsGOBG2+vZm+F924Gk2Ho/bm9OEHQux9l/XtckgWB56ScWv\r\n6O+PTooqesEmjbNrSGdjWd/DiCbySa24mc8rPpUkP17xbMVmgr1uzSEEbwRu\r\nUDEqecY4SIe6OdILhGALZDDpB5u2QAosKAiDQvFErkidGl8JgKo/HBmCrnwx\r\nneqj11EbLvw9Okk+x3e/K5JAmH3IAWjUK2llHeXSr8VVniA6Xki5+wW3dRR9\r\nfFH5atgoiLezjF19vT5Xb3jxENg15d+HomFtGJ5daOdLqgDUHXv6e/6SnPw8\r\nAmMJUZE8fKPLEPcbOE+uoFQYDbLa9lkprL3Qv9I9Jp0EU3BX0Xh5emn29MNE\r\nBQDbTasCIg0RLOhuUYFYN513qLtSms9OEW2/3FqGeK32xqhezEZVtxjsQfrG\r\n2y+nye+M+vkGf7Jf7rFXo3bB2bCjH5lId9j8w1rIAh0RGKvxur2QfxoMahRI\r\nX4nYNXdVH4PZ6aBcl3/mW1NDiBqB4nLprI8=\r\n=iACF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm79oX4vJU+PCTRJQ0IORYXRJV8wpBwWxW/z1vlue/KQIhANrVjGkQddJ7N3n4cL9qB9YX5ttbueLlQaB3yAk7vc5I"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0_1645739983715_0.3201572213702679"},"_hasShrinkwrap":false},"1.82.4-canary.1120.0f07af60c83e09334c3edbcfbe6b5b618aa682b5.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1120.0f07af60c83e09334c3edbcfbe6b5b618aa682b5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.7","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.67.8","@sberdevices/plasma-sb-utils":"0.48.7","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0f07af60c83e09334c3edbcfbe6b5b618aa682b5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1120.0f07af60c83e09334c3edbcfbe6b5b618aa682b5.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-HYF+a+B1s68lWPyzf0CiSeZJY88L/M8OH5P31WiyrhPm5+8LaQ/t+zXvWE4WGF9buEM1p8grH2GtxxO5gETXig==","shasum":"e595b3f5cf0837a22616b8122601bf62e9d11179","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1120.0f07af60c83e09334c3edbcfbe6b5b618aa682b5.0.tgz","fileCount":904,"unpackedSize":2482040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGKNnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2KA/+Mml8sgnBbAsHuEAFvTLEcXxkGKnxBkz1H7CTa4UfCNrNmXcv\r\nMFz9bPIFTS60bHeM+DnG4ZB5TIEOpkAthebs1mm1tsuaETGs3sSHr+vDmcC7\r\nQVrH/OnnLNvcTPw2tUTL1Fj2HHak476C5zc/FK5pjD0c8n4hsPs5j0Z/jMsa\r\nD/HZD/iWMpYIX/OmWNAJjY331lXGUA2VwosmqHLAgUM2VcEh2XILEvt2XXI7\r\n8gEyiL8jf7IFojtXjs5ydaYsQnRodfMvktUrCPnVwuM32VqR+paY4zLg6aAH\r\nslM/TNCKeBP+4P3M/KdMcUlRUCWlbolvnMnh5hN1Smz4kyVfyb9kPJPPmNfL\r\nLYXgwZoFjNmY5xHH8vf7IRJEuHIaIsyh1+cu/NTFLoxtMUI1mMabyXNzxMfs\r\np666q9D627P/cy50vx0dowSnHjJ0q81P5eqr5AttNWjDycx4RnY6aVXkF1+z\r\np3G0xitvzutcxPJeG/R6jmPxA4gq77qS63Ou7Mnuv2nEitS9Uuz6MQZ/WoDk\r\nxVMuasLgpyiWSg5M9z/h/itLzZf1877knG2THBxbJ9yQ3HCqjxTVSK34SEyQ\r\n4sI3sR5JceE6aCEzgPQUrxAhI5hvjmhXysStEj/uqh5GJyp759zYvG85alkg\r\nsO7j6NdrwGNXpmd/NWyoYk1OQR7nT+5lTPE=\r\n=ufT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPJaUUXrbZn5ASDsGwVDpVhugHZPFt9pUHBVBbvqAECQIhAO1Qp/A+tM2jvRLTSrbQzoMydK31BRUzXvd7UOe4DWJ+"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1120.0f07af60c83e09334c3edbcfbe6b5b618aa682b5.0_1645781863536_0.33874957423474394"},"_hasShrinkwrap":false},"1.83.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0","@sberdevices/plasma-icons":"1.68.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fdc1fca6346aede84202aa9e5964962e55e4836d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-fAAuqKcg9HUSXeqhx9mxdW3WsZtqpZZ0z6xPc+H2e7m5zjQuhB5Jb/RyTazyMZKZ3SxrYApVsc0dO5l6xEpzrQ==","shasum":"0378a2381f931bcff4b50c74b7562a425ecfaca8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0.tgz","fileCount":910,"unpackedSize":2496864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGL7VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRPg/+NoaXqfOP3mJbXV1O7avor0AYFm5fbvBpXcUKFMsWJ6ZHvH2a\r\nue5eHjHF1pyojv7U0KHAzg9UMh/8OMeeE9gtzSskcdLrTrEaMEZlL4LLP9Po\r\nI1ULpy8lKl19OZJvezChVC9aSy31t70NYkjCFSIA1yTqvNMq90aaQlDnpsKI\r\nl79ZPQuD1Xr7r56ZvG6x1fRTLL6ekdAa9DvPf6iZCR443rzIL/hb+Tz5uEwn\r\nihXbGbmJDvwLTeuhPEqAJRFkCR3edaq56T6IRMroucLOXD3PpIHwXFXRYMY3\r\nmGmwGbqZomqHHLlqmgU5aePWP6VOlzohQVz6BiyHOdW17273Gpe3FYewVkKC\r\nzicuhTeqwGYNcWYts6MyuizOZ64s1a4mNy1KHzKLeE4AlLdoUZsly3huLQdq\r\nqXlZV3YiC5FwQBd9uyb2FwTMQXJMaK/4sFaIRmwRmGSIrDRHAMgyP4XfIOC8\r\nxd+UW5z2WECfJOaIjpwmkAyXicUeQg+ZnZYSGwcNQ+igBIqSGkkxoOv7RLtX\r\nYbkLdOnS5xlvPOq58y/umvgvPva8sevko769JVPLcsSLPcyk1HloyUpLoXUp\r\n3WRAwrvMjoP+a8g4zbBv0i/ei+jZO3q7pMs6HV5iDwpjtIXgOYBcZsrD50Ns\r\nR3BBeCKWf2gxrLzZ31v/M+Wi7iBGKu2ARmw=\r\n=MPYB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsNqkJEVwbgHyzdrg4At8T4sR4NMnsQeOtN/S7tZjEigIgP3sp7AO7utoWob8ozd7d0XTC2M95E5NlPDYQWov5q2E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0_1645788885080_0.42865848639913007"},"_hasShrinkwrap":false},"1.83.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.5","@sberdevices/plasma-icons":"1.68.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f68aaff822877b9deecdd9289f37822b5a1f4702","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-HACGaDhgZHmxv68cF0Q3+f2dCIZtffl3+9eeQceo+OLtzpYvub72Q4ff+OK8gsSKqrlK6OeCzuM+5q4eRiobyw==","shasum":"325ae3f8dd4c0f6d512d61953b8ed567a43cbaba","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0.tgz","fileCount":904,"unpackedSize":2493853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGN/uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcNQ//VU7fcpMXZo8L6srAPEYddIvYP9qqbjNhD14lhHQrlGq6jcpA\r\nya4zyYub5HehEm7hhWKO/bFUXbewVADrkTNcJJvnEcgICUaPQxJYYKqbknsL\r\n+ly54PL5ez1QQeUaZ38EUnhy9cNSlQQLuiJwNkig6KCd3lAnO8FAdhhVEoPy\r\nCI2cVzuOJ5+liAJqta24IVuUG4W5a0HSAophV9sKgO39yghSPGXpjm7GSDBe\r\nutvnEj8egADSUSnJ2TJrKrDA/0AvrSU/Y3frVo4cuo4lCQwJd+wpm2c5BORS\r\nm5flD7luTJAHWnTk3L6hQJudqd3OVeXpCalRFBrksHhytIu840/S+zQiaiNd\r\nPXbV/eOqgd5H14zHo0kOmAC/zE7CdYDL+SaLpyzF6pikgyY5RSfEAGoWYB4w\r\nHL43uUV4snxp1P7HRVKcZKfTJHixPRZlhmAy6lmql2xBFvxNkKS0+kBxVh0k\r\n6EVD5a7G1cyVIJ0ILyXSofehMDefj04U7T004ArHY67KH/fgzbr0p76uB/Vp\r\nFezzmEsUZ5IJuMUPdnbXnrTOl0yGXCYBQmkMRz7+ZWaAvup1nh9w0ut9ZGiY\r\nAvLFoXF+H5MjceOsJ5yzmqwKsJj2IFp3H1CLCkQlK0H6cGYbvdPoDw7qJUG2\r\nJf+Nois0Oawf3ZkgJnyKq89V2j4EorBvO5c=\r\n=BtGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVgSp7Wf9iKgJxz4FqbctYyNrrC3D2wHsUABmmJKFjqAiEA1FWlN0Hr1tRPSVkHO+yhrtEIE4EXVC4p8y7S9rd2xoU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0_1645797358142_0.428409260407117"},"_hasShrinkwrap":false},"1.83.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0","@sberdevices/plasma-typo":"0.3.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0","@sberdevices/plasma-icons":"1.68.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"678d052f0a82b8655ce18e3728272b6d17b7c9f6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-HY6g8qjNeiwmuMJpIZl8+2+iPf/d9wuUy92zGJ615Ei7cRPLDwtESEJXlT57HJxWWhxZXr5wlv1sinkAI8zuww==","shasum":"bc1f494ad7bb523008276f78dc679f95f2f160fc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0.tgz","fileCount":910,"unpackedSize":2496864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGO3QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJFQ//YNrEkZamUGjBxlFA89n8TNPXJa/F9bnNkcd8VR/M1B9//dNY\r\nowHXQRiGUlG1qnFt2sDtCiaosW4FMyTi33CY60BYPBiL63rdoq4emoEIOyK+\r\nuje9wUzauuSki2bJotQu+YngU1h4G/nUJSRy6AOzB8RjQILJ0Pev6UCWwlVT\r\ndQRc7DtpJAOs0SERzIhxmtOIX0q1nO5XJeN4gbbQFk6OiEoFMHWzRNwFtTI+\r\nakktwnO6AjSBd2umkZIOMT7zy6w/68uH1ajbmXZJFwrajt44FmdagV+Axzmi\r\nUImgTyCfNCLfmysgewh+b/Co5DY8gBltYJcFbJqfiVK4RuYxJihoUR05kmoC\r\n6RboH7JNF8oOZLeI5QN8VRBaSYYxeI/VW0vAH7pTrRsyyKu3Agb5ephMtcDz\r\n1oAL2mAT6A2re1l30eldakN7qij36pNV6vXGbGmPIbKeO9idW+PZvcUgVv4R\r\n7aQR9AHzNenV0DM4jU35qyyBObJJDL/BX7DVMcUKoagAma508lYIZQjoK2CO\r\nQxHDVlJVgegQHR8muhqZUAPbj1nv6b1VUf498kIt8XkiHoKOxP+e/VeTqHH7\r\nXRjtFjd0mioe4gL+aAwPtO8JjznPKu4EsNLKrDXx3N+HhuMqlf6cuTGkv7xd\r\nB2zxVcuyCliTXAQ/sfB16f2rQXrfFVhpEUU=\r\n=YiHa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQBIBTYg7tgfDDO8nVfzKWLaQUYzOKTYO7+RZRwauVkAiBUXSTnykB2cgy3OGxLOK8iyXqWpB8akylVuihiWPDyRA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0_1645800912623_0.8754316904814907"},"_hasShrinkwrap":false},"1.82.4-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0","@sberdevices/plasma-typo":"0.2.4-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0","@sberdevices/plasma-icons":"1.67.9-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c8b6853bdb4162b31255f117bbd17c944fb59a79","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-2zC1dpekwy5VyKEC7cAZ6of3IEfWR7Dpb4e5ksuinsQbTnYlUcH38AIWcsyTdktcnYkCeaYop7bqE+k9oakpwA==","shasum":"39306edd959200b4393041e3f61663a03d7b1c85","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0.tgz","fileCount":910,"unpackedSize":2497631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHINWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+LhAAg55xoMl13vQc00mP09GF6F8JIhUU8KvqubuCXFAmatAw42lP\r\ngWqfBD1O6fhGwZtPyYuN9eezxHQ47QOvI7mxBK8koKLZwCK/QGNx0hS73nl+\r\nzAstaRhLvK0nfUoK4qejO3cO5aYoCXrcfATnPS2kEH7JVz+B0NL9eW590x06\r\nFiW9uN6OH6tlwux9+IPAIPiFmYm7iG3wdjJ7Mu11VSBBCwgzs0SjFea2k8h0\r\nQVIWlPsy8q+QqfYFdoc7mTv6dubU+KP/8crehUDtmfDd4vynfpLuTGOw4R3o\r\nkF91bxkaSd66YkS4fqhP6JS94DDeKU4A1PCU5RkAMCYlXiEhuP8VaZnYYUqC\r\ne5Kl6/VQXW4lKe2/PngmQL3Grugn8V9fL3U49Kf8AvyRHwKe6V0uea5mj4xh\r\niq6jP/M14H0jGLcL1hu8k4gV6AF8rV+fWJXCQy325Mp4wYyOZhq3jYJ9yXDy\r\nAAnoyrbE9V+Za8kw73UHHYkzTA3lmKHL/gy9elh2Hfzekzsgb6DnxNZ+kMU2\r\nsxm1BltwbcO2bN8DjZ0snEuuztCbcxuC73FM4/FP+24KS80o+MpERASa+Alx\r\niVx1l2tfJS/D8tdSVIgemLrdi8REHkVaBdU9eyQxHwBfaXC6fi1UWxwBmrPB\r\n9HjEjpFDV5IcNvrm2nydQsmthisF9H6phBo=\r\n=ll4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFeZXEreDbrmXatVWvmaF52v6iQDfie2FT41R/uWM8+AIgXMg8QBsm8noVepd489/pU0rsMRznk+JN3k4uVZR7iEg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0_1646035798202_0.02271006023226274"},"_hasShrinkwrap":false},"1.82.4-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0","@sberdevices/plasma-typo":"0.2.4-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0","@sberdevices/plasma-icons":"1.67.9-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3f55227675ce365f7a43509cec33a930b7460507","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-59MvawsKSGVG9VsEGRXpZrkR/HVHW1ClAvfNblCAwUIhA33g054L6oE3RJSAtKhWReZMEQicycE5Lp+DEf5NUg==","shasum":"fa33b1e64351923afc18145511e198fb66296957","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0.tgz","fileCount":910,"unpackedSize":2496864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHIN6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOyQ/+PndMtTMItP7/T99igyCp4DnDiNYHNXbtL6CweBnI6CiZDeDn\r\nEN4cDykXloU/ZtSAdSF+SDekgfFWw5PYfcpzrHvSncMiXMx7cnRnKDhqHC+e\r\naCiVaOX15jeV2QxbhXaQp/oEBzXtkVRw7lUA4cv3ofiAodw3rlcwLh0mhIzB\r\nymjFlUqznr18Jc0Pwbtd63TzI+lBEpvySGNRV57Km+6fIW05164bhRTkSYVd\r\nDPYqLpHHNcuTDSazFVBkawMEKu1pBpXC+ANldBwHm/r+qOI7+nKqkSDyydeh\r\nBZUSb7gzjH4ITykly9W0PSBhY00GWL2WNny3ZwX+Nz6VsuLQsnFfw3atu1/P\r\nFPh3bUEWgkqper3F+h1awHVNsqCZSgUJckbPe1/FjwoH6bQ4CKE+t8L485B4\r\nHFo6JEXHGEOzX7H6l5A9+QDutfO2IgXvarY6QqG8oyJOluBkUfR7OoqTp32r\r\nI+IPZWMlMGsepjYv7FXmjqmUREic+D2cFawUkMZwx/x8X33IsiCFgTPxz4Wx\r\n5Z/K3cDLkTMAaIv+7eEeyq9gWvh016EiugMw70JQn1H9nCXpgnGKFXkT0lDW\r\nRK2yXn87InWFxzs6MMxFIAbupq0B++XFDdA+OzMZMw0G9JxiqX+OzAHKZQcN\r\nQLNNitK0u7Mq1kRCMsK8AzLaOrpi8injbic=\r\n=s9zN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcKPr8uGMRo51EYeWuFFgs6OD+JGCDyPPAB6RJrC42hAIgMIVY8UzEGHZoq1rSK4+xdYFeHcXBI3IFElYm/65+0QA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0_1646035833810_0.0753335394302086"},"_hasShrinkwrap":false},"1.82.4-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0","@sberdevices/plasma-typo":"0.2.4-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0","@sberdevices/plasma-icons":"1.67.9-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"40173294eede96bb3f371eb4aa3733a40f6a57e7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-d1fbKet96YTJgrTQXQ+8jBWbctPBJr2qOl7qbzhADt3sQHhYquLBNR7/GoMjWmWSpGM131JY4flsa4Je5RbKTw==","shasum":"3d7173fb4554f4f8fc908ba3b5e9e738ae49add6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0.tgz","fileCount":910,"unpackedSize":2499362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHIpOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqViA/+L9bHvGJqS5J4Pp5h05/Gl0j/Eeii5s4YsPHqyVHqM44m+OI1\r\n1apx0ko+1Xv3A7XnpB/9KbPev6yt3IdLRt2Z/Dg4mjG00Uml+tt5WYKkj47e\r\nonFT+ZxzhLzV3UGB13NohHcJhKq/2ZgLEmkV7hKTROaUa9lAg7L479MwupjN\r\neAIlhj4SUR0ZxuRXZ0MAVd0PeA1YF8RN7cgODQsiyW+SvYahWqaTIHfPqVDB\r\nB9B846tjmyHWzUfjEUGzp4RPmkD76JxRqpHKICPGNBLU68bOqtIQDGX/QYfU\r\nPVrncTMmOURd4IauTNNYupIfCUk1MRDz2D/ZqynXDJTx362WrqZwCw87jnA9\r\nHrCtcbddwYiiubF4fYxVUUBLFbAcA4XKcqfQQX38TVFW+7TtIUNIIPncTqMp\r\nzyuV5G2MQ/pQs6338W3HNk0akLsFFmPQag/NTt7s2weq7scOuiOg3TYxvOhh\r\nDt2My+vJFnzRKndB1XAifFKAFzvf1jm/GtlNwItT7VLSQmD434lTyhFXA0LR\r\nhF+zercpn1+zn6aSq9R86c1C4q0xp4Ysqg4eLdKtgPYLHFkIXqkHPgYE5q8b\r\nzdXPkRGEHM0oo4sg5vCsOqFfbeXjDV8cLg0QnNFd5hWvMkxtAV8/hm8nZ+mD\r\n9zLMnexGeqRiSce5aQE+zkK8TrcR9l8slTQ=\r\n=QDc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxBkFAzc3fLmmApDbEPmt697FViKGG4OXpuf/0f3g/pQIhAM1MNrC4Nxnxlqt4tN/FG7vMhM7/SekqtPLYH8fdGM/D"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0_1646037582709_0.6499408164036165"},"_hasShrinkwrap":false},"1.83.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0","@sberdevices/plasma-icons":"1.68.0","@sberdevices/plasma-sb-utils":"0.49.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3e021d133e9e2c230ac5bdb799d1fee408cd5155","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-K0QU4zINJmB7UOTdSjNF1glmLIcSyLKWKGJ1XYlqZK3T5YO3GX+fOie01DD5dcCGeWPFf2TR2y+oMrNaV/qMkQ==","shasum":"860ad07f37e0042d1526d6f74059992e40b4fd86","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0.tgz","fileCount":910,"unpackedSize":2498453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHIyTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotpA/8Ckyr9hKnJDbiDnfyONOrShIi9qM+JZpGsWdaVm4RkpLdGfxE\r\nStl02hfPUSJQYpjITqjxQP6RbHSnoWBJSWZEEq/3FsUbkWjuLF/QCIK1MURm\r\nnPDufZbTlh4H2v1Es7T5bvarn8/YTE0pp3o3Wbjwjm546fB08yyP/yxh+Ble\r\nsb7YR3wUtKhgPFjQPl1BS1PNb8YhOzBDhhyMH/6VHsMY6Aoq455GO/LGPZMh\r\n6VpbcAjRp0EGRh9NVf3XFk5OlXSVU9GNchy+cY4htliCr8PJBLpcxDv2aPHf\r\nUHTYIndWXCu2rMUSruszDt7jpogZzSn00Sm9NafQfVA9xtVDsZzTxaSgT0Hi\r\nN43DPd8q/8EF5DoEeLn1EeTR3XWM2JJfXWLPBwllsVJn692O7uWKu7yy/uBh\r\nBB7Ph8d49cxW+yBol7t0Yp1wFpNzHJfqEDo97nC1nlDOxq9zbT1uTn4raTmT\r\nIC+ZqPiDqvsRqlsM52GdOWMbq4iPGtgtp9hFKdO4+hAGYoDXI8kV5dP7f5Z+\r\nebl72NGdBebCb7hrBTXk3nQiFxNTNopQCpPSQMH12MxuJg+sknuu/93QEnrL\r\ncJrwNSfq5EafWH2Q2+cjkYgSNuwCG4JCvOaNFHOnRxkbYj6tSoGvJRLcf6Vy\r\nVcII4xkhoBRcAF/uutl6ZhofgaiR4rcNrSM=\r\n=VWiY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcnSFb2i1NU9LTJWte1WK0BHeLJo252W/rkbVrRRURAAiEAn4M1evLWbzTyifVGRZp+KWfnwtADS8P+q2Ttr92mw50="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0_1646038163071_0.8266260039968754"},"_hasShrinkwrap":false},"1.83.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","@sberdevices/plasma-typo":"0.3.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","@sberdevices/plasma-icons":"1.68.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","@sberdevices/plasma-tokens":"1.16.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"95285d8b65f3be61d2f8692520464b1e42fe0bf9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-uArs6JOvszsdk57URnJPYR8rI03FifL7hT+xGvRIaL/qZNcDULX+2NHDFRWD78ZPWOZgaYVUkZoOgSvKcVLHTA==","shasum":"96ab338e3d28a9b725501d3c9acf1564e5b25066","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHJHHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2+g//dyHADJf9ZGcpLDNR2LvjjDfiJLpGsy1Hgnt4QARh7Oy6ztDZ\r\nnMuzrnpM2WPvv9yJlP5FkRNWzXtDTpzH/uvM6/YJzyqMUKHhLVF40sPIeGz8\r\nAW9+9hA1BZBBq9+t04jN1ZGViVz+TJqYsWhXViKB6NOCluFEE//XD3tPBYZF\r\nZJ7fWF54Sz/wAyHu7CGmY4lQf4fcSm9M1fxSsKxF6fVMCfWoT++dBUn38eRx\r\nnK7iwtZ+HGmlccXkP8heO9T56sFHU9B4cOtsvUuRo+zS3GijU9hNwiAg3DjW\r\nwFGTNRP7B8DUfswlbB5c4yRWRBHyH1jTm28jvyjWcGPRdBZ+buSxyc1MJ6Fd\r\nQRf2H4D4ncq9QfwLwj8Kf27C/7/+KnhAYFUdZzUjCUir/bYk198ovbAywPwY\r\nKCpJeOSJroDsM5g+nqMXUQ6jSsTzJYsT8IhlBXfMYMlEGIo6on8AGsCgXMIb\r\nePqRALwvQRj7ozQNJhWohWHli9Ejttk5Fj6fFQ3t5taCqq0ePJewDDy/aVBK\r\n648txTcH36kt1pMRYtKvSu/dga68YH/dwnLEjtzxoc+pAZSyvZuvhisR8arA\r\nk+I2iYrP/4NBdSyUwvDBSmdUR7Lhk6A4SbdPaoeYdXbXe1UCWzKSStNpcDzv\r\n/6zwjH3BKJ0Y0kP9Yjk9QTALC5Tcv841CgI=\r\n=+XNm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1iavEqY0V7/+9A6egDZWt5FdSUh1CiEbBxou4CeKQoQIhANTRMUwwxe9wJbSbqJ42rizAII0WiEqdsygsmvr0hzvh"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0_1646039495762_0.41545783387473745"},"_hasShrinkwrap":false},"1.82.4-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0","@sberdevices/plasma-typo":"0.2.4-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0","@sberdevices/plasma-icons":"1.67.9-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7f02bcfa5617f28fc3d936b2b38e79f97b61f95a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-KDkQfu+nYZgTFQKRhpYhUyOQQRkn2DMWOIAxrS26JGf9XacWRdCb2CQCQqkjo0zniC5xZ/45lHuQYt6a43JDww==","shasum":"9e56b02e837447cc3ae90e46508cb3f9f572afd3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0.tgz","fileCount":910,"unpackedSize":2499362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHKZGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocHQ/8Cmzgcpzzy3C7kqwlP0w7uQ0EpqixV+ZtL1h5nQB344fzfWV3\r\nIIg2N5IZYQS5muya2YckqQuoXd1LepX+0cqqrvJ2z975bXvwf/wg5SDw5NdC\r\nY2eI/4JKkmmc81u4FkKRF16pdKTo+ojQ/hl21CZFHJs4u4uRvHoWHI4VrBaU\r\nyP/aJUCVXyH6uRpO9HbWHtN262nyzDbel2jTNDPvP1AAQnwqX+JyhfZeEeTz\r\nPCAX+pJBTy8S4pjCT1zbCKGOlsct4XMu+JwNfZI40cZHUKNY495qPY2FAMJr\r\njV2Br+CrByxV0dCR6AqMBL/azuLAZNfmYk4lP9HzazjPKd4LdL7qad5tPBlB\r\nOBgqWmAla3wrkcq6Geu34TQo6Cxy6kqWIQv0ynBcsWkgPpn5Z/qGs9lOKosy\r\nA//5j3M8GyOEkMbZUyugFljQ/LMtv5Hiy95MRNcDT8NUDt8EfHShezd18W0M\r\nm6kTlRUhkCz8QXdVCWwHoA7tBGAG/ZcIkAirJI5u8w0RrBPsMgqogelPezxI\r\ns4zHKQwtCL9406ddTK92TydnUgVkBDL+WzkFwGebiC4M4v2yRJBvQQEM1WhA\r\ncMCyzaCZXckVVd5W1KJlZoF7D4uZIvM5EzsbI/3MFSIo8Z0BzzYK9RED1amw\r\n9t4vwEPRfqmlC8rG+QQkqVteJRc4FcaGf7w=\r\n=7CqP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmmtMDulwR7/G9XHVMsxi3cntC4mBXrTmNAvBXgkIM/AIhAK1jHQ9RmYe6TWBpOl53q4owW8UVgvoSOoQghlmU0fgc"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0_1646044742097_0.6901505879215091"},"_hasShrinkwrap":false},"1.82.4-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0","@sberdevices/plasma-typo":"0.2.4-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0","@sberdevices/plasma-icons":"1.67.9-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0b0cbbc544f7a1ac55d93db6974e09519f6e5e70","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-pc0FgLMWBxAXBYfW+KPlkwgnuY+WHXEO0klEVKwXSTOpquQSFdUo4r3O1lqpu7BKUzrKrehLk3HjEnyAzqSAnw==","shasum":"3d924e36173bcd02e59bc65530411dde7d90bb05","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0.tgz","fileCount":910,"unpackedSize":2507573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHKlRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFBA/7BoOzLOwfUFULsrwRx+f91dSewndTQLHZYSZBDdi2AT+DgjMB\r\nOeJK5/5ZMJTsNYBfmmwec9o1qkwmEBRsA5uLcTsp61h2gWyWUpgTuvnh0PWf\r\n4nwTHzEitKj/lx7orP2K9LtUGv7z2/Jz2MQYwuZWJbbi6it34TYp3ovkTTnk\r\na+xv+NmAvJB5AebP4UwUKxII3mXjSuJyilDxnIwk23Q4DouU3gJe0QfXnO0r\r\ni0ZI72m/qkDy3Ljj/wBkB6i4xtyZ+BZkRrVqpJEOI4+ETtnPwy7s6KJyiCnz\r\nQhH39T4FJHc5TjPU5bIEz/+eshktFTCZfaVbp6e9w00g4CZLKjmZN7mHFM89\r\nd7KS93O/QSuYy5NEXZXwReuYAx175TUmIO2uUafrpLoFeW1N4pJn9r4pBHrg\r\nxDdXPqHOdyErl8wbBxC/q/jIcjEtJTyQO56XrLc9SNdSGfnHbgAk6e4shD2K\r\nVoyIF++0UuQ3Mj4fj46LAkDTDIBaiS9CZZlHFCRNge2u2xqskTOHGL7q9TNi\r\nz4m4+Cl6W13LQohyPUDFBVk9IaTPPFkKx/Bp5UNHYew3JxTPOLZ0T9ktwFwP\r\nIdGd+GvJippV89rVUexqQkUsjLWY5TG+Aj6iXRQa8y3vXbvW5qsoEkb0zuLo\r\n0AdWxMSWhz7Hgqdni1niCKD2usPSng0u5rI=\r\n=yyOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBO9j4RjTqnOxnRU01+xUN7TzVPvBx2f8wUKWJVmVnXBAiEAnxN5kOq8DIp24f8FbkVoHYvS9pfIMqHTgcRRVUEqhh4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0_1646045521481_0.18654480268384255"},"_hasShrinkwrap":false},"1.83.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0","@sberdevices/plasma-typo":"0.3.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0","@sberdevices/plasma-icons":"1.68.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3d23298547512ab647bcdc1226b7889e64928242","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-O1MBsBv7Gh2vdecC5SceKJkocP716wicTeOq2UAcRliMG8+Dyij/KP9vFIHe6sQgz917QeDv10FLBU94id2HVw==","shasum":"99adaf69e10f9cec88cffd72415c4292f17e8f44","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0.tgz","fileCount":910,"unpackedSize":2499362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHL2xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT2BAAhKDqHT3iblHtV8slxV13CeS0i461JyB6eNRokes1kKcziUcq\r\nFMI5266DTkaYdL8BKeO1yB9m4csOOT5hwxk6AY+tH/pWYvp/uJiY1NaIDJnZ\r\nZUDz8Dx4mHlo1xgDn4CP1E8N3CvxaKajaUqy/5V7KKfUl8wP/vm3twDPYovl\r\nA8xxTTbycvA4Y7wuWdHVx9bhF7kXpoidi9WwrkxS5IoNmlobaxROfXhGdZmD\r\n+4ck14MBR7SBFRH4EIY0GBkPqUIPK2FwuNL5SrxzaPEaGFUBAUUoOfuzZzv4\r\nm2FCRxARJmV3t1kb3otDTbffyP9gAaXmlcTDzu69fAA/C2lIiJAggQ82Xz9H\r\nWU2gDHpZVESkHa9dZu8Nxdzv2qS+XaszUjDtbWrzV++a0HvQC0wPDJhqaLZe\r\nBFgnw5HThu96zvVdaP9PE45BpYEwm6NEZNpxsuYqkAQecIdjlJQAG+D/DthG\r\ntB5TJU776QBm4M/Nd4ED7iZH4K1Wypt6Ezf5IPfnIUxXVF9mAEJV9QFPVU9v\r\nuC+UNJGLzLn7PEA7BlMELgm5O4rPoAJVhii3oUfN2u9xH0Pc6SV9E4VTu5PU\r\nCPgNrr60omRzdEMk0j7oqhsf2BCqV0XR23DMSLnfZnsDtI9uUou9b68/NdS9\r\newsEkJROkA041RADvcOimsWwqFZOYdMMrwU=\r\n=8EcQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApr2YapEH0N0dm0mvMPpgwRJHSkWV6rAL5Oj5pgAVpZAiEAxn3MQHpOA4eeAf8wPke/TdgDHAf7BVGhSPEWSagE5II="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0_1646050737654_0.6179255152219487"},"_hasShrinkwrap":false},"1.82.4-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0","@sberdevices/plasma-typo":"0.2.4-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0","@sberdevices/plasma-icons":"1.67.9-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"87573ef350f29b1f8caaa9df086b69c5a4afbd5e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-AVh9aOXycXpo+G1dNr2hhly1pflJb7h6/OcKNSK+PwV4VfyWk9gClLYmDnvOdF0yATPmwUWgGjMDt8e4ZZnJKg==","shasum":"9f425ebb45ba30172b7c516c47868624360254a7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0.tgz","fileCount":910,"unpackedSize":2499362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHMi9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqezQ//QtAK8v+NB9ZXZEzGJzzzDe7GHJbik8r1zbE+tmkQKxKK6tWj\r\nYevql2iGY0hwd+mKVJHYY7XfAdDWR7n85QKLDNGNsmMILNJgKBOn1cpszEs6\r\nN/2fJXQw5SGElsJadumQ6RdqTEdQfPuEhxPAALcuvOLF31CwBF6pbCeLAlzw\r\nRjSYPZMd/kGMOQ6MMno0W3hFbcZt2mWU2DCbcl9BMoDBHOBS+X5ZfLlkAMgr\r\nN9fHhjtimH/MjdZJRYlgGrtpJuQqCQ4lZ3pnSlXNTMM8KinmNG5yBAhqy9v1\r\nAaAkFMx4i7T4iRXds+orIoTgVeBodNxlsid7AHzX8Y73+Pw0NI+p3FQZU+2y\r\n6cAQMUp3iYOThGCRxvZn/gl8POKwNGj0B/0K9fQxHKAcvBotj41WAJVwRv7q\r\n4gbBKM13veaLSWsUNySh/VUA5CjsUQXs3OnS3hDneXAEZB013B3aloVVYw6l\r\nzbiio3WHXsidB+O4F0a3aUWk/XAJyeG6SyBF+MzGJnemcB9DwJdg8vnHq2tA\r\nOg8yRq4Bus3ttxkOmfCXi7Y4/84+T2P6+dLhgh73z8KplrXZi14FfXABqe7h\r\nfbU3Wg6yJkaHx3v1Fl0XfTr8SqvQlb99P/KhBNnE3cZVJumQAnGv6rD6v6TY\r\ntm+knxFgszW0xFTO0mXAfq+t8B/zeaXaDmM=\r\n=8D8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtNh2RYVj19vGdIBbiZpnx5JWcZ1oPbb1nClhgF6FRNgIgA5+TXfJ9ABMRN0GhTNFCeKMNj+R1LkAKNKEzMWbIk3A="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0_1646053565364_0.7140651643496958"},"_hasShrinkwrap":false},"1.82.4-canary.1120.4666358825e573870c80608219a80037ef113d63.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1120.4666358825e573870c80608219a80037ef113d63.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1120.4666358825e573870c80608219a80037ef113d63.0","@sberdevices/plasma-typo":"0.2.4-canary.1120.4666358825e573870c80608219a80037ef113d63.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1120.4666358825e573870c80608219a80037ef113d63.0","@sberdevices/plasma-icons":"1.67.9-canary.1120.4666358825e573870c80608219a80037ef113d63.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1120.4666358825e573870c80608219a80037ef113d63.0","@sberdevices/plasma-tokens":"1.15.3","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4666358825e573870c80608219a80037ef113d63","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1120.4666358825e573870c80608219a80037ef113d63.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-URmTbvM1rW04cQlvYM35SoLF1dPB4X947ZwJ6K9xCDc/UZbmg8kCPlzgesaSCe5jUJ6ZnANolCmLBWbKOohWBg==","shasum":"4eb5a46d15bd0cacc33bd0f5b6f2d15bd3b6f5f7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1120.4666358825e573870c80608219a80037ef113d63.0.tgz","fileCount":910,"unpackedSize":2499430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHNu+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBuxAAiegGp+wRR3I9FSxPOtUu1Sh5KtGfJz2xKn7+p0z554e3lKT2\r\nXBOLTCh1lZuqgRAxVJs73yW2Z/2YYWU2xTGK79s30lrl8es+J1F6Hentj8VS\r\n7EWLIJaMl6lPFisvVBEhJ8lQDytQ9S6AhqlnFFzyCYrpEKeIvwY609WM+RfX\r\naMlsLJRZAbFbIPZXVVWqW7039gG32ual8hDv8w4GB5jVI4TXs02X1ihgHrIO\r\nryo+bJV4DWnr3K1O0ElpP9E3XjXo2tLfbVlv+PpX/qIKvAv3DfWEjwdKr9Jj\r\nR7jDGf17FTZfq3hi1lDOVVTcy/HABzTYqyv2trbvlUyzwOpvsesOz7aHngn4\r\nhXdnahf2ryxSwjtHd8amCnaHjGBnuxC+O5ipk0k2yzhlcm3ru1zbmYhbUadB\r\nx6HaHgUO1u7uOQBI+pH45MhNIR5agPd7Ld31YT7moyfOlGWfinFrdP84LDMO\r\nBSmXXcIhMLzLxjyJmiafkWqCegeGDhJOe62L+Iex08wSTjxQnr4gArZ5wwc5\r\naSCDX0OOw9yEnjqDgcw49ajSfDEvykWoMzVU/C6Y74ORB5Ln/06gxGE06zgh\r\nDDNOT/q1Q2q9nbVxRmBL/f1vttOiH2tZmW+xdvwHlSHhaI7qXJTh/lawT0ns\r\nMxh0412to/UFjlzIUNXippcE62RXk72cjfM=\r\n=ZHY+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw/0geexSk2tn57Sgsr15cEq1ZeQofmGp5BmEYwvtqPAIgGUwpCfhg6G5Uod1yptT5dnDYgUHzJsu81YvyZTCC97A="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1120.4666358825e573870c80608219a80037ef113d63.0_1646058430696_0.17424329123594506"},"_hasShrinkwrap":false},"1.83.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","@sberdevices/plasma-typo":"0.3.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","@sberdevices/plasma-icons":"1.68.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","@sberdevices/plasma-tokens":"1.16.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"df28b667c46b24f81ffc616a9ee27d1999775bde","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-0qfa2GuH3Fkr780H/G+pNFYCjwgpUgFjFIMIQdWaRN+GcYXretPBX/4z8qe2U55qYokHoMpVvwHs3hW4S0sHPA==","shasum":"57e379797345d4af855d4432fd9689c06d48790a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHN7VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiCQ/+Oz1jsO+eK+8w6DEtbqKWSItwiWq23vytEAP86L6e9E+Txa6Y\r\n6iKlp0CmQfS5QBvOgAuy1i/a0rlul330hh6BPW41YhM6fPtK1unv2KcPhsa9\r\nNT6aQZdE5fvgLe4hm9I18qMJPetVgCj9M95Fk50/cH1/D6ZU+G+bHPdk2u2t\r\nQUle+Lc8AilkFj7UN2Md26jPBEW75vwG9Mi7XnGpZdUms6CcIq7YYLL9lylA\r\nbA+rg5MZYY1GMM9OnvUv2V//ynwmHogT2iLKFHuQ+svXctrKFhbrk2mRaswC\r\nkKEQDScwT2pf9OFalU8bPe6uekf3Ihx0eIxD8TlpJib5lVhnmTu2BvcwZySu\r\n6ziNXEKXP6tmUhZousD6fEgeZKpzdfZn+gB2ydvSZqmXLjG9CQuAQziUH4tE\r\nON6Sbcd8YYjCrdGkdTTB5uX3u3b80C94DrWyPOKlZfMD12UWjpQIxhIzzd7D\r\ncpAwJEp1dNgsv+d5LK1X4cmYTgr+b9HsSCR5m2zioD6Gs0HENvwlsRZ+sJvm\r\ng7HKnm1h6oTd3vdvMxfoXB34jAQIJBQil/SaG2miYQtEqUvqKvVh97kKiT1V\r\nvQEC8HuHqwG88d7YRjppoOQez4P+jt/rE4hEYccRwD4N0LvosTIa3/OO0z6u\r\nuUmsRSrXTXH3j6SS8I6GxXHIUIZDVBxJ+cY=\r\n=MSb5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPi8nYPtwYnnmu8E5fRNdXJFM1u1V9VlyReYfTZqNbgwIhAMREutt2lDnQ5d8b0s0zyyhWr7xXMDc/AuD0qKQifJrb"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0_1646059221568_0.9676965388399523"},"_hasShrinkwrap":false},"1.83.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","@sberdevices/plasma-typo":"0.3.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","@sberdevices/plasma-icons":"1.68.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","@sberdevices/plasma-tokens":"1.16.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6700921bdf8c410f605f56ca5d62dfdf69d38d05","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Zo6bU5f8zEA0UlYPN/uolcFYlGUX2XMo2fh8aIXcV6A12sFfO0roOkxqwIuzjzFKZ/lC74O22Kkf8//qCtKdLQ==","shasum":"3e65fd04ee141ef732e803e01a1a66ba241b96ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0.tgz","fileCount":910,"unpackedSize":2499509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPTGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIfRAAgcp/yEMJUEOUozA4wTXI15dvxuAQMShxc8k5AcnRfQ2T9O76\r\nxBVLwbdxr8IDisNrfPALDM1hC2xQtt4/6zGokl8fgnxt5iXUXEdL1iYNEb6e\r\n8J1CFmrk3eLuBnzmg3cX4cQ0Akpc9ZnDX+vJPrgFXGFO/+NaqcCZ0r6HlTTV\r\n2eUJ4sQN+MAvlzQ/y/8jvD1/lglLKNNJaY841TKmiKM376s4/wQ2hOhcRcqL\r\n63i3uqYpX4MoyvIGr8cm1x/nir07enBUXbazmgUQO6z6qPTtYVNkxM4OaGI9\r\ncuGARSbSR2GSQIlWhFmsIxCgHJKtICc81mO1TqnK4K46HPxlvNAmw29Eblzk\r\n8gA8Igu1lhNg/G6JFYDjcrAv6EUTX330QPZY0c0E+/iFY3qtT3sjsZN1kLeP\r\nN0OXbFAiuhQCDnW21P4wEYBgFqQ+SfIRZ8qbS1I0f+0B4h/IUEdT51Z4w1RO\r\nSn27vPLR3JbkDuV/kYZjtl/o+y1Yh/mj9kHPpRvaNjWBFqQZHZChYFDfjBY9\r\nVq883z+jRqoTxQtLPQZe0kYdHgY26gTz2neRIOOkmdoqZnX/mSkSYxU8gn/a\r\nGdAO6xqFopRcKJ5p8/0lGzFzvqXKgNwlVzmpG+VGqoiiiOm00hQRkrd9gVGY\r\nLQmid0Vs725lHTy7HMJ34hvnT4/zeyXmso0=\r\n=kW9Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGj97lUeJk5OSZPntqcSnZ8RNPioOXTa0iQJKzhPm2ZRAiBXplma8B6322RHTTQ025LkbWAH6iIcGYjsKHKLS2cIqg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0_1646064837869_0.20842444321481834"},"_hasShrinkwrap":false},"1.83.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","@sberdevices/plasma-typo":"0.3.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","@sberdevices/plasma-icons":"1.68.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","@sberdevices/plasma-tokens":"1.16.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"00c8c631453c339092b02e42260056aea5d341f8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-VpQi9FbOjqAMiEeBqaF6+y2ni8r82R2HhQcqt5yAzaiRwsacAWMl6Ca5cDJp3aJ6QzYjIsUzYRpMy84WzxhUpQ==","shasum":"8656349d62a4b005fba7ca404c78047af86e333f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHSDWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR4xAAoGItWZvRV4A60K2QWyg04E8ETA+qvPuH5pRl4aZ2TXW+lduF\r\nCLR8s6O0sitxWZ6qlDMrBy7vVGUWDEjFCi/zAH+8h+Xsjvyvhuq501R5KYLW\r\nWEoaDRZIFviaNv3+qkk+SnLRbnOOKG9NSoPhucle1L+iuiJMdFE6WSUXU0uS\r\nQwZR0k68YI3/Kw6CDSKi5t5DwRdSYfZn31pvC7+cvVKkFLMsBqnRWa78RaNd\r\n8tjlJx3iVeWqM57EiSc0dXEcmHvwGIzw/r4VQLr/o4F4rWMGIb41N4x4AJMB\r\nrN++AmbDlIVRiH8spY7ffjOhc7xWlnw5DeTj/OJyqN7mjsyHC/tprTzN0GX4\r\n0C0n/nhPw/1d+lIArmLZmo3yXWtrmmut0pp+ewqor1p6AdSS8A0k4v9LU3yJ\r\n4hmYShpGujcLFyx104Smpo8gpsVAU04LAaSFGiKAODr/B2DoGz2zZ1h85qmy\r\ntq4C4uV9L5koD85DYHWeSmnZTba1ndDx7i+iHT2mR/z7I5eLqstbKsj2FYVJ\r\nm9l84RbaJ+A5tIcfBocP5Nw9BbmIcLoQKU47XTMBL0jigZSnnXaFQkms+WNu\r\ntEMeRUmOH1lKzLeKvZQMsnMFsZPZAxlbDDHrZ0ki5myJTx0eg6seAFogdvGI\r\nf/MWAdU2hqAkJK0lcEcookrIlN48D6JWAlw=\r\n=4uA1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDArsx8y3MyfpfE/4CGA07MUfcnZY55uudNGl4eQu0wIAiAbobFgl8V/qGEu1WB1ohRofYkk6TcCHLM4CJh23awdWw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0_1646076118457_0.7979045568706173"},"_hasShrinkwrap":false},"1.83.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","@sberdevices/plasma-typo":"0.3.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","@sberdevices/plasma-icons":"1.68.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","@sberdevices/plasma-tokens":"1.16.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3620d9610d2e0b694ab3b1b69fc935fb83e988df","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-UylsspFxLPWsu10HCYx/MXkQUMcM9RA6dQJXemT+9lPZX1Pl9DNMecOGoeX1e7HNLUfikwX8XHFc7Ugg3cJo1A==","shasum":"3867e097f97dfc0547c7e31151b3230d4e3540f8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHS2BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/uhAAjrEfz1KBGoldnQFvYOIMX9rlyDkGbY9sLczboOcmZi1p3Kh7\r\nvRQ1hrcpUpvnl6fIAj6FUtUaXS6DJD1ZpusWz94ysR8/6qAS2Xp68T8yrVUe\r\nBiTk2nfPc3rcrQrd53mafOpVbvKSEgaYOGDZuz+5hUbZit3bfw9cXtJpexKK\r\nKwKpobdJ367wfYkgSbsb92b36di4kRp6zjLP460tKrZzYdvYrpTqks/OMTX0\r\n7zsGX5agdKALo5b8SFCJSvOdEuUndPphJT/kzwNgsNH4fntnHDtmfTCVJ3aO\r\nfUM9vZ3yk5yM/j4ds6zaZhGfiWrvrP9iSOpNNQgzgB2+5pByr5p8NP7E0Jgy\r\nW1dG9qqcATYSYbZ7/MEHySGHaR5xG0GEZ2gRsJrdAxUKVICRbnCxTM7RneOT\r\nqc+emCnGurBM+od5VCStJwGC7JYwtHVH6M7cMFHFdV76t8Fn4o22CNyRBH4B\r\n7mZN2zo+WQxnF5AxstzGn0tj1i4duVgnrQV6IeeFVEeJvO3AuYF3HD8vIjst\r\n/m8Cu/caD0yUILIkUeTuqDLBvoZsxdLwkhSy2Wl/kvw89jocDzjBw/qrR0+x\r\nhtG3NnDXKq8AmksiGO48usKtO/EMGDzZt9baGgePOqsQHjvZ0oPE2F9xAtSd\r\n0xEPFbVa+Hd7lWWwHjGOTmOzmdg5zj3UprQ=\r\n=q8Bq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCjFXTqnTf3p1SYfWrsjKFQ0VsyPpFX4zikWGCHJu29AiALnyjW4dNSEB6nLNCloIZe/3HP9zvk95xEOwB14mjTeA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0_1646079361298_0.8722232827383694"},"_hasShrinkwrap":false},"1.83.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","@sberdevices/plasma-typo":"0.3.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","@sberdevices/plasma-icons":"1.68.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","@sberdevices/plasma-tokens":"1.16.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0ca5258b15342bcc7a35a966113ceadbbe7dae20","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-/1rzefCy3gRA8GIky8eR4l0TO1itnPnNsiE3jUPIZHONB+Q4pptaWNCyHVIilDC05dUYPUATAUSkqrmgPRn6jA==","shasum":"6496c3ac21c0a0a5c2e8650ddc4dfa0c55bfc6e9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHTqMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqblw//cVh+64/6tuDPsJJ/IsRtwklL7QunjYrbQJ0OcwGZPOsPf3It\r\n0cCKROauji8USLygFnutRnde4h2uigmEd1u1DOXLQa2h4IRtjbqJxxqwTsqk\r\nQIbT07rMBBUHPNj/U0kUVIwORtxgyNLK4imNzMKhW4Mcnn+pboEA5NwWbBmU\r\nPL8pAkeI2jsZSMhA+rm9xMB61RPTI4teaNXj9zj42KAa1KSve5MhrgwGbvg+\r\nOEdb5BtLOJ8DWWQSJcYvSA1/h5QWpAYTOEMCw2pmAOWg5e1fM9EN8PswnyHO\r\nIpg+2IY2dAa4zIOBRQZ0J4ChkaickBcfLLOauhJwfGXR3/0kzycSi6R0GrMK\r\n1EUtS3ojB7sq57tbjq79bghQHCDWz+jBzzucfNaMf4YafFlXslRFL21KhCld\r\nCVFzVIbzcn/twLx/rLrknbLIKmqj7kRvZbjP3AsiLTMQr7g2t8xOyY5XyJub\r\n2wVr7DntRSe2urjhqKb2nENxpCAZBwjN0oMJruwFiyYkRNteuE9g0AZC8CmG\r\nBscfMUi92ILS9JMPvnp2709OlDmN8v4QwA1BapnkQLbweF5nNslHkx7qc+dM\r\n7qogk8wWvbCpVfvJU03Gz+2bf4khH8uCeqtTHlKfna3eIRIQl/c1rr+jW/ga\r\nzxTXHikOmQfe72x7JAWoNtPYmVR0yvJgk8U=\r\n=nbsm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7tNqEK+/jlJ++s44bburhdnXtVnFtcbe/QCqHP4BhTwIgB2jKuPgCfK0j9Msk/seLL9OUabtlYUkdNf7lS+T2Jas="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0_1646082700583_0.4390547961775204"},"_hasShrinkwrap":false},"1.83.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","@sberdevices/plasma-typo":"0.3.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","@sberdevices/plasma-icons":"1.68.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","@sberdevices/plasma-tokens":"1.16.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5bece646bfba6da2083d59cfd7344647f345f2cf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-eW+s31RYNU+ik6+9CG6nixOGTQiEnMuNZgYlc7JdLx7m1eTvR8tS+LD+dhO1CH3Rr5cn5OaUULQEzPoVQud7yA==","shasum":"bbff2f289d9a6a0197da163fe582f9651de54d13","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHcpfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+1A/8C+GLeXQ0cxhFfwcbsSKqFuDoZTMZ/lZ+dW4xHF3fgoI9I7qH\r\nhGE4qQ+c4f9J3Bdiwh+NK05YJFgsQXQro/oZcz6wo6wZ/SW+a9fLBQJMcbz9\r\nyr/LflwkTB2XvK/7EV5iv9kmQ9UL6Txuj7hh8h+M7MjpIeMl7lmawfHysGNv\r\n44Q+1sE8Gz7ouAPvf8f9fS3bzuafpCksKnovJe02fMrOmEYFJ5KCOqxBA94+\r\nHesp+kmiNxeXbvVGZpn6NA4CfTvTkxdo5wY1LamqAa890hNSl+X0q/xXXK7m\r\ntuQslPa/8+HjwkqdNVMJQzsfwFz9elWehciFbu0K9Fx47sJ8naN5achb/F9O\r\nwiKtpIfYVEwdTxppscmvImxibsPm617bqk+WQcpJieluyJyQhCceYqwqzTai\r\ndvIIlfRa74JEcU6hRPaRepsUGIbHQVyBZwEmXzBXZZ1Ne3Z8VFxQAJnJuqnM\r\nDXxSt85NNUV83RyU2ecso7piIhfZ7Vk+vAkRsUlqyQEXCyIBRRkuQinaL8hf\r\nunSconPw3MW6o6J1zOj5HpmtfZJP7SMBLfovDG2x7IFiRBHgWtsJ5KudjydM\r\nUB+LirUYdUiLJhpYRjlmbx0CVuNamZ7PHs/pk80BjoV0kPQCk6I1SqMJglgT\r\nKcA3F4LwmnqmQ23eWTEYtDDxpR8S6XXR94Y=\r\n=5TND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqJvDFMVjeezgVOZ1CsheB0HQU3VupBDSkl6ll/RVkBAiB1F6D7/8zWyI6mRz3Sg//uBBWGlPy4xW+p6OICelbAMA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0_1646119519302_0.34087199023986114"},"_hasShrinkwrap":false},"1.83.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","@sberdevices/plasma-typo":"0.3.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","@sberdevices/plasma-icons":"1.68.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","@sberdevices/plasma-tokens":"1.16.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"fdc36875cebf8c751db1c308227e8aa8666c5c8a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-QBCEEYZAUbT5SFY1B8A7e/cVuCR06/QMj1OXiT/eiDLZNd9/JkHSu5gHMJBJquYCk0XsPT9bHnBPavuM6G77hA==","shasum":"3638814e9612e7b65538e9b0323ab13db1506be3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHdagACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/ww//UBbXCYDGoxhLrJSzudQ1X2b8Lf8aNU0iqxY+iP2x5VAfSjbr\r\nwoSCaj6CKgCvrb/A8+rTSxPtXLCPWpXvBaG1R8t0aVzZN7Z0yKFhSkmTgVzP\r\n1yTKoGjfuvj/228PuRxCfn4iF1dHoVKQVcErDhBlOAIR8FWKxZkMG35Yi5Hs\r\nFYTk7SPy8H8AbIJwZAJ55+GDKdJkoJdNJltWWFK98qa6AHVPhMGyTNYtWbI7\r\nmnmXLajxjWLM2Ygq5KZiLCjzxGOFKdS+T39yUKdclPA91fIFWPaYWydLdjd6\r\nwFRSK1mVvRZsqQQUB6iEH8nh4LsJGyw2+YOz9ODlzkIFaoa2scGAwUu/Yg70\r\nrc4MSj7+880FBKurwxLibAA/HSj1L8MP16rbBd8P/HXELmf/s9E5+tRTHnMr\r\nlXLcejU12DDVRlxwnhhszU7C3J8PbxBbOtJQOIueJLvzj7HqzynTgYTGWoL/\r\n3w7RjMi2lzoTv+XDBUoYdU3McMSFogiOfCqp4G8kttupFYiUhHlLDcr474Ct\r\nj54Oc7tfL+ETIpcOX0CUFqgn/cqU+dF3OKLmLDiACll55JP4OW+rQvbQSXym\r\n+WPmWPkgoehRMuMvECduCNXjuoyL3sbiSnfR9LDtf2KpiWV2cOLuBSK9NWFt\r\nf8GtJBec+TYyjMV/QpKhcaNNfW42FgyD5IQ=\r\n=1Zr/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPNx8bSZKXq47rljt6iIeCF28vRakvSsPWMtQA075cmAiBjDAttgg17aDGk31/jLSHzT9NdLGaJCMnUzHLEvVfzdg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0_1646122656286_0.8834513361608669"},"_hasShrinkwrap":false},"1.82.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","@sberdevices/plasma-typo":"0.2.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","@sberdevices/plasma-icons":"1.67.9-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","@sberdevices/plasma-tokens":"1.15.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2669fad2cc5e5449f3dbf0b9da7f80d1b371b152","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-e4nNvnyIdRQCHlMf+ExsXdP1hb/05XyRPJi6aOFONtUIqzROoc5XWgENvkb3WpdWtx2ZnNYf3+DUUvEcnCWiKQ==","shasum":"c4956ea7a0f863da70b622bc224b28c3aca27c9b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHdayACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCKg/+K1Hs+psLEOkKwR8ozuPedwLh9pLbpfYaK5Wf/rKV9F8kFKKK\r\nsyef4JbVVrKouSPfaGpRcS/lUi7dz/PGtpC8Fpt7+He2AtvYjsE3lL4O2C6d\r\nZNCEeJ864f3XQtkVqZ2r0/LgEvV3FeoG9NIo9gM5W+NyfLfGCnVNcOzCqiWM\r\nMzV69uh5yXU6qQfx5OVZtqV67Q9Z0p8bAtNItu5db2TxxxYIxyfBZvKQdqXi\r\nf0w7SDzl0nto9lfWWfkyN20+64FUfcaUWpmc+I+CUIJCAiXC2Q6o66812zA0\r\nYn1sEahPHsVk6XQ0jHdwjJxHEHa4POWDrg7lkTjy+aycLxWxIg0DHq+icnl9\r\nx39gQQxuJVMh8bMiNXl2zvdC2GiyrEuCsqQD6VlulUtqKS8cMM/+5plecWUF\r\nm/ZrYlJnoPyF/T0cBbPzZEfiOUU2tfz0fBt/UX6MbBNF0RVwIfZV+GCBm2tP\r\nH2wF38CvTAsG0IVBNnPu1hFAn+IOvia9rkfhRdn9zE5R5FmHQXV+MrwEAN65\r\nnooGMw2iIq69/lOQQuIvzSGWObWeQTzQN0YahIMyCJ+P023M1rVVfXMVCS4D\r\nJXVUOms2TccWhlHyRjjRR2B3S8VfNroDe8lLJEU8mZfQH5JpUBpDPS4RrEQM\r\nLanPNg5PkwGcyIEXRnWXQKpWK784G7HVYUk=\r\n=FkBX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZLEFD2Qog/ECWSqxEzT+u8I0OedJcOS+fg0YqXv64jAiBFWSZQ+RDQYE+BR2KF8MxZidEnh0tP/0Ff6q2r0R8HWg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0_1646122673834_0.026014328410314924"},"_hasShrinkwrap":false},"1.83.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","@sberdevices/plasma-typo":"0.3.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","@sberdevices/plasma-icons":"1.68.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","@sberdevices/plasma-tokens":"1.16.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"17aeb7a222f749f03f64f328f07c7496b73466b6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-f9iomw+HiIe77LSFIvFr8xT4IiA7ewbL1GlumYqSmpZDV9QHkbNphYnxfykqRQM096nJWysacEhfELML14Qitw==","shasum":"0aec74fbc23fabb977ee68eac62ca2e917c14a29","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHeRBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0MA/6A477D00x9aY1s558w1x82JXhhMvEdO1D5IzEXxag73Mu8M3L\r\nnuY56dsWFVr+TBvIyORPLl0ZRJu5B3ArdMn5cU4dG/V88ZxKlBIJG8ku/dUn\r\nT0RxKrvC4Q3sXux9bhdZzI3nQJeZZu76bVaPRBlXZLDzCG+4jNcr2P0Yz9i1\r\nbzG3fIZP9PrdT8cjUkmTdfxBzBq82PxZRF2U4X31nVC0xi+PVfz32JE6wfQA\r\nFjdBjm50qpJbYF2zBZFUiv825O3J+wOYGbNg1iZOKYy7RqeG/pWZzN3q9FgR\r\n64YmF6hyPQFCS8YVHc92AQ4PoquBQhJs3/JX9Pm5iApyZIlnGl7rHgTwEf9k\r\nS6SZc+pDkNlrQ1rKujzt5s328st8uhSuooozSOpmpfepATSvwKNPtHiGe50o\r\nRwVrkBKOeZGbdDRXwSrw8WD5VuAy1p0qAxR4Gd5sSVamUn6SE+OseYxtr2Zv\r\nMNid0IZU1xiBNoH55vPTccmuI7rQS/2u9IBLLrpjEXvjzfMijlUpr000JMYS\r\nGZjhNG0/67HMnsYQv69yk4X1OeTu8z9I34D5k9+raU9ykGwCrGtvv+aFfjqr\r\n1WSvWDJ2FFkL6iRCLjFpbgNrLh6TCdocvUhgeTHX3CfB7MW4laxsGUFQD586\r\n7Mepzu6OFvrRavH6Oru7p++c9bn4APaiVDo=\r\n=rn73\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDphmStAlP0xeNOgl/mtS/LJA1vGH4eXnRqD8N4wVSOEwIhAN5D1sA2ZKjSTDsiKrU6hWr+sElRW9LjnRKmn9rcJuGj"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0_1646126145423_0.3991845150060622"},"_hasShrinkwrap":false},"1.83.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0":{"name":"@sberdevices/plasma-ui","version":"1.83.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","@sberdevices/plasma-typo":"0.3.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","@sberdevices/plasma-icons":"1.68.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","@sberdevices/plasma-sb-utils":"0.49.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","@sberdevices/plasma-tokens":"1.16.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9668e807bceb68aa6c65a39fe84f998763aaa2a3","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.83.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-P7YwYZ47diireAj1vc8VXJNghBeOhDqZ6MUmlXBS3C2bxB3Pdrg9UTSKYxXCSVNl1/3sZl+SqKXET8aRETKEqg==","shasum":"270f3317a5ac6d28c505a31fb137044b2a61e776","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.83.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0.tgz","fileCount":910,"unpackedSize":2500719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHelAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8tQ//WTwRkG/7Eh0xDBSOXhZ8wRjHKyJ+4I9LiAShs5bevMOoGe/f\r\nRx+DXLKNC53ga5wExW6MHb5uVhfZsC9A0NLte9kxVoFNIkdNM4hZJmDT+HP1\r\nWe9DYUYGBHY6jsVmp326S56WIQyyz+omiRp//8r4WTohWpuVvqHjI6prCrfC\r\niW97OyaDBlbHplmvmbW3SmxPg72lJljfhFH6u0Vger9OsxPKzNPEuJRJuGQ6\r\nLcGM3sqYXJPu24ThsKCQMPsvMy5f1kSmanUsiBWKubAHWnVxzuXkNMr1KUY6\r\nT+CmzNvnf1Y9tyeKu0a1Hk8CYh3SKc8GXMUtS5+uqHJX2v+wrppt97iXNLR3\r\nLT8t2troVrJTMcN5cRauHLiZJqOIR04ILiy/DTDvnw5S6XdEmId2yM872pAV\r\nm8v2c3/nsiVlKDAIeUlaFqBEr9COkox7PltkNH1w4eZsCaDyQ0nfV5FSCKYy\r\nM741IXkRg3vhnLsRHNomc+eCXBePvw3WZ981vFWLKr+n1anEYEG3K8rDpbIp\r\nsRDEY3RtX0WmF+BfXINNXAaMhyNvb3u3riyobsoOykEGp6GOjikgn6NP3wVv\r\n3sbcrMm4QzI3xNSP0r1ldDFert6hJyQFlc2ohXaEsqGoH3GUboD4L9WlPxHF\r\n5JAaN7/nznhyZXwbLnllxgs+cW1tjS9kJC8=\r\n=NuXW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZH5bHImId3iOD/32g5ojenGSaYvyKFKRkPK+5GDstOwIgaghzGD0+M7ulc1qOMM3/SOte1Lvyi7CdMcRCTHgvsg8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.83.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0_1646127424266_0.9613220593056429"},"_hasShrinkwrap":false},"1.82.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0":{"name":"@sberdevices/plasma-ui","version":"1.82.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.49.8-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","@sberdevices/plasma-typo":"0.2.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.5.6-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","@sberdevices/plasma-icons":"1.67.9-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","@sberdevices/plasma-sb-utils":"0.48.8-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","@sberdevices/plasma-tokens":"1.15.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7fc21de2ecf2cecdd09b9e43c051a290a5887557","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.82.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-IfksV1+jz7A7PBu37Ob7a4n1mTV+xjvY/LQG1K2q8AtZkZzMmOwa3y1TIWIOSNM5mNp72+qswwKKbHDcxT19xA==","shasum":"c88a06edd798bbab4dddfca09b289c2dbd7f8c40","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.82.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0.tgz","fileCount":910,"unpackedSize":2499417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHe4rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMAhAAlSgeck7VQjlYNbG12Qx76zGZioe/5+BzNIdR9GPqyhdBzIdo\r\nUuLCs80gpd/1osNNndJmOKkSubGjVHiOsq8g4elUnF/T4zqxzWUxvsWmmilu\r\nUmf7YxFnpRrabERjA7ybHKZqfB/wYuU+XMgqqJ53u7atRxWinC4m3r05szqI\r\nbrD8JEVvOk6rc19pYX2z97+MJMwQf8ddGOpCNji8atO0GRgwkPj4OKwAApzd\r\nE3xSFwB0a6ciZhpkqv48skC5x4+jGnisxyVsWJYPvgFLAw+UbVRUkWDAKVGN\r\nn7BLJKqyUvtqJdtrv1modWrN74lD1/Rh/yj/RLHoqF4m91QJzboRcmYfPN/E\r\n2Ahza/aZFG+lzI5EdkpcYrUG2ZHZh+Vzfb0vOZulF8B09z9mKH2XHx4LOEuL\r\nYxXTaH844q5kF8yGxrUkvib3FNsL0pQVBvfLKvAdacapNtnaif78En4ZO3RF\r\nfcIPx1XgeS7BhI91dxMDdsBOAts88CkLO153ZFdtOMZvpZWoN60vGN8J8EO5\r\n7KqQWKsOG2USvXsbF5wJjDJXSVR6lHJynBJCR+TfhvjTmQAQcK41+HxmVXYB\r\nttCE3BZeZvc0dkm0EOxedSHUWtPcr8iuyBZnu9PeYCeCHMZ4CmM5DQgDQW5l\r\nAinfPIBEz/Hkat9OfWrLRiJXViTLh2ycfZE=\r\n=FcHT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6ocZLR2RiVcxgKs1M5mlfv9jYw8IU1ivAA1Q8qTyTFAIgOm3y5Jk3Y1T4GVDQTCMM0Eznu0nXzsBLejx7CTciFiE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.82.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0_1646128683730_0.8743691159271199"},"_hasShrinkwrap":false},"1.84.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0","@sberdevices/plasma-icons":"1.69.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0","@sberdevices/plasma-sb-utils":"0.50.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d61150b6998f67c4aeccd1ae9736fd0d91b4dd22","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-LP7UgZvg5Dc5QdV+kdlrjR16S06xBnVJRURxnp8r/BES3Q2zZceQbggNiVxz3+e+SFpgdtwoSUY9yHekXpGhRQ==","shasum":"9aba8156fc9db8075b20263a44de34e54b4bbb29","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0.tgz","fileCount":910,"unpackedSize":2500776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHfG7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTMw/+Ob2gbxxPgfSf+64P3XLYL52kYAhddCHa+oCMkE4zFKko6yey\r\nSGfTLoos5OFd2G15ApXWmLYT7IBOxt68ptNoYZ0E+ffhNTInOUQD9feClCby\r\n3XfUtuTWRRJdTZaLxUNPSNySD/FuybzD+SiKS2E3IQ3+2y+WPnEUyYV7u6o6\r\n4ZP2zJ0/HTs1mWDKC2wRpRvDlh0t6eVMj2PEhUYEA6zt+HaDW7D4b7xQAa7K\r\n2m2NJilNSFLAeO2TL4B20tVKeszTGKX332snlPFGc0XjSn15NPAZM8AMFnQ6\r\nVGW+J8cs7FtzVucQO24f5W83EWDMwEJEAYm3mI4b1dFhkHYFLFPyVyqoP51k\r\nje8CqXyRW1S84uWox3ZC+PLPL+CWL3Vjm34BmLIbA0pjhZCF/BUHhoH6vmY3\r\noo3YshgOctkTjfd5UzvtLR6YFSmeN5I6l1b7qfljIkf9HBTO5onsZgwyYUes\r\nhgKNQjVqL5fb0Fj1u6Ipw0f65U+YV89hzlyd7NY6SSSD/ifx22Mw32zX/lab\r\nNnzz78qv77arGBcTYU6ynz+t2W/CNf+ZsVvxF5MyLxa591VKxBK7etNdue5k\r\nWIPIABu4zZ+cSAdPKKj9kfG80+H7WYGL0bU3ggBasRzMFV+y7H4/Zny2Iv6T\r\nfgnkWuLQu632MMRYttvspqaQWWkK4mBvWWk=\r\n=N7FR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOR+m01n8vsSi1skbXHncRxPfrUixzPD/6GO49gpp5YAiAOu1XzCgQCrcRAH1NFZKFvrEX4OqzQKnDI/C8EfV+KKQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0_1646129595662_0.4818703869626735"},"_hasShrinkwrap":false},"1.84.0-canary.1124.9d757a18abebacbf765bb919e1f3165a446946f9.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1124.9d757a18abebacbf765bb919e1f3165a446946f9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.50.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.6.0","@sberdevices/plasma-icons":"1.68.0","@sberdevices/plasma-sb-utils":"0.49.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9d757a18abebacbf765bb919e1f3165a446946f9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1124.9d757a18abebacbf765bb919e1f3165a446946f9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-YTqfFS7oUrECMO/ns7aQCIrzzQ8so3zhRJBh7mLBwoCZSmR+5UctUUdqFog7NejYFmMgrT+kZS6nINyhu7M59Q==","shasum":"93102c12b66f62f78f4ac455b92e00506251beb1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1124.9d757a18abebacbf765bb919e1f3165a446946f9.0.tgz","fileCount":910,"unpackedSize":2501250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHfXGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJtw/+NZjzWOc8tCVkrkWrrp/qgvcMr34Rsx9s65GMHt15rJx/H5pZ\r\nXm0Ay+dXprNr3Ni2eo4WJzaHIT+KzJP6PDQPrbzfNKSnFdaZCLiHEQgSX4gw\r\nglFdqeMpzk1hRBcV1n3TitJuTW3/HjbY2y+DqsJxj4ZkAAVcSyZgZ9rQjokf\r\n3tIrFyIjmwQEyAoa3vjAnsVSKuNOVIQtF+oEsV13akfzdO4uVKOGE9GNzGwv\r\nyi9drdyQhQGghpH6r9crqVpHJ7kClBb6LKgcEBDGThAptA/wxwABC6umiRow\r\nQ0u5E2efprfViQ4yeB+TYBK26+BZ/2QBMg3MyD5Zm5l3Z8Bq0FFy7qKIDg8R\r\n8bxWO5hqnw8B6Q8gfdIuCP71BF1tXasrxK3+fNlpaZDnvIi/c4brDdA+cjSy\r\nlhHVjUX7zBmSxBWLE7BWI6q8VzYoO5Q8gCfr6QUSAESMaG1kjgLy2KCdfHeF\r\ntxDZ3RoIdyWhNU02/o10+uo6JI//tHAde5YxvVMxybJu5iVfeDkuoi1baa2l\r\nTRjJpk+NbwRPt2HNAbNIs/fnmCAEK1SBplWzDshGPsA2E6NdSkvEYjsEfiIT\r\nyZ7W21sYJHcrW82rPtbsZ+KXv0v+hZRBSBm4ZMcB31i39bIr6TLFeXTDCJ/u\r\nygTdvvTGf1Q3bfwvKiOoNZc532FgmFalIJI=\r\n=fPDR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9MNgeaFDFt78Z3pGPtqwYjvDnwsnTDyKmtVF4GnMFEAiAfFeGgv7jkXlBUj+shTyKiARjZ9+WVF33lfWaFwh+nNA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1124.9d757a18abebacbf765bb919e1f3165a446946f9.0_1646130630647_0.8715551816831026"},"_hasShrinkwrap":false},"1.84.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","@sberdevices/plasma-icons":"1.69.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","@sberdevices/plasma-sb-utils":"0.50.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","@sberdevices/plasma-tokens":"1.17.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"32e535bee09652b2a12b19ece7aa2d3971b451c6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-eCjzp+z8DoI/V5umogB/u/ZwRZRPOgwK9/wRNVrmsr8p9/DN7JGQhhAUuFcxucw85KRobCeWXE+nlvQ5hm+/RQ==","shasum":"a4e6cc1cd29a3a799e0de706e80d716a7d7bbc2c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0.tgz","fileCount":910,"unpackedSize":2500831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHffTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVCQ/+OOGXkfjl+COYkasAryauBAP0mYorHVZRKBg+TcrGAiZkLPFC\r\nGYKIO1A6rqQnFCSinVkpdCVlMNWn3VeNcr65vAYI3ZUBYPqJJyrnxF66V1RK\r\nzNbzX4+StTzDEhkfZtc+Ou4WZ4ckhQbh9hLSeRhRzvXn41b/wi2jyOxTqWFR\r\nSkuXcbxza+r0R6asFqetUIDdInL5V7AAFydIX+29QldgHPXOTqjjQNKZ9EmF\r\noEXeovEbiCWiru+ZohLCAVBekpmaKUnQlS+JD6UMQAaAx3PoeKtnmH6pJ2Me\r\nNLJV1HyaD43nxlQnLUXfbKNHZT6HfpHX4FSMUAUoSIuD/nZIM9JqBaWdRtj+\r\nzAUfqsuT4LisO2NPeyWdOQxiUtm9270qSOPWchhDa7M5hu1tSwjkmksrDCyv\r\nmwJ26OK3oyJsN+f7qdjojihZdf6i55zGlFaGP/sSJh3omjiim+1ACm8GCXIh\r\nx2pGzeZLDfnrjdiUHWaUy4dqAwHGL3vm0rNTd5VfnsdMjHFshFZU1DkdMjcZ\r\n/NhkhjkTO6+AhQYhpsu0DnXa4Km1KaczCDGQ3eNPsrFkQPM6TKaUH3VQ0G+Q\r\ndIACWBgv1nO4LF67LRnb/pUcUK9CGjR5J2cE0k7hHRcTQQUfBXA8I4Hhxgs7\r\nM8AbFetEej/bYyWBE14txuorWzm8cLE4hZk=\r\n=kh3X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICs6ejgVovhwWhv121/Yjkr6dd0Xr9CkYOmwb707t3m+AiEAx9vUaVy2RiZomUik/YpTr+twR5NVdKYPXmjd9daIM2U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0_1646131154912_0.049476079989862365"},"_hasShrinkwrap":false},"1.84.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0","@sberdevices/plasma-icons":"1.69.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0","@sberdevices/plasma-sb-utils":"0.50.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"654568687828249d54fdc3d974535182ca5b5284","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-fdL5YkuS3df+2FyEWQp50cyMNlaGH2SqWUX728No/1cL5mZCy54DnWWs5WMWvMNJVsBj6q0QFYNVC7xdAQ95yw==","shasum":"301829ec9a2363fac78b19ee032e20e593fb8e5f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0.tgz","fileCount":910,"unpackedSize":2500776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHfyyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrypw//ZRrPCicE414Llub6eC/cTLRl5raFbQ5Mlgv1+HqN7a+Hjph1\r\nHeINUltPYdEXuPerMdemOyW0qgoTLwIrut7zpCJ2BKDe2kAA/7O13TUDt8T/\r\nS7Phw0+OA8avY/v1mn5eVY6nMjN7SFKaAUr0JQIC8CmAAGhlRAS/HCmWGpUA\r\n2+ZrvYkNLfquYb5oXObml32HwfKf0o3aI+aJN+KZDNxccy/lGJPyiWnfblK1\r\n4yTvdiNA9Kfd9Z4+xZgBGWhlL3y7g5lOYrBWErUpLdtuoU+ItX1lF+wOHKAR\r\ne36QZysWclhPCK4XucBNgIQNJ7iAbCxMtz2XGsn10umdo4wVWdpEBjqFAl8x\r\nJM1cgEOQ8butCjhZpNToeP2VGEZYFx5gGVjTf7Eprr+A9O5ALyrSfyq8TMGW\r\nB8l1zd0x0sNe6SPUv08wxPhsk4auPyn434aVHHlIGX1Z0Qu+CsGLVQUBczb4\r\nmqJcPrIwAR30AtOL8Z+v4XUSQAW7n5siuZhxT0+UpWp5ji4gKxEtJ8tINYXS\r\nYdYCsIeToRapFR7vzMCrzH2XvHPhLnZepeDLFa6TQ701Hb0l0M8RYooCrRG2\r\nkPFggaL5aFBn++q3En0L1WdDCZSIO6fYO+J3dd6xjHVkmoFmfQz4VReZz8bt\r\n22f2HQJswqtqT+91p815A/yKGCIyuRguQpU=\r\n=Hc/j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1touKLr+SZURyxc852f0jr9Up3Y8Puf/UEx4guacEFAiEAjhRYjaeoJvD8DTHZbmLL2FujjiugMKGt5sycUhvXTg8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0_1646132401820_0.6647290200189186"},"_hasShrinkwrap":false},"1.84.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","@sberdevices/plasma-icons":"1.69.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","@sberdevices/plasma-sb-utils":"0.50.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"92dec2df61b77342872f5ca4df2c770fb1c14108","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-hHcELLprrX6D3y29pccM7PQF3v6RLyaQS43qwjaCKioAfEtQeuxKYWjLIw6tAN62BZUMR08KvRA28psl22SfWg==","shasum":"6ffbcf8d80c48ad01ebbdf68cad535195511a7a3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0.tgz","fileCount":910,"unpackedSize":2502133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHf84ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouvRAAgzzByrLvRYwUIDOA/d+y6gXZ1lzKbzdpeH1QZypCDUROKt0/\r\nuwLKlRipKnbh4HPjpK/CNCACGIBAAXO7Qfd3SLf/uDFMEluVyoqmxLrBhXqR\r\nHhyqyWXV7cqhusaq7z1bDbxYeZyZQL9sAv2E5hE0GHovzlR/fF5adv6FjflH\r\n33nv9AY3z/Xa/FlGfLjEk7LFLde5tEaJ5fh2H98kmF6nIwHBdtjiZCtrMxpI\r\nfQoj621R7xUqL0vT9AwUKZhdOyP6KIE6jKQzvAlfHIQYQ1/L9NfMXK/DOdKr\r\nFW9qj/bEZHuQJXtLY5ajgw6ptdlwvT99Lsjb3saetFv67g6LtiiE64O8WTxM\r\n0c4djkRvBSY8s+kf/tt3NCQtaNCq5cSRo1HV7l34JUcPvFRYUiA0j5m8VMCM\r\nfF+doIHRHuGZqM6kn/krAPq8LflhsBFi4voYo1BXfLtOBt9zqQzjRJLxC1Wx\r\nKC1piirZSv1DAHyWjmbOOrKXTorCdERxZ+EZHfazZ3ksRyuc0415fC6Nhoc0\r\nB5QURqd86KSqmQ7e4JvYs6we44U6x3vp1t5+OcgCZCkdfzcyqqjVKqmT2CWc\r\nHYtbiQ/TWnvfr8i7kBObcDHmk9xy7NeZevSH3BqcoOw+vKxOyXfo4l1hxiky\r\nCKARF+7Sx26tTd4x6X9k35kBCamQ1F4vOjY=\r\n=fCDM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxaf+pgmqI/M6xpyV9maf4mfUebzilCO9Rdv/1CB3FbwIhANENlW+c8rwEd160sVvFXHI17BvhhmR8j3RcAgoCJwPh"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0_1646133048212_0.11313750471419004"},"_hasShrinkwrap":false},"1.84.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0","@sberdevices/plasma-icons":"1.69.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0","@sberdevices/plasma-sb-utils":"0.50.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"60337f25483494318362a1c35f8ee116ca0fb566","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ZWxV4tp0p4cNeGZSgpIyjcUXzieKd4mparMC+bwl80T5d+eEbZrZ0UcW88rkPT7Dx8aFDa0ZHqx46Zb0EtHVjg==","shasum":"63383bf491c68d6415bf562ed4ccbd95a35eba25","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0.tgz","fileCount":910,"unpackedSize":2500833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHgIUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraXA/9F7q7QTJ+imiGG/sYypZD5mGx7xb7Pj3YZVoQ/zvbqW1L4w7I\r\nw7M5S+dRvFyCLDsEtTLlYj9MtbTlLxzPa9hpNeGz8AroKhTef6UORlf7GPad\r\npTSImyh/g8Sn3WaRpRwmptwCYefoByxKDUjVVIVXSsDhtI+UKGL7llIoKRuV\r\nhXKlqeZu8WMcudmAZLvYgZbfnt/OAqi8gQQZJuJvPWLWRmeJobZ2WjKSLgek\r\nM/8fLWh6/qEOJISTKxiKd5A77RQ06xLC1Gc/jcULJeVSAjOcNqfYT4yxPn8F\r\ntJ757PQ49eJfEiaYZ6W8rVPjVg7KPd3VWf64gKT9SFYuDLJRY+fPppEkyRS+\r\nt2LKgTrrrjQmToNiTx9KVdFR0IA8FegTByPruJmRzAVTVouSmFhfS2QUP0Wb\r\nyOqyAawyGiIgMDSDAAqasYRKOI0hDzm2jhuS10LrQwIVvgJHCP5AsF9A1MhN\r\nKiBvhzfJj9uRExsWR9DZYVuZv+AztzfQctGY9ZSX4GOvxRlK7tdC0tyZVzpm\r\nfafAbV5J437ZenxpIlKOg5uI4yb1a7YQX4a/b0stY3phunU6XSWBCMSTJS0s\r\nVxWbnysGN7LgGQjFpqosfRtCO2KWUC4NOYHAth+6MPGHeNILWqmW4BUSC/n/\r\n0sp9/V/X6kS7FsqZ+sXWh6Z+S+rBBvOaI84=\r\n=KIO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8ltqOWfKRynM83piNXhMxG1mRWE+DP05UgHoc2XuqdgIgFrtLKB+GYsaxpo/R5Lg7iV8j899Zx9WzT8h6Bi/OkFI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0_1646133780375_0.0162064839183651"},"_hasShrinkwrap":false},"1.84.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0","@sberdevices/plasma-icons":"1.69.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0","@sberdevices/plasma-sb-utils":"0.50.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3bbfd02e9ff83e959d53252f09a444ab323d26a4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-QqTc5nI0bz5V610Y5UIiLa1E8wi3GtAvj968buNdyKitATNAOPssAg9THq7SSAxbuML3f/l8WYtzsZ+ku/4BXQ==","shasum":"ee4bbae035f096d292e4a855b031d57328f83fc9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0.tgz","fileCount":910,"unpackedSize":2500776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHggSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYoA//dH8a6L//WqA7yRKw8UIK77JZzqq+sA3WgpgJV+VhUaabDvUQ\r\nh3TW/F7Ppqb2fyfRpAc7zbmhHWyXP2QMWF23+9hafPX9UJ4g3Cm6qyUSbOwE\r\nPIcTolCTGnGLCQCcSNcsVMQNECzGJ2sroA3NhbPcM9Y+ZmO4bbGPT0lfHKlm\r\nXsEu4LOMh61n1fsyeoRPxnq3pIiBxFHo3FDbJteHO/l1ZkxL5MVf/Hx8GfZJ\r\n/Ly1dCnkFb4RtC1lOA1BxgLknfD31BuWB26UoaeeNMc3+nGX8IqOu678O95R\r\nePb60xS27HRw4ip+rf2lLGmPdVk2PltJfDb+NcCeqCNPwlFnf+auozuRGFXp\r\nfsPtHZphfozqk9hvTLdlLverqk4yAMxz9HgITks/hNyLut6sJgPSmRUs6WNY\r\nwsUnTxvo70fDNajbJmJ7K3AY91Wr6qaM42gZ7Y8nsvYu+nEaRZGCZkMCxjKb\r\nigDI74Rva+1n7eV/ojiO5TcSjDn7OhlZsRfzZybGNUOeh1QY1TA+Z333KH/b\r\nhmd+r+D/21Gp5NzoPtOQ65X0tVdd3y9skiDD6i25i/aQ1nBlM7NjBJeR8ZHh\r\n5CAxyxrqdMYV/s3agLg03OJL7+5hTIfv6kTI5FdvaNsk5BH09/tnNzf7xhpP\r\nPNy7Bq98Ko7pNQjf2K6pQQsbETYmJa+7VQ8=\r\n=iSAG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7s+v9aMmZ3vF4CrIoxvaO73p29eySOjBKr/yarW6RXAiB63F5YNbSKr/ZEFGELKJ8MEeVd1hOvoTa/Lfk9+028qQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0_1646135314574_0.6104487894214967"},"_hasShrinkwrap":false},"1.84.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0","@sberdevices/plasma-icons":"1.69.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0","@sberdevices/plasma-sb-utils":"0.50.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e21e9ecc03b029d68b0ead7849a52f5d4036acaf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-UKGpoQlwalsWqiqs9Y0KQ4/xlWU856nWxSoKcNPN6V2xUpOhEVX8nXgBsYe7jKWf1jXlIIiFV465zSpScz+X2w==","shasum":"921c007603c7e63d7db2d42afd0a48a6b49c9b6d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0.tgz","fileCount":910,"unpackedSize":2500833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHgq/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf8BAAkssH1wipkCQbdCd4xLbRpwawp8am2gF0yo7U/n3Amcvp1wZi\r\neDu5RVYHjNaK4F0xbbmZe8ny03l6w5RBEoK+Ifc60LwZ1rmPrYhrXX5L7pu2\r\nwDVt+DD8nyHDo5xayYwm2xAB9AbKbrqrUyNSIwteDXxuBmOihKdqDR68nIrl\r\nDlysFral9PKcdAe8YjYBih8ln6pXZn3fZfwaxf2YNSoLs+E3HzVefyJggo1L\r\nxOyuG1wOg91dSGRfkoCYxjjxSJJ62aKkSmKlPGUqV0KJWkrUqIgabnk31mS2\r\ny/q08GgOkP/k2wHwp0OajivLRui+wIhJPgckhBAAfHoaFeagLI3B3wrBLix7\r\nMq+xqaTpTW0H2VYwQyTcIFZfftD6HUJji2W59iLLKQFH7+s2ARiC2jEd7cy4\r\nJxHo3UEQ0Ex/P6LNkxgz1hFTFGzecarebkJ5Kc6CQFsmDBLcbQC1xCt9UlUj\r\nqBy3cxeZq8gkjt6+qhE6EsxG2Q10nDrFfi6REihS88Mp2DUqqS/5/ftAMNNF\r\nBFng3oal3Sk3uhFspZpaFBS9b6+rPIqVjm8baIcLcU7785oCTU69NNT2DUnj\r\n3dRIRLuInU01SNQVxJHmDtEQnTKR0QpXC6JVUWl3VEsj3lFJArd/J/Rv8hAu\r\njHdiFvQC8VjCO9tQfdBEpX45v0HC4iK2EPQ=\r\n=ft+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDe5Jz+SQ0VNpymM1FK5ZbYNkPgecEpcSU4/bRm5g21MAiEAnU88nz1Vd2aUsDudd9xYmY7g/x5dwXa17cLiAtoXLz8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0_1646135999040_0.14587322168686745"},"_hasShrinkwrap":false},"1.84.0":{"name":"@sberdevices/plasma-ui","version":"1.84.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0","@sberdevices/plasma-icons":"1.69.0","@sberdevices/plasma-sb-utils":"0.50.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0988c5e7a386f47aee3b7c8db6c1aeb46899dc0b","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-IaNAq5/yQV13j6Mh8tSlhf7BvGYql7k8sinjhGtLxttFGoA1IciRfWjeIFt7IUmhDOQBacK9TQqZfx2JSkZIsw==","shasum":"25186237a87c63de363b2d42277b472f3ba702a6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.0.tgz","fileCount":910,"unpackedSize":2500786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHg32ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvnA//XW2lxY+uYc44gGvIHagbKEH3xwUg2nUzj32qeBCp+tEvwQ7Y\r\n0s2AZDv8pAG3AGB066BLe9pcOvAmB75k04RkPqzXyS9C7t3i+xhqUSrbctrY\r\nxzpT1BxsFuWTYgQ3KsHa/HdBNwfxdP7rVBWdHvMd4/g5pb/5ZjFX2dvr61DX\r\niOsCdvoPe0ROmt1H0E28oqivzNYgIFy/uyDmhnvdb0Q81Y4FmfZ0x6vCrboj\r\n8LE6aBFO7si8cAnMwYXidQwy9sVUDZB8P53sRQ92oPXL/ZeVF86QKyg25uxH\r\nPwICdSsPcSZpU+IMw/fmqjKdmrfPPPfaGm+tXuTp56mKD0GEYrUmiAqQZNOl\r\nMBErJEeQIAq/W+ZLKSCHKyo3dmBF01JyI+wpQKAj/PoTXumNxMrTa2L5ekCn\r\nY+Rt7AGg4XHiXnV/ut4N41byeELlhh368nyPRT6F6Wgj87gWf3GO56yYVw+y\r\nwT6cLlj9xfV2RdycDfX32a0Z+EYpH/9hm2brFnlhtqLm4ihJaist+E6jlSld\r\n+9PpO3AnY1Fs70rLIISSeTRVW7kkXJmzPoY8YGW9hO1eJBjWNW2Ymu82vodY\r\nfxAtGmAcbHatw7Z5SI9F6POYsy4sFi5pWux0aGRYXli/9BVQGCkpJ81tMVUN\r\n8lc/Sslaa+9PPmRonl2z/qbs2Wde8yki8+Y=\r\n=t8LB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDt41EiRo/SqnCP+ZRXL3rMVR91HIK5XkfPYwnLVaDJHAiAehSaTAC8nFuMZiH7iWowqsGlnAan029/P3x9+4NwFWw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.0_1646136822059_0.5258276476491894"},"_hasShrinkwrap":false},"1.85.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0","@sberdevices/plasma-icons":"1.70.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"906c50463d54ca289934602678b41f0012bc358c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-81VRDs96K+gh6FQBsO84G/0gl+L8Z2j41p5Tm22IyiGjn17YH3hFAdJW4u0/AAB51xQPukwsaUkXsVPFUyDyqw==","shasum":"46d3872bc7f2c267721ac5534f49f154d38a3ec9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0.tgz","fileCount":910,"unpackedSize":2501006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHiFaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRSQ/6AhDngI6RB84gARzPcWqPZFYhRLPckwkMK5gTkW3KzFbfuPM0\r\nEINVaArl10JcieLw5t3RjbFYyXm3IGqJgNEGLXLX/j+0V/bzfE86Vx3EppB4\r\n7ravdDDsZCSQOI/BdEuEPJTIvIXzecS/qGMeOgzz6aOGEa4v/iayartvJkY2\r\nrUkU/wVTtmLpdEFPQlgRHqclhJRlCQIEz0C/vflJjyVH/s+4mtp6aS0CEsOd\r\nTTVGL5GlGyRpZmYdHlij4qDvmJMsj+Ip/LmTwGeHRN+4oQmbr2JTDx0oFK6h\r\ngWfC+T4ePPMzWvQyRwNGnxXss9knfLWsKL19/ixHQ9Ape57KrQeEgXy4al56\r\ntRaLJLJrocz03nIdu/zbwkS09taplsK+xeQRCeR7xp/8UTiZ4bOswOwYCeEp\r\nXBfNsBbdAvudWXRdwxJU1MpRRruyZpW5n4c3g2D1Bo4+bBosk9kD7WFUz7uP\r\ni+uQNRIut4/8bu81D2d6Gs0jru3gmcqSEnfEryONFMnBZDVUum6gKnOzj/b4\r\n/+JiUwcCakgmKfodWri66Ous50TNosFgscjLvpvasToornEOxVkSzd4/IhdY\r\n9pZH1VYurPssWKlQgtMoBi+jX1/JIuzPVqY60S4HpA1WJumi5yKqrqn0nCOu\r\nqMzF4xxEi0Cj+qn/90JVsLuM/S273jaVg8s=\r\n=wvZa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCRFo18VPZo+V9FmmYzV5rvc7E8ATCP15vKickNyR7d3gIfFAmg+WM5eGC2QePtpzpBkpb47lM4pkRw5W/WccSFpA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0_1646141786175_0.6822094692601308"},"_hasShrinkwrap":false},"1.84.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0":{"name":"@sberdevices/plasma-ui","version":"1.84.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0","@sberdevices/plasma-icons":"1.69.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0","@sberdevices/plasma-sb-utils":"0.50.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8b7540359acfe94c5d209d754274115f10d73e0c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-PAGkL6ZETrJEk2uZS/c6q1q+JMZgwy0gU5uIyFtdJ1AOhxD4QFu9OrCY8pvgJtv3/VWFGI15/8UpYsCtzmqLKQ==","shasum":"00b633201e7916d76aa794a9877f1d1691a36c8d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0.tgz","fileCount":910,"unpackedSize":2509217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHiNEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbghAAjpWNCndVEJfQ6mSbofBQG1EJn1c+kM4zVf2T/YNb/B8y3qyz\r\nGNhKQ+2aGQOnwkxQaIvgH09GYU6wzq5XauZhXYnAMN8hyGGt8uUVWH3nfXfs\r\nB/ZRVaKOIh+pdKfO+ySrzetTjVOpNJnZD+UhKpEMAI5d759V1WReqSvmKAKX\r\nZ8i6/FxSrHXjbnGnY7PCg7c2MvDEa3dbghM6JFCO3NyJjvJTZ3L0mFFwgHyA\r\nxZ/1m0DSvRQ3cnzN78vYRpJGQAiSGOnXW/1oZjBtVHWhi+hrXZdkexJJ9Ano\r\n/JTlzqcsgENE8NQzVQV2L8L10uZkJyHI4E+8vU1cfq4M8cfiGZLbaCCr/3SQ\r\n4vbW8pHX5BVa0wIb3FwFsnYrJNPnyHKwIw0uc5ay1jbv1g4lHBo0IblPGgAo\r\nVzECYIt0waxRz/uy2CkKHnHKNxjalsRMhDoWTigsBKJ7ru6uw85YsPBZrzJv\r\nudzRUTgOGDMbP9pqrZZSEInyNTCKuUj1uNnbnh16fPkYLaEv4hGUJraarO+X\r\nGzSWPCKBm2bKlRVvO0zZqVaRSn7a/B2w7QdAD4viAcz1+NA9ENdJOPi+3S6N\r\n86S/kzJig7hnzCHwY5whZrQ9vXhyA19K++j6F0y4GUyHCVJ6HbCCrlwHzIf0\r\nWt7euy9WDTxp62/eusl0TJFercrjYz8eo+0=\r\n=UPFM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBCPUf9G8JOlx2+I/iNqtn3S6Wu1cY5mFZOaQ1YoxJ06AiA2NJ/0uL8sQ4z5iN6AnaYdQCgTuJToTkEQVT0pqVlolA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0_1646142276820_0.14084788743907817"},"_hasShrinkwrap":false},"1.84.1":{"name":"@sberdevices/plasma-ui","version":"1.84.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.1","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0","@sberdevices/plasma-icons":"1.69.1","@sberdevices/plasma-sb-utils":"0.50.1","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8796ef04e9a6f8aec3ac435f9a269bc3af01cd4d","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.1","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-At2Uu2K0XAkbtK3XnSsmKRREYQ2E2nfE2TvUeS0FzK8/WMrcjQHB2DNFXlWsFDWnTgJywBemtyrPZT3KWcKK7A==","shasum":"555c6716d11f7ff4d06632044d1e7fca73a7ba2a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.1.tgz","fileCount":910,"unpackedSize":2509431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHi6/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3FQ//S7UzuqP8+jP4XG8gJnwKSoX1sXftlwiqMQVAsCeNs3olIh3E\r\n1D2EQccNfANzdoXrWX5YTgOv7aYHJztAM7sKT1TnNjblV+ikjKSzmTZBJaop\r\n4IQZ1Y3osbzyvmkFupbLiZUi/zzmP1+NLkJM+CwZWXtLVZcNl6S3Rw8P636X\r\n4BEduMJXIDpbltADbLnk8OP39k/yOM0p9WEHKd5JisesoCmsUo1Zu0wIEl6R\r\n01pq7wE3GEhklbZqyJaN8NfmdtMyOA348b0Ah18cpXVqiL1392k/iQ7PMaRI\r\nSEGdIAlU3USYKkZFrisgwN1Ra/UmQaTbgXbTAX+mNiyI6FB2CEXS/g53PHqX\r\nW19T+Xh5NNRdW5/kovZgDMArJ4H/Tv+tRR1spTgMU1DcrhV7leD0vr2cfAAJ\r\nO6+c3t437OhG55F9NHWEOVcYgAtXBkPeukUMAfDfpzSWJ1U6mGS6qneyo7PG\r\nC3r2rXKI8IxKkhEZHCy4zi9zFgBtd8T+IRMz/98Cutxt2vetz6exfZ0pmRIx\r\nSJ382rOVVt53oDJpceYAcJjLH7FnOOy0PnfhZ+IMqkSad/6AJ8wuykLLL+Qy\r\nKM6cet8wXx5QhFBG1eUUyfGFtvBtc7Env0UZzFHCq0/hfVYKCDveccdyc9FT\r\n1p0K0TXS43Dx0wDKjD6w0THfhv57xKzuc3A=\r\n=sMdL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO56NkIJpGf7Pr70qiQcqpmAvxE7Fd02ES+y8xFSR/TQIgEyrLLgeLYFHQz9GTviFzOkTbYabLZh0OyVI10F4/K6w="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.1_1646145215084_0.7413567956395861"},"_hasShrinkwrap":false},"1.84.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0":{"name":"@sberdevices/plasma-ui","version":"1.84.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.0","@sberdevices/plasma-icons":"1.69.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0","@sberdevices/plasma-sb-utils":"0.50.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a70d549e2753967deba0afb4e9ebb02b69379129","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-LH0jLp7eh9DHuXY9udTsO4ScOegDDUr03h1EeiVa9iFfQF+uuxuNKZiBCGv4psDM9BI2Qppy3AXLmZPdrgfPcQ==","shasum":"ec446db4ffb037186fadab8c27f2bbb42a0156c0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0.tgz","fileCount":910,"unpackedSize":2509273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjKxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxcA//RyfvvaOPk8VCxNwND2Z6F4AyWUzTpjicUrwdvbIPP1xLmguK\r\nmYAor+5oiDkuFNdCF7/f3vA5GM9fu0a6/wnPLkVsiuU7uinMD8ThkTbL+l3m\r\nc0Pmh3pq649o5cdQKwzh4Fx5JaR4MZ3tAjKyBR/XeGHD4zX7jByOWy2FksjQ\r\nmxE3ByYLKcGso1I+vdfKhEjwXszL7VsauWtx1z0tVhEsq1WlVpLlCF6d3GVO\r\nLkRhI4QCjyM1NWX9YhkK8PPwx6PqQVKrknepop0AQFZ/tCxDvvGJH+xMc9oY\r\nfD9omAcMg+fhBMlhPabJQ0iE86ir4f+Fz+KbKQEfjzML5PxAkC12CH0C0Qaa\r\nvrgptDqXNo9sgf3lpvFDyHVfdd7XhmMmsTIvQOGixSdU4r735wahTmz8+EGt\r\n82ytEEGHB8dZ9/zGdgG+jnpH4iw6B50oXQ0kD6jEpSltwZkxZX2h+AjTXeTT\r\nxizy8zqPSAUDl7vss/09Ng8qp3qXMm106GzB/SWdz5h0lH9KDealk948lWh6\r\nncVI2taNV9AO3KylN/R98D3FOTDCUJAQqX9AL8Q0xTzfRBdhMNSNkAaxSFpj\r\nSn1SY53aZuWyIXZE+0xpmW3VA4ZcXMsLxzl9uKw1sDNHUAj34UUccg5RqKFv\r\nQvFJ79lN3vc3rNvxJhmfiiv6vlTEwZcc/sM=\r\n=AKGq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU2Jcse7wDH1SVQkX1eIjoamliMTmWHWWROleJwxyIgAIhANV6cGQiKIQDBSdgooHtn+bTeOmU04c4czFJrwGJXDGj"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0_1646146225627_0.7170573715398907"},"_hasShrinkwrap":false},"1.85.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0","@sberdevices/plasma-icons":"1.70.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"850001d6dd3b6eb4a31c11a6f5681a06a65e3813","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-KtZI/uG1iyhNTUUowC3syG+gBj45Ezm7moxCIUlp0I7xfiwoi+Yd4jNIGAIciLfITMfQ46g3tT4a5v3tpDP1/g==","shasum":"3a91698d91259a0653c3d237217913f4033c83ff","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKkQ//TIQVMwloRe5L82GYiQyAFjxBvk0WwW0uFoERcbJHbTxzoqc6\r\nwSiQ7n2G4zGcp0UcwbsKIis/C/bh7y/syQj6HmRLGX1pigLPlpouEuVo3C8X\r\nzxW63Q2+HpWWfOEB6msFOu/Y1T8gNwPS6kBV4YwXO79TlE3q1dD7McmmB96r\r\n7bnovsHipC9h6VQNMaRKlIpOE9dt+ReIRMjZOcLfV41mWSDMH+ABP+VINgwP\r\nTnxZFaZnD2pPi42zfv8fvrZRRvLDn+JZ7KmEoYBCNc911nXzd57te+1k9zBj\r\n2fsYNEbnTVWM0YQevvg8R5rFpKjohVMLkd21uIItD8Tt29eBt7Ot6bq1nk0l\r\n10/tKQj2J9OQp5b8an/eGwzrx0Q0oiTYTcb7Ulo3nq2eyix2z/zY+8PkgDdf\r\nWM1r0mgoo+PANtnGsRg7yCFzslGqi3Sck2kIR9E6FEKvWJs8dl/Gp4YErJ6l\r\nknKiUCRXqR7+E6Hbfu7mG1Pi0Fmpn5oMa3onmMZaBjxLhDhsuQTSbu2zj+pl\r\nBlWRVEGz/pT6J5ZFO+MGh02Yl0iBAehrsCybsQCAaB79UQwhCSPJr+XJhRZU\r\nvH3slSb2ok7bm76pizLgRF5ud4X0KNk9Pgt5Cncyo4kQCr8FjsOaY4TNRKgd\r\nB9nuy0/0riAaBUMCRMiIKQD/Sx5b4YAt5pU=\r\n=tn/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeU4UdQaeNN6ylnRywbePl4247X7jVNcALeBEvYWi2BwIgECbEabo3DsDmvF2KuSA0RH+uQVB7PSs65alqewTIaMQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0_1646148811954_0.9637346835618836"},"_hasShrinkwrap":false},"1.85.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0","@sberdevices/plasma-icons":"1.70.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6adab72da1eb1b667974cae0b7e9f32a326b8f49","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-id5x0W3SoC6Y2ORjoRkwxCzLjU6bhQeD/IuGneQG+ol3JeuNztoep9LJ4AnAumkH56jLHwD8ClGg2AgtgiXFvQ==","shasum":"cdb03e47931c08f768c3497f27fc1dfc6ec9934a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHq9YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqGw/7BsODz17ixHh/Se3YwMpEOD0RCOn6TZOIJj0sFsU7PTFjXdkB\r\nQMT2CohuclGdj50X8Fa5D7nZ0MiBrtdJFYNJYh0Ph+t/iPO+9k9iW/pEeukc\r\nXznoND9sC5pOUra32L6x5JDkBk2fcFoWS2E9gdfMOwxfX06Atkx9Jr6sMxE1\r\n+UK2zfDAZ6y1bor5gtr/FIp8lH9AVib++7CaW4Aw5AgcefpghKMh3g8YwHg/\r\n82WS6148T/SgnNh0t4E2KYIM9M7ERUmkbGvB7xt+SYgpuLeKbf9liYMCtaHp\r\nBgzx5xjRD0cM4GEbE50PiPgGMBovV656Wc1FIAKSQ7wSA6TMTFOlMuie/B02\r\ni6rDaPy4a1eRt++legIt+ng5dFqdlpXKv9hH5jGZMBUvuHEYlU+cY9UsYWKI\r\nvskRpc1LJuPE1S8MbnQZD68HJVyB5IM1YedGBHt3r4bnvWt9ZiHa4im8F44o\r\nm4D4msQZn4PzCN74rzNLxvU7C5WmOTOBfaB1aSCO4PchZDygo0V/brZksiup\r\nhNB4S/umOYvlvNN1fJuE8gS7RT7ztaoGHNsYuH/mv4FS8IaDgNUgO0dW6JVZ\r\n2u9YOkaTztcv60r0BM302M2zWkngPxT5JF5SLZH2xyGj+7H92jwvD90RV4xU\r\nRHPEy6Ox+JUMBOqOTFQgMUqlFPIiX68IOKo=\r\n=17p7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAFG79VqF8CAhfP54ss4aQ8p6qiZiICPkx6nkGoX17RAiEAh3+GNc2OtpIOqF+3bgQRZ7+JfprzL/eQg/Be9FsnB5c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0_1646178135880_0.8818472085648408"},"_hasShrinkwrap":false},"1.85.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0","@sberdevices/plasma-icons":"1.70.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"85ebe63d153ee25ef3b215dfa924750638ec07ed","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-otUG2TZNlEw7ihgPDv2e0NxjYIi5+eRMe/wdwH8aIk+NAPgoka9SsQrUyCmsnoxK0GsV9J4rkbjD70JONdnLfg==","shasum":"545d0f87e150a8e5c0e48752887925e561bb2827","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHxd5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop0Q/9GWkzo0rKn6XiXOGprX2CwSNC8n5MNnDslef+CgapGr2vTa+Z\r\nEQSbgIlbewiXa41W7rGWU5GEYpzS6C0pMYiVsdci/aV6tdLvifhSf6FP+2RD\r\nukRtejoAr7RwkJPDY4UTfvmkkb+4hqbM45CeEQdO8P+1fLzHz+SZXaUQmo8h\r\nURNSUg2HAzhxepLwCFgwTOjPy6rkHauNJbqJqiezRQcy05Ne4plrSErs178e\r\nHMbnUuBSn824ZdSCAez0SyXdvtxFhVhtGvvlKGgEFoxLhTjzRLlLNkK5U4ff\r\nbCru0riKsfCgP3OiDObmqIiItftRRK1E16vH5xL4ssVGP74X7u5FKaSu8yQA\r\nMI+dtER2vqsagU2nhJU5M2F31MqeXvFuXjYVCNquzWcJmQrUc898YqdAw8Cf\r\nJaYnA1GjympplvQftZwBOkJAk7uVFPvDO+klPENCfPU12Lle0U6M7dOj2vRC\r\nGZBdFRdDJBUotxtGM7m6dgwsQjbSvpGWfYMoCm8Zrn8xpiMBILq7Lvfe7nRS\r\nux37Bu+Cny2kXEXBE5UN8DGXBiZ4VdZrBrFkaxB74GbDB3cUW/MC4499plZy\r\nDtF6m6RAAH7SzOX0NCymXGl/Tqy/KqKqt3pdx9CVd96K/4LLC+KVwYQD9K9c\r\nbgnvOAjsjfEOl7HIPiImgPfiUKVvykAmQOA=\r\n=Nk7a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDP9ooNFHUdmU7PTrAheMh5iL5587+tky5UuHo9hF9FCAiBijmLSSiWBbJfoV+9LOPrXdawKM8P8cUz5TRQjsuW5+A=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0_1646204792892_0.48725693531756176"},"_hasShrinkwrap":false},"1.84.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0":{"name":"@sberdevices/plasma-ui","version":"1.84.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.1-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0","@sberdevices/plasma-icons":"1.69.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0","@sberdevices/plasma-sb-utils":"0.50.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4250751667fb79a56ecc63011da0f7948d62f6a0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-G6o3haXVt1nlsfw+3fzVCgROQqp6kj/BLABOALUZFdNzkNo+tYSOUx2gBRCMNq/1TIHb6ybv4C+iptUzP2nGxw==","shasum":"a438e961d020e867447d5d1a7b326d7acfafd13d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHyC+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr07A//c5Nf4VV7wVLESGwTr3/qZImQAsmTBFnvw7F+M1po5D/il7Ao\r\ndxWky4tfL5Gpxx/D12UnThSCkg91ba+ArWOe6mTkpjrNWxqsV3kdhXpHSm5S\r\ncSMrNLoVi9K2UcRevRWEzFpxlXNmm+4XHrrSIxxiQgpDqpOs7/WerB0Ks7s2\r\nvmVKIUXKJBuwWYkoiN4cr2yZLijbXL8Eq6xQID/dGs/4GZ7/e6zvuxkJFCrL\r\n8gLYvgwan6KUKaFxeqdqw5ug5Q5dPku9vH28rGJGoH+Jk56Vx6Hvsa2yTmxG\r\nMORuxkwxSALT76j1BgjHrgeP2t8ybKyC9GGF/4LoWOKtklRFm4toxo1DdVnA\r\nOM5AMZtkyLE1JcMz3WdgewKKnA0gQV03U0r/unBA97gMIoYQP98hJD2xJGmG\r\nxj1Atzmjl0IjAWQT/0eVJ4tGRuwC7wA9TbH/9Mll42gPvrtipdxG1X8fe0pu\r\nsPy/UcRHgMSTBMelsKVqw4aEvStjCGqYxldceARNzTaWKAJSkBoApaIhX1Da\r\npB0hh9mSWpIGhLelw+X717YyLW0IVit9IcBmflr1BDdzcoMkaKJVryYXr+NO\r\nGeJ3/i8wxMeNDADgyyQyYLFLCQC9mFp93aGx5kh7EzJ7o21KvTqRdIyCyrqq\r\neSmXS1OEolQqeVZiSGM/7msvp/743/lSuxM=\r\n=I8Mj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWzHcksqwvBjtDzKYXnWKebXIFZX+P3Rl+n96IqOjtswIgP8qP1hyEJvhqaQEYa8eJHbfP3QlylRhSMeWT/0A/3Ps="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0_1646207165886_0.9629911694881244"},"_hasShrinkwrap":false},"1.85.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","@sberdevices/plasma-icons":"1.70.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2ef5299a76809e25ab892f4c2b60b21f4a132580","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-fjDubYFCjPzJ4DDADavo59DR2tmJJWswOT3NuzDbksMpwyanrVYqXiSYm1VsZGxZrcbcdAJTWwV1YEh2Tt0lYw==","shasum":"8ae5643fba632a92a70a549c58ed6e961bb7e552","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0.tgz","fileCount":910,"unpackedSize":2511063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH0R3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpboA/9Hk1Ag03Uma68HJckNL7NKm3+AGzvywc8UVxyD1Htboif5DxA\r\nuC4GO+xIxHHDuxJ1RcCpIw1acqQE332eFGOfIBgLPsdmYsXY+WsTC8304/iE\r\ndyDMq4Tx5xkejDVAk9c6zx0UL1hCIRdGC22yjHHEFJQJqI7kgSlxFYHim4pF\r\n34crC6EcGBoFsDzNFfjlrvTxFtI5S6rwSq0Bp2zrr6n2Zuy/66IpDCDADKNt\r\nGnrTsHgXytxPyanbePHyFl9GdttpEGxpaWheblMqGSZ1XiZZftInxoA3mvMR\r\nNC/Q0XoGKwk708nYYTJAy9w47k0sHOV+rD/vrsYFZeWbVTlH4H9dMjHHf0HK\r\nRzi+Ct+Odw1WCDlMt0hVBMRAt7xOTD92UJ3pGuNvY7HOpkHg2ne4LEjaC2rK\r\nCDTePHSj8ba/J0dOiWOO1PPw+qEfY8kQHNGrtO3YSOegWUhhgMVQ4sLIC/A0\r\n5t0w/iciRotJ3T3ovH2ZN0ask35GLKEU8dYorR9zNzazfJOWckW6nkAqFYDP\r\nesmtmF1SHVArBDOb1KQ3kA25CsbzlqbfvCjB9M6RPb67TcIoJ0OEVMLyvHBU\r\nUFVxn1ywxlaBtLmiireMGlpwFC1EXQt2UsXjnEWdyd96qI2Ir1R5AdL8TyQ+\r\nUjRGvrYi7tGbroziyBWjdbG9qFxgUcZQjB8=\r\n=d9M1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUyTc6KH7frNVayiBys/CvG53f8AhHPgF+jTde2KvuMQIhAOjaY8nf3aw5Qh0ojH0p6O2lcSiFFQJD3s5PGNkj9FDe"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0_1646216311573_0.11391676215329882"},"_hasShrinkwrap":false},"1.85.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","@sberdevices/plasma-icons":"1.70.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f77f166ba7753147c68582fa09988192640a6194","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-gkMpeXegFbqNWaqljDk01+Stap6OoDrClGqn3X6StogmqI1wblMUmFXR8B21KI0nRsTcRBO2wtm+hlwNIYbwbg==","shasum":"24d1f3c2be62bb5d782597d331966cc851f6ecbd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0.tgz","fileCount":910,"unpackedSize":2511511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH2UVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmDA/+O4TUwgmPwQqa4hXMqq9YA+AivVEGETOmrT0H7scKK1MOrh0i\r\nkf+r6CoT9EeTtvgKJZZOlz2JUZ1lY01cyCSAgeqrd+mjEHaKrH2yQAkd4znz\r\nr45kJIpHAwu90Ea5JBg9Qd28LJv3BPtz1SF5QQY8odDgIWDaPDbM+lnwgCKM\r\nMg2kKQXIQliCf/WVWuzRhjxrDXpHAnPMlkMoKvCLsWMCa/gbEo76R+0ITpDc\r\nXvv05dUbC5BWxhmv16A1QiVjnFSw4HaeED9U/L8hksQ2NdZUC0QCSy6Rb2+u\r\nNOEraZJS4v03nVqSk5LAnNp8/BfsmcZ+Yoay28yHBZ2nBkgO6fthFVqG0LFv\r\nYunjfTiA/oO13TzYjpvFPRRsAYeS8cwI9QmZvFvnxVB3S7OZShKDr9DcUAGi\r\ntaYZeKXkriPw3myKskJakiFbPK9Jgg3m8zNUZCq/tHCPXnXkYHCl1Lgjo/Jf\r\n4qop0wd4Zq24nsH1OAYomlaEun8TtvxTNRB2p4XGn4ekcY6F5asOATzW5sLg\r\nRQxONDz4grcBueUibma/PraY4G33MUj7ogdYVcNAK5P1DPcj4vdItgqymHfh\r\n4y39r0OEqT++WzOEw/mh2vR2+o/l4cJWrVbXeNDdabeElI2IwCQnyG+VvyeD\r\nSVIqS4QaUQ7dYizzpDxvEFxhtgNto0Jefmc=\r\n=JpMS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBctnZ6ZJFr3Sj2wZE68e62Afz/ibfAqBiXLMq1heA7HAiB+y+gzC870JFy8pQNmi4lwSSOvMoXJUhnO6fPkn+EgHA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0_1646224661015_0.38367939425703357"},"_hasShrinkwrap":false},"1.84.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0":{"name":"@sberdevices/plasma-ui","version":"1.84.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.1-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0","@sberdevices/plasma-icons":"1.69.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0","@sberdevices/plasma-sb-utils":"0.50.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7a10d381fa8cca5060b51fd0f9cf28369c2e72ee","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-RetsfaBC7bInKFdnDKo42YZrhd3XvLzuvFG5CpshXB7GDyNToKzgQE4ACpvnSxH+hrd7CsoLpg8g8Muw0O38/Q==","shasum":"3ba53cac7d9d54de87d7f83218ee0123f547d401","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0.tgz","fileCount":910,"unpackedSize":2509762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH2ecACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHCg/+Jrs/+zzO0o3ljEldD6vae6S4kD+HMO1Y3V4VIS5c6vGdAj3Y\r\nqhspyvp6avKfPF3TtpUjl4ufzjRue1iLmtR8jdovzBXIkkVqvJly6E9sRsTu\r\npNGXlNK8VjKuUP85C7RMVHCNgmRhNHMBE4BeQKcEzSXIyXe6xhZu+cpmONY+\r\ncubVgB9BFAScwxHWaD1zFcPzG+AqOBQ0bR5K1N67xcT/5QXEN4+p4I1dgTjs\r\nXGnNvhQgO72HWxPC8xYSVltb8AIYgxZEt2m0iBNuSFvlVgr7chDlI49eNx23\r\nc3pdLFVEpURTLqKA9QgTRYZ+dVNI3XdpIw0NeUH2Oe3TAboIMh1KP52aaYla\r\n6MSsWGDM3waSxQQMu/kIJ//2/y4oRCFqSycHdD3wUjf8MSiNm/UjfrNFw/Ky\r\nuMLn8hM2Sg1Tr2W0tlkQL1Zsgp6glT+LhGRdbL/eJhpW/pORzkje1Rf8tzZ8\r\nMT1LJ985jaJviooOT4TNBLb7CVtwhlX6xxdLbmQck5pSviULp3A3Cr81DQdm\r\n+ciRybK5yaZRg6UP/fzm0KJJDpGwUNjidPgq53avEdB/2VlDvDRryFAbgNRb\r\n87rgdCsnzKZUpQuE4jZd+RXBzYJ6eVtLxYnNB79Jsu2PY6RsnhiS7i8oAKgt\r\n/uRFKLTd+NpcBGP+rYJNSeGZEMhk1ZEhF+E=\r\n=UfmD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB90WyekFHG5EfckaMcstPVHtA3ARv1aYiwxdzxBDfqvAiAVZSIe/3eQCMXRHZaGuKhJ+7wipyEMDSQ5jiS2UoOB5w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0_1646225308569_0.5058129176719586"},"_hasShrinkwrap":false},"1.85.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0","@sberdevices/plasma-icons":"1.70.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6dc9a9a421035738466249c9a998368a20f2977b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Eua7B2Teq8liR/T1TlXNbMz6F+TJMxbaow8DN+VZ+cT383MFAQDdz57sDxDdyDKK0rjeCG2Q1XNbXrgo0z2UsQ==","shasum":"e9e89ad31e503763832519bb53c9a53a8eecc23c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0.tgz","fileCount":910,"unpackedSize":2522769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH3TTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroqA/9F9tyZNNp3J17/MSckH00hn2OVJTM8+Zs1FHhAhKNW+fiug8L\r\nXxFmZVZmUE1ifpFwBmQSCkvK3JAJw3quFD6pyihqNgpLFIpAfiS5awZchbTg\r\nmXQAtcNcYZdXqfTnNcgQnrzwf01EXbopwv6QSecGDTs/HnuGGVR+vpwTHN1p\r\nvdAciTMx+MKJ7gaEcmOlSKN3zRmLowNa84ytN7EA09lMkDbs4nLSoDO9jumQ\r\nUTRcNum2U/JgBziGQ/EjsZSUAUL3cpUY215IYnu/QAij9/6DpTwaXmT8G8jA\r\ng/TznOW87QMym6MyKAzq4VL8RXY+PezZYhfIq5A/Ove9MP/k6o9FCeqUb6Vc\r\nb5iInT6W/wTD0+eyX3dFbGaaoQhSSSck9/jMdMiIF+YHK9bg9c3wMdgmJx1o\r\nRCksvhMawcgH4Ot0LsUfGinvdRW/hPU+w+bf0WcTe6h3smko/fReBFDiwDjx\r\nfF5ZF6G+QSANPDvZ3WWq5Qj8SUufAh7sza3PSQCUk3o2/AIhctZn3t+QR32r\r\nMdocZFF6sc7rMF31UKyJKcLJ+0KfRE73sgXjUPU5e1Wk+Sh1WH1KOr9Xki41\r\nWGykcY0BMszdEMNAIYlRXeoHo+bm03X/hTrdo4lKY8WYjnMtm/kJH8OzcxAO\r\nEjbdDbBmruVxwE9KmtflhXoXrVfjr+Ns01Q=\r\n=shpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOYCHnB22AmuE7Ndp4GRb0f7aITtVaXMMmZSgavZknLgIhAIynBaMcj6mNk+V5hup1GlmJBakVC9cWhyiiLvYICia2"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0_1646228690849_0.09142620303696747"},"_hasShrinkwrap":false},"1.85.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","@sberdevices/plasma-icons":"1.70.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"55268db4b86c8f52454afbe28299083c55bd4b98","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Hqsz4vh+idcgH9lNsdcM8A5fUeMVbX74yjDrE3j7aNeCbOXF2YkSMkaAKvCzKjwbwVZZ4aWZekBzVudoeuIJcg==","shasum":"93e1afa660972ae54225850cf2d421f64c6061f2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0.tgz","fileCount":910,"unpackedSize":2509853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH3UwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw+RAAgjFlK/Ur+gzSkPJDAkICn9fFvY70zYBrX2C66tEskKOUSHIq\r\nv5vkEs+HwlELrCDO2DO5UboUgLr3BcfDsbRMg+gko5GPCrjS+TAVFyG4UyjT\r\nLbkEwlSjwml6ruNXJGmHOqvZJwQfl9npssDv9UCbtuSpW0/UNHBm+g9LSMyJ\r\njQ2wjWS9KMAnvFQTdbuT6NsOkxPUmK7PhwZHtZ5u1LriW7Nb3t7aMTBpwBNI\r\n7w+Ij5qSYaNxFlMJEMGBdyiOb14ATkLxqSiu06jzMzLQmlrOutV4vQLR6E+j\r\n6UsSxPH4b0YRKhpQgvcm6GWEk3LoGodunsw19rQCJHyMdK9cZOHJL9WAIMgs\r\nL5XVTF23OhKTk6+Rn0E6ePnp5Iql/thP+k+UV/Qvn2UyFW4BAUg/DRKGxQx6\r\n6KbYco3IJqWzf1STpGE176p2yLHmu7BOFQHnVp+brBkpIzzYO3Kq5NIFgLt+\r\nT+OMpZX2Z8HO8Vj+lEBIf5GIqym9FWO0vIVpCNfXoMTy9dkwv5JPIvU76Osq\r\nxwHhwlWof/gqpb83G/XWEZOm8KcLJ/ra7xvgqoBX6IrQwU6h15NyzvKELtx9\r\nB5WAUPVxJrUXekQQClyxIf5YgIU/pC5KbaIRA/tSuBGu24itk6W4EBCHdxHV\r\nxjZG0+Y2BxUR3kqrziTwxZmD0cnfVUOsoVM=\r\n=XF8O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMv5CalwmrxfvXQgCUnSZ3Ba8OJkJOUKGCimKJCJK9yQIgaerX3owKio8fmC5qzlwinz8x1WcsZWfwwjnJ5cF4I58="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0_1646228784424_0.6455978652645007"},"_hasShrinkwrap":false},"1.85.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0","@sberdevices/plasma-icons":"1.70.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f72a5ffecbb81c5358b2925f5175711f3d754935","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ruyHxz+gm1sa2gtU7v0gBemZeivX/tBMDUo2Offf7HfrcX/zSue9LG777Zgv6ZcOwwvPCWDiBs5wrnEoWbqD8A==","shasum":"e5694328f8396e79536559ec5b6856ecb616c20d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0.tgz","fileCount":910,"unpackedSize":2523184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH3blACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcXA//UmxyWIQPQ5Vjbr4olPhrgEw5neTGKWvr/PlTZJad0OUB7gXf\r\nN+Aq6KuuDevAyBsNM4Nv/XZKg1pMf77MUa0LCUuaeidz/TNv0KFMT5M+CTCG\r\nCEhU80BCMzFTkm4sJUps+evwVfyAsHO3mzqn/iddFW+GHErSuihOHuTaSrEQ\r\nk0JIap5Lz6+TzUORhKUHiL+sr8/oi9kr4Pqr65Fg74GBt7ZRLYAI22e2kMcC\r\n5iRWYy4t2C1ByZ5nUnsH7+EKMiy6a65ECCafjWLq+ChK7IqBaEm62pM+xhK8\r\nYa2O1JBRAVnCcNEE0HVJlYINiyAJiEwSwPUxsGluz1Iv2XqDscECKEGoLt5l\r\nVu/5mr+gxu+wX3nVdAGIVfzrCu7bhF1glpq6oHlPgoZN/ORnM2bhEU74qaON\r\nYnMqzgoSLr6cxPTUN9FGBcs0PA1Al+6Dat/+M2WKx3TaxMYX3+ykKKnIHIK3\r\nYKbVe6x0LS4a6THnZ4aoO57hIcfPDCZvSfC7bIDcplqL+nno6htO0ryw9yTR\r\noKJwvH2W9qkhWML7USA5TMMeBajs7sqCb8pTahYccjrBQNOQii4ubWL/RpbQ\r\nGVnSjvM9xsr3TA3QZpPhX2lybshjOAuC5tPg5fFGzpoczLVGMOyZqiK5LSe3\r\nIymzfApGdgblgHOHQQPQqChm2iodkTzNcPQ=\r\n=VDMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFiKJ3BYAqU9rs5J8waIzLJP+ho0JyvaJ/oIbB3lUUOAIgczzNtthOKrHmxkcyIwDVL1+mwKhPcqaMhsRARtGrCZ4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0_1646229220941_0.5087545815750125"},"_hasShrinkwrap":false},"1.84.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0":{"name":"@sberdevices/plasma-ui","version":"1.84.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.1-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0","@sberdevices/plasma-icons":"1.69.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0","@sberdevices/plasma-sb-utils":"0.50.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"99b0753e49958b53df5d6c4d657e3659b7d60f0a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-0VEcdJboim5q0wQZKZPfKxuNk94sRAUMGqmEsNhsJkaDmUN5S9/dpSGpYpI3lAfiq+elupwTlqor9Yr/xA9R/w==","shasum":"49215ad82be78b790ed2fb8fd1ef6a5e3b69301a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0.tgz","fileCount":910,"unpackedSize":2509762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH36SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhAQ/+PNMt5RRPp+9hjQDZYoejOihR6jInzozth4JhnAPXOJ6IiIGV\r\n5UR1UCVp9N6CQWeWT3OEgihhzay9FhKsgRbH+gZ/B6OeKfhl9Q4zCY558D3V\r\n8ODuZQ5bSPWiv7hKmURlS/HohsSFuIqkRJULvGPhHwj77nWAjifQLhQ+lazp\r\neU6k2E5eadFrS24XVTxYOP9dri4nN1s3jBfLk6b5ReKeMNNQ18d3s0OuZi+Z\r\nBvNW45/0gGpPZLJI9CumQtA8xQXW8MS11YfNwLJ3zzZp9EG5XBVQ5WYn6qXw\r\nbAaXZ/KWCN7MC88Lva6z9Q29wBHGz/vouWI1nleYtq3v4Q5DkmcciqPEM33C\r\n5xtYboNBQSgzr2555FEEWFmDcIeg73pKCMXLheJZmifHd2F+lEa49K/2NGPV\r\n5bWiyY+5ZUBJS7ioJ5/Wl+xY7ZkfH6Hi2a911aTfMRW0jQE8M0IU9ssQTuLI\r\n4guuYXm5pe31bMSHVKW/sBomuX4xIIzEQZzmbDWqW7Fg5kW4c5l6P/9Y/WRu\r\nx9s+wYgbYHVU72gSqAkVzxP3qTSAstT6u7iw5RxyjINhVP3ehQBHH3OFKbYz\r\n0iehAyK4S1fj1HqgWrQe34577pTsPBxM74sSEnEw++GTH7Tew1mlhJbSWRWm\r\n42/1Fwk73neJ4GutBe3okwQQ19Sx8QqPC9o=\r\n=jDtJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFD+ir5ZXTSksMxYKW8YFSGNH7gmA4JP9eXtJs3fmge6AiEAqs7yWYWXd0CmaSc+OhCnojKICsPDEhLJZUlU2B6PuH0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0_1646231185984_0.3186541905904512"},"_hasShrinkwrap":false},"1.85.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","@sberdevices/plasma-icons":"1.70.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"544938b9b6ef80b19e3f220744259207b85d4f09","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-mPeg/tyjxCmVXd0dky4+WC2W8l/z6wTVln/NUo4yn3u+vvcp2jM/pv2wNdeXIwxr0SRmA4zHBhAAadq8PsC4UQ==","shasum":"17d1edbfa4ea03432ea6325e41cb524d482abbcf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0.tgz","fileCount":910,"unpackedSize":2509853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH4DYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZEw//dsg4shGzslfdcfGSR+bQO5RNyhgy8AM5ngrqpcEG5hv+VMOs\r\n/mOfmg5zozm/JRGqCAnkVCBuM0hXevz6Yt3PH4zC1RIdA2kQNGP/u4th/KHH\r\nBgSMjSIHj00OV/WzPkYZPBw/IwmOALFGpn/PyTNGn0KM3r2oKGJ200Qxslu5\r\nAed9JP4+sWpRwZGwZnJ6dEBwS6YdlpiNS7VYBfB+twchBpwVNUPLietKBx2g\r\nvwZWU/gaW4qAx/iFQ24LNLPPLhnwmG+SmuX5PoPhWwnm7hlBT04d11VtKjU2\r\n62wPgmhjKIrSAch1n5Vx4t3xfcMQRmAw2rMb09qqzmWXyyu6Vh/8VgmL16/7\r\nonkHDMHH5Vg1cbgFeYfBb7FND6wyHYt1gs4qwiW7m1fTXUdX/8T5YefmSoUG\r\nAIRUkw2bWcC65zeFcYrgwX69yHKh7Hhh9sIj7R3WzRdwJ0/dQywgokfJHtTx\r\nUHYBEXE9PTxzlmxKYdBJwmjuhHP2QIc6ZdDvxXp/6feXTIHWLnwxnry4xuKP\r\ngSgfSrrag+Zjx4KG++cZHgMtHuflUlyS/XZXpcYJXggKDaBXx61Tndm50cYu\r\nQ2Eq2vEoJuiYduebGfRsG2gnybuQh6cI/FTvjK/q5HC5Mg7ui/40OERac+N2\r\n6ZSo4VdcbyHoGQCjlEBKQwvs9eRcib6MGJU=\r\n=RCHa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF3Ri8hdoo/KHh32ZzJZkbuIAzL3vESoZBqryji6rVuCAiEA+mjaTBHLH8oKXKX6639wn7KBA04Qz54/ouO2vY1igl8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0_1646231768209_0.2232947839302113"},"_hasShrinkwrap":false},"1.85.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0","@sberdevices/plasma-icons":"1.70.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6d83e5e016076f82514e4c622d2b6ebd00eddd30","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-uvd0/p9mc9EbyfLD/3HKu6fcsXT6bzgKE3gfPrEsn2jmlVONY7UhAuYXNicaOzAqjS4eBVmwWU7cGVhY8uNH8w==","shasum":"91ec082d78386c1814049de8b94f6a7b30a2acae","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIIHfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCTA//ULBoXkDrpflQqE+TXn318PhCGN6SgO+LjK/3v0W0mJ39iOxW\r\nyNba99blGPfy8/6/tzFyVzqqKjqZdmmNxw5HS9NL5K3oHkbWf79w8WCpOxod\r\nk141WRN4kLcxN65qdkEzXJQmiOpP/P4o/5Xji9afstdmxE7GHreJjCIiR/ua\r\nqd2ikNGJ2tThNaDagukbJTwz9MzEOD2SeJtjVY6GMHlUhptFt/e+fJa8u0ET\r\n2HG8xCGBVgX2AaaH0DpuPD65+2aPHtoS/mY8Ib7NKriwYepsp0yjAFVsPEKj\r\nm798oKES4jQoDK0azcAv/qZ57xSAnlbvdlQmtxgOyD2FgXgvIQ859h3kDTqi\r\nkoKRpSsjeO3WFzmCfIdtygoBB154RQ8sEl0LS7gKbXOumpuSBELV9HcFjvff\r\n5ALG0dhkDgBkHLsO0nULTpLccj+VJ6sfLGkLfqev68vx5Q2fIRLM8FjsQD0h\r\njr2pMMhijjnCjmiJerFjH2gF6wpVFFwELqp/QOezZP3QgVPUcV2EcqMhjVYI\r\nzOZ3QByT78oXysKbss4VEP0K60oMa+2MR6wSNK5Io/7h14HiGiJPLi1fRguf\r\n6nhKTriNkQtXM8VYwCmb+SzdeOaxcMzfhjvfqGuXhrqJiLIXwaionK3yIqJK\r\n80d5Xd2Jso1FlE3PRGWrEZ47dV02fMgw0OI=\r\n=dk8f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHskGt2AscoWQhc2AU23PTHPtfdwy1B074OAqhx56MTAiBwxkhIsYhfztsjg+2Rr95u3LYQBmENBixqw4y7wXQ/iw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0_1646297567037_0.5049423696461719"},"_hasShrinkwrap":false},"1.84.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0":{"name":"@sberdevices/plasma-ui","version":"1.84.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.1-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0","@sberdevices/plasma-icons":"1.69.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0","@sberdevices/plasma-sb-utils":"0.50.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"44aa8f7f3347f20665bd7b65978c6020d26195ae","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-CB9EGILyOezrK68rbeG/su6gqU2zbJJCR6GnT+rZw69sovKr7m3v3ZCSYyxxtzCjIqdulKepEuWpOqQoxSiElg==","shasum":"afd69f484fca8ea68435769ce474c2e68659e651","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIIkpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFuw/9FkoarT4uS/NABhnCAZk9JOpY5PhJgtRid4Itj0BzIMFPb5cS\r\nQ3ppayb5lfCR2c1p31SR4oLdsOZdCLvES4TQawb1px3oli/mtHRem8TXiSYW\r\ncoVUrII5eE8e/bpCzEsG7puftV3ja1kYhvGl5TjkFu6UGBKHj41NmNaQS8j1\r\n1IVgsxfftTZf1BwivJE6eajAlZpjbEiPoKCPDDkm/O8fdFdCi8gZBkFHThYu\r\nsQyViEGVyrWrslkm2qTiLQc6YIa5pM6mUMPhjgGF58MuZuXcF+/X1xEr5tqh\r\nwNBY11K+ndAvyCYvvEzbAc10C5gEPuytxX7Vn6jbzSItIs0sQK/Khong7+4x\r\nUSsmDI9Sm+1qQ7RbZB3bUFczBsOfNuKe3Eul2stwCdOFWvg+FgJlwj4dr7Wt\r\nrkSdSWw6ZVFORK8qnoB/DtZADC7nIF6AFMQRLKBxmZhZJGvmbBWS+v/HupdC\r\nAvMvW+i+06uK4mqRKrTusaKgQPNqKjcHFRNCq346ENwyD0gfisDJozI+aSIk\r\niqX+QWZ01W44IXPM7aGRw0/x5sX/pxsb5hCTvPEbguRliOI3hdC+B318wEAp\r\nRSmuTBeJqEAr7UZpKvrGTM+Dsoq+1Nryuwr4eIQjI0hesVBFLA8rwJbXu5XN\r\nah9nILe66Qx1mLF7huqfWjh88kWafubjyZI=\r\n=wlbi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJkiHet1pEyDmRhiNZtJ7mzAnsUKc36Xv5Yc8dQ8XExAiB0DMAOkxNTIlqKDLeQCdqGnNFiEZct9w2tcbO/GyniAw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0_1646299433326_0.4964657884489907"},"_hasShrinkwrap":false},"1.85.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0","@sberdevices/plasma-icons":"1.70.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-NqFqm4T2Lz/m4/q3XdKMTfB14u2TO0KIVLCZMzedyItVPu0RssuYUW4OhiY0qOjKMVnwOwXMYnG76f8X6kf2+A==","shasum":"f19cacf0c6371a91ff00c19612599580dfae1bd9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIJkjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJWw/8CxQLTIG8HLU4CZMOyFAVzpDCWgim/wX264pXk9ZK8ptMHdL0\r\nJAuVBXypHnwPqq1xZfuL8jgSkc2som7iPcDf8POFumfmiAGXfxYukXwZtTUc\r\npAfcHR8SQ2i2yHadNwX7SV7XsuIH+BqHLYEphAI7L2EkRj6KBl9rut8LzpnT\r\nbgWgrbg2eBS/OLTUV9K7S5OxKRqPc7qKY51pwPnoF8sSwhoOS8u93z5dxmHq\r\nETXWtrpmQyHvBcxmPoeUJn2Mg9B89yk+KPZ/8hTFjqNV03kF+rEMIVvHo6dp\r\nvDz7xtmiKmUmDedYFg5Sh0kZmsGCmXerQF3qPzcAg25P93sIIDSvmrcFbVgE\r\nTyGS23ZvT+26qteuNM2fanbzpic6ZcPuQ74oTS2Dv/i/CXGWKSeqKfY8uZ2M\r\nO31aA03aEeSgh7KFjIJad+3AnEWXaf66TzyfYq4wzU8uJfM5vmo7itcZyoV5\r\n3L/xJqcUlx15qm3jUrSxLeBLRRb92PEJCnSmi/xL5rqpDypKa/gwvoZ0JjQ0\r\nxY9tVlEBa+kApkf88x2mkOFf8EW02nm6Ib/h91vwPwK9WCcJ1sLfnQW1y1a/\r\nC5WZtSud8vhgc7R8eAvtxiXgWV5XXx+vPknzGOX3gOdbYKaN//5qJd56829E\r\nIvVw23Q9camgJnlnIESNHHSbr/VDUUqv0ZI=\r\n=DGmj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRfIMl45eEMEF8+MwaxR65cRO+f++JyCYa+ijjuNeDbAIgXNkQijObW7FRumDnc1kOmMjmP13kOsp2H+TchCSmUhw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0_1646303523500_0.6460534316325783"},"_hasShrinkwrap":false},"1.85.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0","@sberdevices/plasma-icons":"1.70.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"125c5ca43b48e51f156215ae052c7f2716c91806","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-wMpmGfrpmtNdHqmdLHV66xf9tsNlaoUKEkVMiau+Pq/Jwpv0FoixmiFasKoNAb/g5vEYlxKN4QhPrPWvLP/UJA==","shasum":"0fcf8a2d4957940f1c861641711bd976113e11f4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIKMlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtYg/+Jtpy9HzpxQj/e03HZbCz7gxqS6Nuqzx4rVJgdQ3i7wUBrFIZ\r\nSv1Obm8Auje+QUJOMj4hDe6oOTeapyihyH/JxhAbvI2Xa4LSciNuFqXXMCN1\r\nhq/hGziC0utnL6oVN5V+d25aeKqeOAa3EYv0sqq3JMDUpWDgXRv94j4JKauP\r\ngmoSLLo6ORCL68EXnAJTAd5T9pV82oALAYO+EHYrcna3mge/F6HNUjbghuyr\r\nNp6RucivfgrHkFXmptTmIUZIJwWai6oyNjQQLOOqYRY8SRl3v1VocKIeNsal\r\n+KK3NQTv+dgdAvJ1SCh/48ayyds2p32rPWPn2ZRwgIfFvfqXRaJvNF/c72Uw\r\nBO/XdTn7VAGoD4ZGs8zmk6I2wntINAJJ1P+Mqb9nw8yZvA9h7osomiuQP0TN\r\ntPR1KDkfAZ4Ob4JMQJOKFaN/F9ix7XO4MiQjTgcxPY55VnN4v+9kLhw7279H\r\nzJla+vk91Rixu5GvbQl28FtrQR3ND6xHMNAraoRwJS0NfRECQxBEn789yqMd\r\nZZvGtm++aAOVvHeouhpc7kuH1xT7AVCBPBLTKdtYUjidWW12B8lfIi1YIMO4\r\nfrbPSDwSXZaaSVZhr9aIsWKDtgMoqA9qTW+Hi/9tZCpuZ9hIOwyBByARYPDS\r\nxYBb83LM3RAUMyKHuirMTn3Cpj3FwPmTZ4o=\r\n=vtY/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICVWsUwNQ6r64+DeeOA0REQ3mk2LxNP4E2B+6+uYUd5EAiEA6JYm26ZY9YGkQfRqfACz1qxKagcwdLLoUpNmjlrpbkA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0_1646306085757_0.4943281425031738"},"_hasShrinkwrap":false},"1.85.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0","@sberdevices/plasma-icons":"1.70.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6d33d603cc03d609f82ba470a24e1474f69ce7f8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-tOr13vUK3Ukp2j0UKWBrAdYQtdoXEQ/lfA9oN6HM3UUXja6S9ybk20phDuiUzJVibRrq1VvO5TJOBTgj47daCQ==","shasum":"f035096b721fdc81de5f0cfa60a920ded09e2690","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiILEAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPDw/+LRIVj1JMAz583yujcMTUvpjN0FC/Q+1fmaL3YJ+yuvVrwGSv\r\ncKqtgJ5uWGhFev/VcOiPOVq718n+IWHgOHxgqJQ61sy8KUrolg5QgPiXywmL\r\nhM6Umz/AQihA+U2itnjiTZze6X4s8ZofEC5FlyCmf1GgfeLIvf06yz2ad8BT\r\nRJmqydS1yzoEcfExdIiXZHI9a7VgiE1H4pK9//4nEGk6lCZtR2kZgc+7A0XT\r\ncnnOyEu3t8WBGaNrbazMG/6ueFhtJkL7GUhuo4STBMSmVqwVXFSG6+oLGhiT\r\nCxAaPioPdIrxMA/4SPLVy+KXDOpNVWhgcfFRhRhfigamWZPwIEpi6I8bq+Mh\r\nh/76opYCoUG05PtKYs8xCPMJWEwXAhX294Z3PHXpfbu5VhO/68IHcV7iOT4u\r\ntLyKz31Z3JQEwRAtWEosTDYyupficlBnSup2gPHchOUFViz201dCLVIlVktp\r\ne9F3S9wM7lo5XMXTSCYCvedhFWI0nsz73ZJK80Ys2acnAHdow8yQxT+Idapg\r\nVYibkT9GM9BT9NYTRSt11kOtDu1DBP97E7PisDp2leg2vEkL8oe+hzdtIzE0\r\nHOu9JxQvsSpqHw9bg3/tbkkeqapW9JboKkAe9sC6JjcEh0h9P04V0DTcYh4u\r\nRrBGnlr7K0JGDWpGltJVz6MmewM7piQmDWg=\r\n=3nF9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGqyKb1L/OvxirbJpWbi9L3OHZYsCwXYyXlbj/jL1FrAIge6kmHqmT2eSdtVxapHqI7vbW8W+aZWibuvMJoem5KQY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0_1646309632208_0.8560158258316022"},"_hasShrinkwrap":false},"1.85.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0","@sberdevices/plasma-icons":"1.70.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8eedfbd5ca76091365d10aa8982d1228f4441ecb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-KUfJKnooNpMFhHm1uAeLvBqielJuxI2dpAoaTps1JuyaH1hcPGRjmku/Rzxrp0UGwaUNqTHyHUh0IaI2DJzwXA==","shasum":"a3f627f3e53dbbacde80836a1b3d4276e5faab7c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIMR+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPnQ//UHIcFkP66qTRaDy5bO19j/bITSc3Bd2m7+SYNNIpZSfSnDp2\r\nREvOzgNvwjhyqzb4h2kqLQ/jtHSMAVgoD6CgUmrtrM77qO9GujfuKZs6S57L\r\nD9MUxBe6D+37MsHztC4F1Tx8T0akch5ct3mWo981eTvU+DqsIUhFqwXieuKy\r\naEid+3Wlt2Fbmhd4ArjBuVVoMi3RmECtXsH6c8iy2z+2jcrtWDU8xQ/9iV9i\r\nKIrz2fsoPGvlNkoS+tnYL8w171Lz1E4oLzXtvxxkf42rDxhBHzSK5NT+KHJA\r\nBaNI9OQvpAnRpBdEadQY1kSevPDG+4yMnEhAP9lBYizN13+uxMIN47TVKI07\r\nvvNpvY+qEbONiTI2zoM338xgNzRnL4bisqrYGSq1bjd/Cw9EcDMkW2NpGe0O\r\npl2xkIQvYyjP79fenBgHtdneBsmzk2v92D1jKGT+VUj4TmvZADA9M9BKqoRp\r\n6ktl0v9w6xHNSy5LQgpV8Tavgw4jTcGr2LvQcBJ8tDnp7s4b/JXukFfXCKP0\r\nhCbpyw30eoVhUS+IAP9YaPmJLoR3LKpIQBf/yOWXw/mQV6FC0Wg7kDDR/b0u\r\nN5MIoRaPsJIlfK5DeKZ2AH6KRz5BTNMF+ol9zoNhdqmatL9O+nWQ6kSeDEmw\r\nLyPlfNObkLigxmxw/1moFrVFIPolbIVGoik=\r\n=Ugl0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDikEet2j0U+QBymLVVoff05O9X43DKk010rGIA2ChFPwIgIcFab4kDJRTqw9vNiYekcoAaYl4i0cf71EWVnMrbZNo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0_1646314622449_0.39064042170717794"},"_hasShrinkwrap":false},"1.85.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0","@sberdevices/plasma-typo":"0.3.0","@sberdevices/use-virtual":"0.7.1","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0","@sberdevices/plasma-icons":"1.70.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"518ed3e5f260979be6bef7e94c9db7abaf7edddf","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-dkoRl9deFyprxUVqUt2vUdilcX64+5Q5CE5cePDsSuY7nPEyE93AVsE8qP+r3oynupc67R4IqSMuenHmHvcZ5Q==","shasum":"7ad7a1f040f708576077592c24e476e49c09ff5c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0.tgz","fileCount":940,"unpackedSize":2599167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIUVWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaBhAAo0LI5CgaRUC7cegI5edFDqSQw4bp4tKz9WG2Vs02Q7zriJ1I\r\n9YRP8mK7B56sn+GP/4nD+N0JPPDtuaWXzII3bgYmS+VIL0p234wwS/691RMf\r\nqbff8Jr7VQmQB3IoCYjASfkRs/9MJTEpdziFbFdC5g4Pt1UAL+3hiwdvArZw\r\ndSmX55sNPrzlqxbgXie0Q04URzpitLe6j+rBNCxHl5iNoLw/AQda1DPvxUps\r\nAEsSYy+X6rgDUt5JcIx+mt6cKZ1tvwHeZ/u4Prz0aKUlt4WhevE7PCJU4hju\r\nVIVplXzy99H9pzlOpBdPpEV6T7xe3Ky4ywm+DqJjWyzCt2H2QqA/1KXDeKQl\r\nxmCPkXPIuPAG3Ih9f5JF04nKtar+qH1QrTycmFSmGztiMomRJHDTkypZm2yT\r\n8TWU1tgAAy8XzqjzMjxETHIwLO7k16USjDtWOY8uhaDe50Zg+EtU1h0n1M2d\r\nl1L9BISfG5kNvMjsE39sJKSZELcL5eRtw+98Fs/pT2PIRHnESD+l6hdXrn5d\r\nVPLr1zTQLi1GvwSGUYMRd1ynUlTrUH9nv3jfSf6KuwsiY2oZDnaGGbVh5Bbl\r\nJDI1wk7nMc7IuFQNKJy9NRsluSud9hzHxnV8AAr10bLdl+4LE+Yu6E2oLnIH\r\n8Ib0NRaEev/8NUHsirlAIC/2RqmmPLvY5Bk=\r\n=RmkV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDi7/JOlVOu7UeE83KqxmN80BiuXP6JPWTwNPB71mus1AIgSr9qnhWHgA8Cld4KtJCqSin2w8c0zf0T3zhBuV8O1z4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0_1646347606127_0.9303971618070901"},"_hasShrinkwrap":false},"1.84.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0":{"name":"@sberdevices/plasma-ui","version":"1.84.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.51.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.7.1-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0","@sberdevices/plasma-icons":"1.69.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0","@sberdevices/plasma-sb-utils":"0.50.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.84.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-UyRX513jyNr0OYb+gnWS1mzbbH4uN4NMdwt6AJy54W2pfiM79OD4E5X0piPkz1aoOTUNSWZI3lzkBA2u5ULZFw==","shasum":"6745fa2a0ef328d708f3f115597bae8a521d8073","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.84.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIdGrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrepw//XY2VNshyD02AapcXn5bW7OXliOEh7V1kUc7+beIXRxOge/S2\r\nV1g+2lNdfG+imqbu7GtGHCIyUCfgSyEsMCtTZEOqpD58QsTsfwk77DBFGRKP\r\nY0ptZjwyndLhH4EwGQ0ezzk3E0BCXWaC1BqA1sqQ217IGToJ2obfgsDhF+G0\r\nZzIL6S/eutqy0NmdE4fSXR3+pwXOCNxVPBNtLbpQl/eEUAEU19OW94xWAp+j\r\nvZvYQKrnz8XZcHbdgRMruYx2XplS2aIUCH2PEZXiIxUHxTb0e5/ACGeE0VBR\r\nGMB/Ydbm2F9OmUuVrv4u5n7mpEpDZoJ5juhRRw7vAx1iBaq7ZqaPPVR2sgXc\r\nnBq09CEkjEafIVGjCp3sM3qlZ/ei1TC2PQCS/LI0IcqbRm2UK6Vj5tzpS9o2\r\n6E64uHjdirjWO+3FXDQcEirtKZol4SmgtY1kKtkgB9/mILRlGYUUZLYH+UpX\r\nzkfVn5FeAyY9SzIIRMh49L14buRbDyBDRJCY2PPtr7rqRkSzd5rIumU/0Qvw\r\ndhIRWtw4piP2RVP3gWgThZpQZSEyfJB8G45+qiCfVInwekYRwKT/seqmN/Le\r\nOgiI26Lj6ZQI0IdNm80NouSnbThnx6ufEpt3nKEWBUIjIovurpGa+eqFgg4R\r\nQPQ5VuLWiCPsm6ywPcdcEguhqbRUqWorW2w=\r\n=1M6O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVAG96O2/njuMQ9ZNJQslE3ndXTFt/AKXMU+6etOVi2wIhAL097hhNxD0CbsPF+z8s830B/VdhKqkbAafWtYASAuIn"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.84.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0_1646383530912_0.267492708118944"},"_hasShrinkwrap":false},"1.85.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0","@sberdevices/plasma-icons":"1.70.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0","@sberdevices/plasma-sb-utils":"0.51.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9b27ade5fd2acc96fedde32033ede66a906da9ab","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-LapHT3SS7knpmOPS3BgPjMj4GN/LDWyiugsNMZuuGIs4aEXEQHv49I3QgjOypapMVZxPS7S724hnK4MDxYjRgg==","shasum":"d9ed07a9e3a2a641945877d236ac351fcadfc1b6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0.tgz","fileCount":910,"unpackedSize":2509706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIenqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroMRAAgslif3ZS9PxgeZFPm0wS/Gnfhxz7rSlTMQBaPKC8nzNRyeFA\r\np/ARCGOf8DIYiFY75/wYyJ9zgYDxiyeNmwSXf0W/XLMQWynFKD3WK4T8ajMs\r\n4yAKcQXPe+0eXBEzl0HLiaJAv8VDBAugpAcqcy58bshNLDA1ade321JFuung\r\ns997b1ftmApxXryLfGByw1f5u9A7TuEyi+uXxpqxPpxLM+69lYtKj3R/6SjY\r\nlpW7smS1GwpuihLoqn5NOpUFXvcewkxMyinE0nI7C7U3wpZMayclVdR0xX1N\r\n9oO2vD79OXzJuCGt8EPRj5NAD/AXq7BxfI7Jr6yZQ4KMjgDULt4tpQJSLuMK\r\nLfc8OtYwzez/qSB5onwmRbLVNZnRIvJELYpWCOG1+XjwedD7N6FpsNOU+ZPj\r\ncYDR2gbzk/5ySAPHN9IDi4Zm2kwCcnyjiVgCaAB6S2g2iahpRIK5344z6O8g\r\nNLZTFdmwpsj6FHUa+fIsY+BuLTvWNL3LWWBsiDKEsntp6p5JbPahqVINZYIB\r\nPK63D4lquW1EIaxqYQl5AC+GKcRIUP6gUyuHwYhf8vSCpZHRFPA/bh2HZH8p\r\nSKC6tTa2uj2KGgTSYwwxt9NqOhYIQRbWZp8eNXB4ltkXxWcjxhL5ma2jq4yA\r\nHDAILP92Ld+zIzAlHCSdkNw+iKeprV2qY34=\r\n=uXE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqtT9cp7Gc5rNUMMYMh66JE/hEGi0OCQiBQ7Lw/xLtQAiBptU7jmtSSrV39sd9K1yu7BpLjuin5JOZKf0sRz9U0Ww=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0_1646389738597_0.785862112059543"},"_hasShrinkwrap":false},"1.85.0":{"name":"@sberdevices/plasma-ui","version":"1.85.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"394e1678874916530ab89b6260cc0b4b8fb41f13","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-VU4QarzD7qdeBy1mEj8zj8ik86K8hM67jdeWxWUSbKW1jrqSy7CTaM9O7LX93C4v9xDar+s/XsiSHkmh2oQZgA==","shasum":"0607b7dc2a4713ad57d8df12c1570f905e6b6196","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.0.tgz","fileCount":910,"unpackedSize":2509659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIfoWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKSw/+Ms3aTvo5FXIZ+6lMx0HotTN3l0RjuXwfKxn/sEYcjZBhKa4+\r\nAqYjzuvQeByltftAvjCMtTDDMgD0vL6UUl1YSXP7Eh6HlvIthBfIsTCN7NBI\r\nVgb/rhZyo437phjIhSLDtt2LYl8jOfkzz657X1vkMyO3Ok/9d4hJR28vMKUe\r\nYN6nFklndX4h9RtmxqubLArBKyfIoNg8hLf845HDKK7kKhr6XhBNuwK5CUaS\r\n0kqCET62ZKw+smlQTURN+bVbB9PVDQI7itHDgrzvnYqi5DmcNyasA+vwMPwP\r\n98xs0EfpoKO5b3sBwjSQdXNZ+r2wkhgzLkRuHXDP3NFqi9eGxYoUI9BXLZnF\r\npvs7Hk1Anfv8Wxh6eKtSYr4kKxPLyjtqBg8TQEgidMfgGDPNTPV5g/WnYAGL\r\nA4IZaE13UCsDaIZ0US35BBKKJXUrJD9IhFI5/TK/nG5y48GqdQSYLiTDuq5X\r\nqdOUmZHboIWJQf6f5bLD7LHiryM8SqK9uy6reJ1/1Hi36eQqAVX3f50dKlxJ\r\ngczcWAl0MkzRu5HniDLj7gIFzYIwASyueUk9m/8lLcYHMRQhiV/BVzvTgQaF\r\nCndIVAgkLsQZcND+IJ6RfxpxLv37/FRb20h5OttWnhzxcNRl7unMw0rRs0wi\r\neAGKo/4ek7a4Jfhml91P6OPtZRen8uNjFSw=\r\n=QIqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDi4Cq7JTyiHSzkw+rLZqNSWPpXSiJDGYFh+dO2lPw9lgIgAsp4WLELnDB1WlGe6KMdoPmDMBRBz9q0r4qwkTDBzIw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.0_1646393878049_0.4272217081291476"},"_hasShrinkwrap":false},"1.86.0-canary.1133.350daf04f80348b4d0323de7cfb76ce5fe8f7d26.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1133.350daf04f80348b4d0323de7cfb76ce5fe8f7d26.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"350daf04f80348b4d0323de7cfb76ce5fe8f7d26","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1133.350daf04f80348b4d0323de7cfb76ce5fe8f7d26.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ucyg8DcwD7ixLqcsCYVnm7lZFTNtbp3M/BQ6m8B4AKDw4APulOfiwjJCB+5wvZSSnc4XC/SwjE0rVcLJ1x1O3Q==","shasum":"cf03fbfbb35c24a8348e37cf7b4e42c86d2ea6dc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1133.350daf04f80348b4d0323de7cfb76ce5fe8f7d26.0.tgz","fileCount":910,"unpackedSize":2510400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIxY9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJRg/+NrJJSaeKc94vxBUFCIOf3YSnr2lKdvJE1x0m4plEANhqYSEv\r\ndP5Yd26RuUEpBLcDXIcKt3y0eMt5V7hKP6pUzIkPO4kgvbHcbpPVpyX7KB01\r\nTnTJIQ5oNzJOfvmn6azoRZYITIrT9ZT3pm+6ys9CUf12nFwFnxMmasPC9p58\r\nlWJnsQ8fOM5+TK5Ih27atLZ2vrSI/mCXKHp/daFLol2e/6QDeEf8yQivcwyw\r\nhkmGUED6XQd9I9WJZp2QkmuCSdok42Zm6zRDHMS8xuT7nTA+jluzzoMfHqQn\r\nVz3Hnff0T4aeUftHEYYs4amMERqd+sIH+uO16a2Q30BS+MUVkNNQ9tzAR6mQ\r\nAnw3LPXtZpbOr+1GxjwBbrgRRcu1oJPoft/ZANY4aH2SgLRT0tFmtY/7idUT\r\nbjADAKaf7U6hSYYthHdoc+JkWXzPuC0FC2WEdcShGLeNujNv3dRmSvhcnNWS\r\nU951gbMCYPN9YG4W8Y8lByD2DjnT0qsn1Lw727tsBEEXhny7YwGml59AFO7l\r\nSitfjoSxKW5epDHkcD5WIpfAKj7Vt9z4yflslICwo/oaSjwX8ECtS0ujSSuw\r\nVw77eqm0zrKCh0qmeosqFIvFR0HsrAG0n/v0s6QR8ZfAv8e6tWEmIKruAok+\r\nJYUS8vDdG73m4v4NOd5oLJnt9I8UVuTiVtw=\r\n=ovfk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCycfeP8lcQ/kERD1VHljBLpUQpjsZz6dib05ioNWwVLQIhAOTFsLLFXRQhZmVcCn08jdzuOw1WYbFnJjUtqrY8e9eI"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1133.350daf04f80348b4d0323de7cfb76ce5fe8f7d26.0_1646466620713_0.6966251721978864"},"_hasShrinkwrap":false},"1.85.1-canary.1120.7e074b8e83b895eb87b797d51fd987bb67871f00.0":{"name":"@sberdevices/plasma-ui","version":"1.85.1-canary.1120.7e074b8e83b895eb87b797d51fd987bb67871f00.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7e074b8e83b895eb87b797d51fd987bb67871f00","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.1-canary.1120.7e074b8e83b895eb87b797d51fd987bb67871f00.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-lBYexpOKQYrLLVLstCXe1jHI49I4MsrkPkSP9bs62J+W/an7zyWldQqh9prVuG4RdSwbcSXYLpn0DCdAoKlJ/w==","shasum":"c0fd9231d55d8d261f8d41010e8a7a73e8d0c3da","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.1-canary.1120.7e074b8e83b895eb87b797d51fd987bb67871f00.0.tgz","fileCount":910,"unpackedSize":2512641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI0WJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBHhAAmWFSfLOqLs8q+GIFdiS0odnZC8L3v10+Ccr4oyonN8GCRdTI\r\nTlahn3Y1p5gb1cnXJK2jUDYP7ATWekFiFP3KyVDSaZbRU7EEl7wK3TZFPnPT\r\nH3iCdk/BKIu+Ifu1hn3ok5nEYgi9frM2IU7J+ryWrip5oei/ae81xwgVnyov\r\ngEq20NJXook9970F1xoa9q1GyICs+dXNM27PIK6C1/Y3yf6XXoqxh8SMMUrT\r\nAuD3QZ9wGsgQgAMI++1WOzdeSTTxPMMnhWwc/PkeHxzLaw/lAW3JympQL0Si\r\nRFiY90Otgqyz7MTEOxKRetQmLUymWds+R2NeJ6tHgdI9PFDKOJGZNZUPu7yV\r\n4YsRtpAT50Hz9SjKe6XSjvPUlGWXJzvuH8gdaRXPzdVLf/kfkz+5b9dcUwgU\r\n1ITi/co0z5k7Sd7Ex81EM7X0kuL60GKafHoOxlabFQt8idtX1LJKec9L5ZgF\r\nrPaVQhB2chbgTPuHI9ACazP/ZzzSzxEP3al4+6MEeWMCKam3WbZakXNQBEKN\r\ndEj7IYuUTpTi07FDUmd1Vjb2l6pfqLCctzu9mf8449ha3GLe/YtgX1Bdrth5\r\n0/sXsgLOozW7VrgbYJKo9GrPVSNaRLfXQpeOLhZR7hAvmF6lNRD6baelbepL\r\nN/VREgo6F+XjZbLn87RcJCkuaK9RVmei/Sk=\r\n=CuBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCHzcdmWCP/O5EyXBatUmK5LFSNB43LzyIKJTjjTObHVoCIFnLzhvYv7XF44WpbDVnbZoy9DBSX/i8NBdxh4Zw081l"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.1-canary.1120.7e074b8e83b895eb87b797d51fd987bb67871f00.0_1646478729119_0.7869390335939248"},"_hasShrinkwrap":false},"1.85.1-canary.1120.659f6f7505ef30212bda7653d9f847cbde326719.0":{"name":"@sberdevices/plasma-ui","version":"1.85.1-canary.1120.659f6f7505ef30212bda7653d9f847cbde326719.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"659f6f7505ef30212bda7653d9f847cbde326719","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.1-canary.1120.659f6f7505ef30212bda7653d9f847cbde326719.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-90aGraWAqIahY2EKtv33BwvYNnphWXAOGssOZfbJuK6ukq8859nqgFsH8rFomG3Nj3sZDfxXU2Yz3qo7D5s0sA==","shasum":"59166bdc2ca85ba8c95d32a1ae448e745164866c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.1-canary.1120.659f6f7505ef30212bda7653d9f847cbde326719.0.tgz","fileCount":910,"unpackedSize":2512590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI2BZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWHhAAnoxEz4+QxdZYbTiu/LqUjoMLWe1H/ed6YgPRmWfj7K3dtcGj\r\njMAC0/XzMFJb27Vd+C0vp0yP4W4BEOWkWAcIlKFzLmkXZIQYk7uFl4h07Wlb\r\ny4HInnHjyDdxk01Pcntnd/viGW290iKG7+Qb92COpe0SfDiFQzXk2VuePohR\r\nNLfzfL+GAXBN3q8I9nf8VlhNsdbXgA0KuT40OsAmJ+rsIYoowhvZOQMfK06h\r\nq3isFS+dVWPG3psVG6jmzm4cR7f0n5zRfOsqo4KnAgiQafuqE5LRo1VnAnXN\r\ntxYG3cAWJEB4Je8nvodD2XtjcpR3cbfi6dfa5BImEmvrtnx0Cd2pYKqiklOQ\r\nBJKuciBS31NvHuIHueA6Gic5PEs/oXvzztaRSUmY8y+a+f97EBP/w++ewvNW\r\n5GpiQcl7aESBVsqM6GLwa2XU2wBu/ok8PdJF+VQWm//2Ggpv0rikd8JmRRPL\r\n3tppTaR/3O/sBy4uIYY17CJHEXSDzjMCpG93CwF+uifKa++AJNT58obHiJtU\r\nLNJVN9rPrXIYmjDxnDfif7iZK8XR/OWynIPEYLO8/Y7wd8rbANvDMTUWrdvC\r\nv89A6IjMtCJ1Tu4eHpBI9J+KKKPUWPRU5OGqluVG5OiHT65pL6gqSQgS3hwN\r\nDAzGBmT+CLGu10WjHimV2mUD2000AAP5/dk=\r\n=OceK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHKdfLZO1M1shcueS8BcJGU4Zjen1IwlbUlPnC06AAMmAiEAtd1N2kSJVELH2zpqXHMozpzCVKOZrlAojHH5/BOnmTU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.1-canary.1120.659f6f7505ef30212bda7653d9f847cbde326719.0_1646485593241_0.3249322018886889"},"_hasShrinkwrap":false},"1.86.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","@sberdevices/plasma-icons":"1.71.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"80a6bc7e37632156027857735a987f6f3368a312","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-DbM610ztxOiCL4Z50WmfRHlZsAa2s+GKlG/3y0VJJA400cr5L3NX0cTnGNkefNqiRvqAvfCwt8suvNU5IPpWGQ==","shasum":"1722cda834d2da180547b381ba46fd79e8fbb363","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0.tgz","fileCount":910,"unpackedSize":2510081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI3ZxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEug//f3icxFXN/AXzj1I4YvNfL18f3UFr5ckeK5l4LSzGKhc7GOKR\r\n6BjIbcUGpTUZurhPIqCTX9cX7Wrvjfe/Pfv9rlWSnqFmWtDNUeMpDA6Gq10K\r\ntBnI66z+4QSlfNqGAN5ooba83VVzlUgfFgsZHhGR9zmCygMKr4U1qFFf8vfn\r\nR5f0o3haGJwHD7f7TZVo0NNNhq+d4NMT7WhrjI08YrY1l/q6MUg4SFEj2Hme\r\nuH1+846yviIFmoszgnBVxtlFM2rIRpijGtcjYVcF59/ef/MEWPqXG5Pl+6YK\r\nas9l11rQWP0jbS4y6BJAHC261SKkx6RuGhdZVPGoZ7iz9/H5pJAbdWnsHumw\r\nvM2PPcglVrebFpYCLpnlyq9LpkrBvPTdB+vn7tBD9LtqyX21UeVDHrJIPZuq\r\nqVB8Zxy9yolpHH/hyXLkrSmfFemyupL6gG6taBoS2zXyoXjOHWG50dI+B9b9\r\nskiFZyDXjRtXYlHHXOuljMErk8CsCAgiIunQa4zTZ4mguD5uG4d3t2N0SMv7\r\nKAv6f2YoSEfQyafzyMzeYAJrThOJ2AWoUtoWVrwOOmvtZ8SDTUPC1X+9/4SO\r\nO7tpMO3kIiFptF8RTV5GVovml+o38WJ0p9dI+1Iaw3cjlt3y7LONssox8Lrd\r\ncnMMCu5x1UsAtQNXh9GxxdFvVFo5XcNnkNI=\r\n=GaEb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9FIxwyHRjA8U+KEXofb7Z+R41ZcAFEA0wCaoNyb48aAiAjIAgiw2lsnIUf2G6pdcsjcfGGAidQfKaBXy/rvrXCcg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0_1646491249563_0.3389979439252948"},"_hasShrinkwrap":false},"1.86.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7fc5fb1aaeebdb3d9f367154fd45210b3f03d418","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-7zc63MvUeX49+AvnpL7EZ5y02NiLJPCj7lLnjy9XF3mnzwsR/aObAbHkF1QtdHvAspzjddDDnOm1WitHBMBoVw==","shasum":"8b327f9070651229b00e52f33f890b01b71bcbc6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0.tgz","fileCount":916,"unpackedSize":2527074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI4bxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkghAAn2uTPgG8meCNyAN6RJmmGGcAhTn8pKMz1nrCD6Kr859g3WMu\r\n0/NgHzYo9OBrFuUySCvtAB0dJUD7jlB99cBWbbyDqsky6yj/nN5ucjsviXAa\r\n//2uSugZvSPtnzpFNs9PHLyB32kE7LoGH6kGP4TdRi4t8bfbj9A0qCL/NUVB\r\nbBYlF/XRcWaRR3xQalFSyGBZMEPeRkdn0l7GBXUfDjDCUICRfQZ4iKF/P+kv\r\nH1H3VbAkMS6opE9oQvKHHGmnMfMdVKE//YsPsGJNjVyd7y0gHGCaz0NGisHd\r\nJ+XGuZQ1GZrNXrbMIO6Ar9L3WWWz+aYYhLHpUlOGz513bEJhy14mg0HhFIsj\r\npsWrPkwUbT51ojLRWUhvgN0Q6doMfkcyTcmMdecZQwPAOAtjd5tPrR87GPt2\r\nY5bhE9EMz6jYlPeKoEgnsnu7/AsrVPuDLy7+OOHSBftTnjZ4ss0JYLBZ8Mct\r\nFvFwt3r1YWU5+JyZdxR9AhtmyJJPs/tBCg7g6I2RCJCLWn/SokvQ0pLiGDsU\r\nDtDTlhEwI2VDPmH7Iw/55+pJWXb4X9/X9WFPgpimOPMoL6VgX58FBvOXbdtx\r\n6ODgCaukFNtMaqok8QUAs47X/RdcMDLQPlOAqCAphEwbK1LU7OSwRM38CQov\r\ns4b9SodATnU0EnrfB8lElfV4l2a+NudvYC0=\r\n=s8Gg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfBBE2iDm8c/iIfDYauq5I6TvWWPsLL5B7gM+iImmeiAiAm1Vndaj/z7adLVGkCH8Xbqq3xfZlI8LL5Ag70bxhNfw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0_1646495473309_0.13942112655900663"},"_hasShrinkwrap":false},"1.85.1-canary.1120.9ef57838a047a195b9197738ca3c921fa1cd04a9.0":{"name":"@sberdevices/plasma-ui","version":"1.85.1-canary.1120.9ef57838a047a195b9197738ca3c921fa1cd04a9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9ef57838a047a195b9197738ca3c921fa1cd04a9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.1-canary.1120.9ef57838a047a195b9197738ca3c921fa1cd04a9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-dikCWCOyc0c3vRBZRVs6vYFThNWiPCRxm+Ja/AwWykLpD4LPq03iWN/wOYX83NOZ0El/YwDmR0a6MjzW6Sos3A==","shasum":"f3f8635f99d0b767b466455db7998c8c2616a901","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.1-canary.1120.9ef57838a047a195b9197738ca3c921fa1cd04a9.0.tgz","fileCount":910,"unpackedSize":2512590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI876ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfoxAAh5EY/BYqFblUbdiIzX1cx3OiMK6icXfQ+mwGBzIhM2kArj1U\r\n6h9EXV0R6woleBSx8wX135EChGZ460S8afh9J47/A2k6ZHMhsuEdbLBxLcmM\r\n1EOA/HlFgWMG1NCl9vAg4/Rmnulw4uwJ7ho379sT3Gv6sFdmRl9weunRdlt1\r\nw9sdxewuTrlDl6R/bX9JAoiSxkz/okEJgm42lK66MWsBDvmpFmgDJABmSKQk\r\nec9a7S5HOIEfPrE28ktIUF8RlgXRDjbFsb09qrWPR2OhVtfYxgi+jCkNqO45\r\nC9vn1osQ26h/irllWs627XA9xUm68QqxfOjGX4jgGdh3RGV9tT1orm1FsHU9\r\nQ/97zO3iClcTpgxS6sWVNGK0U3IWRhLxx3QCEAI8y373EcZvVecLcQ57BRYa\r\nZQzVMGf2Jps+8X0wMwvWnR4ijIZVv34ld3G2gFBFFu+AR94gA7NINkqBa5Si\r\nFPUDMol8gx3lCSxEhmuRQJbn8lfIa0FzUDhlIEJZa9H9U8u8sGbXdfW2pLwR\r\n6I5cfsAhZhicq8mjp4Zlx8ONbD6cV3jbeaxo/80Xiee9FQvkj7DyTLfQqPbj\r\ndz65KRA10Zb0O0CuNqfgPj8kXuLCj7krQM2kDEd4JTcPM/OtHXA8eDVJof2s\r\nkmXZdwHyf0VTDoZcmifJf/PT19D9v+R1rsQ=\r\n=DHK3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD51zvU/sI8GuExn93CPMPJMD+vrvjh372gIrnMDoCNdQIhANPwv2HHDFaprKZ/8xpklnr+P4tw6DvudEwJwBfjPype"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.1-canary.1120.9ef57838a047a195b9197738ca3c921fa1cd04a9.0_1646513914618_0.9444938470716797"},"_hasShrinkwrap":false},"1.86.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"98799eb933feae330d11327aea9f9d579eb2795b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Bj47ndPZ8+ZuN45l0L6vDgsVkBEr9mS1b+vtMvHqSeNoTLqObKInUJvmyyGHdIGx60iPf969dPwnj1WWqdn0Vg==","shasum":"2ec666c7ca3584afa46660a5eae5132f32c5e778","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0.tgz","fileCount":916,"unpackedSize":2529095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKEr6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVhxAAgcliwL/yDjYeYNwGtwIr6gl2qmpPjZ7mGLgvaREEzXaI9pa7\r\nn0+OOQunRPCWlJaGmzQB+WaKbY95T+q7NhoAR9IoRrzYU5aMeYCmvYxye3Bo\r\n/HuWVVjUKi0qyI1Jbhw62KiU2C+zOLbYVg64V6u5+rWi9gy/WdUpcH1ZBGRu\r\n4GgZqqYw6Nyvgy/g9HFNRHwFcXXNBs3TRMprU/yiF2snqV4cu+RF61ui+C1g\r\nX+sVKTferfzIloUtztJpf/F0/yuiN7Lr04veJocLkAjeWVSyVjfmeJPrLrDF\r\nQAP0x5wtQcxLkS/+Cigr/4jPZcnAFC+2lvWjB+pIdmon2ZpntM/ydcfRSc3b\r\nfDL4VQLF+DW/95EaP7kKHn57OfOTmWfgOpdKGJhf5HCuAxldIXVF/TUZsMwf\r\n6GX7OD6lFwmSsA6iAoTLjp0nmyy/sjezMy1ZVH34e2w7ilNB7AF3fbmLPPgy\r\nHlKjZWiTIpCN/Y0NZSYCLIxsvX19FD7bSNdnX7ZBXMJcqlNkvzLryTOp/fZw\r\nJV0Jx6hNRn9dmVy/oiEDs+d45P1lugqi9OfsHyd55JsnFvlV6qrXpKyewKaX\r\nvjlCLLXZteU8xoAeWzQrlJ/vwg1RCXDAIuHRIwVOtbsJScFd2qgwP8qs4vbq\r\n8ZK9IUswjSdR50yzU7YWCsiHpG5sukTx+PY=\r\n=oJyp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI+vKxAX2hOvu06Ge5OAyoichp5s8vrMYZrMxwN4seWQIgc2PjojEQKbQ9pOs9hgcmCEnTi5ZnsdVwCQVGSXyZkfk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0_1646807802528_0.3313904570684625"},"_hasShrinkwrap":false},"1.85.1-canary.1120.009370ef10d0491f256bbc4204d00064cfcf155b.0":{"name":"@sberdevices/plasma-ui","version":"1.85.1-canary.1120.009370ef10d0491f256bbc4204d00064cfcf155b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"009370ef10d0491f256bbc4204d00064cfcf155b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.1-canary.1120.009370ef10d0491f256bbc4204d00064cfcf155b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-McPjjaKkPgL4r7MZ9Fh7nOJdEc/K7+RG9L3RkG8flhRPWoYyyzVGUehFlFsHq8ptoTsxiTqrlH7wYWBgRe3VzA==","shasum":"857af083365cd7b3a3fe731b2d318d8f0d72368d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.1-canary.1120.009370ef10d0491f256bbc4204d00064cfcf155b.0.tgz","fileCount":910,"unpackedSize":2512590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKJVGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo47RAAlaU3OxvOWvPruepFyQ8f3xhrew6CsxTZrVu1zMkzndNsUrv/\r\n9MhMAnUpKa+uwFlTiXFo5GrXLWDSlUKBiOSNk2Ry4mPThfwWLSL4l6cT1Kau\r\nJPHaMlnRbC/7QnI/F7pPjSqzqc9/CFVydhUPiljMxvc5t0YNFo19e9H5+weJ\r\nmkpi4jiEzVK9ZkykRYTJNot5K/KJpUrT+fWET2zpyNnLj89Q8nIE1/dOOsiV\r\nr9Rd1ZS3pEqodVGTzP9NrmCaISVayAzkqs7uND16HbvnefeRvHBvBF+olIsn\r\nuA51g0IAhJXVxTlFT6Wut4m6Nz+Z8Mlr/f9m0m5oOw/QTsX5SydaFCLOvDRf\r\nn/3Zn8Fm6RmxagzOy9PSVgTkQpCkToOe4eOnhQlmyt5RU8cG/01pv4JwB8+l\r\nf+3m258pRQNlcJOTvd5NvB6yI/LGj+Q6vVhr84GiYEMteSILCFXbsgTciOzY\r\n/47KAnhNeKblIMdqhqQIQHOzTxmTRW8JkvK3effjAx3gLh2bMjX3GG4jMDyA\r\nY8FxOpunyOtEx9vZe7MFdMKzwRg1qoFcNYq8jKQLNjzzJtu99qxuWEPj3rNF\r\ny4Y7Q86GKFKq0mY0ZVMn4eK0Gv7HDPAOz1b6cbGPrVU4pIkZOdB4aARmfd9Y\r\nk3tlxv5jktykJMLzhfovbwgT8+/HbZdA2hA=\r\n=YkLj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG0rcjWtZnkoWt0e7ByS7g3y/Vr3RuzWlh4/uF4eqKwgIhANS5ubKW6pR97gInnqSaSTQOusmqMxR82TLackxtsuD6"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.1-canary.1120.009370ef10d0491f256bbc4204d00064cfcf155b.0_1646826822505_0.5924995411869223"},"_hasShrinkwrap":false},"1.86.0-canary.1137.ed0dac74bc0bf66645f4c1274d53511a3a8f653b.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1137.ed0dac74bc0bf66645f4c1274d53511a3a8f653b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ed0dac74bc0bf66645f4c1274d53511a3a8f653b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1137.ed0dac74bc0bf66645f4c1274d53511a3a8f653b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-9HwML5C2ZgA03C4C3+ChijRiYHwtJrB4OShTb/Xrf73utJqPc38dTiRCwl1YisfUBBYIJHswvEecS90AjCpAqw==","shasum":"a3297756728fbce5d9a5bab593ba040ad2340547","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1137.ed0dac74bc0bf66645f4c1274d53511a3a8f653b.0.tgz","fileCount":910,"unpackedSize":2512590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKLZGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOOQ/9HdgtHEuuX/6AgGatNJ9v1uOfub/qbeWuvDGq2bH5g6V3k1z2\r\nXaQd7nm8b37r1eTZJFhlj/FSMP13roRBbF80F6q9HcgExgvPreZ4uhY2HX6D\r\n9bxZSy/MBBdGsMdMnqKn5kFcKSIu1LKavndf1DujQJCeguTQYdEarH3EJHA/\r\n4QagGgoFYjN+uhPkFVRe6tbmiVSWPvFvFcB0PDPdKakbMXE+M42fZ4yJDcAz\r\neV5gRi4o0oUdHmB+dVjMb7sk8smbRZcxQSJ/o2InENKwtjFFvb5G50f7C95/\r\nHv6DgurMocD+6fznrmd5PSjP8Qfhq1ZAHkdXz7WsBGIwasfmK77e/WYdNJcV\r\nnzaCF9cUe3/OFDkvnCObwKd6xzPVNGatKx50HEVroKsqkAKCq65CrfDIVFAT\r\ngVaTZ290U3Zl90N2NBgyRvl5MndkAJjfUlM3bvS3YCHup3JICwDm17GO/lRa\r\ntHikySw5/fveRCn8XNEa5yd4NvDJI+Fg7GvgY6/uLJWP6krduAGJhqKOJM+q\r\nB7PRXTY3PpKyHygBWz5Fe6DAAQM3bHFoL1VqjdOoRZkrZMKeV8rc+yj1Ln0r\r\nI58iPwr7+lUQwQsx682eY9JOA6YWv7lQ2GJeUHYA5KQUaMP0szi8hzt2lBsR\r\nORYpN51NknNY1z+ydwe/JldYwnwsNgDyQ08=\r\n=bsUT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu7HCMKsPbU78GC4VoOrqwNemulwTSLOx3Pgclnd+QrAIhAL5buhZMSyS1mK6rwXNS5qVk3pbflraDEPiJLBelNREB"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1137.ed0dac74bc0bf66645f4c1274d53511a3a8f653b.0_1646835270087_0.2685729152407019"},"_hasShrinkwrap":false},"1.86.0-canary.1137.e5f0647252c2587f9dd5123ad2c4371d036d0c2e.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1137.e5f0647252c2587f9dd5123ad2c4371d036d0c2e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e5f0647252c2587f9dd5123ad2c4371d036d0c2e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1137.e5f0647252c2587f9dd5123ad2c4371d036d0c2e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-bZsWFObqu+IZsLkp3zTcY77ZE3VVcm2LgbNqWK+5AfF4oFr9DJmV6u63AysjeC+xYsZfIqO1Z2C7wCCHpmFY0Q==","shasum":"0e7811f28ddb72245a8940883846eb3885676737","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1137.e5f0647252c2587f9dd5123ad2c4371d036d0c2e.0.tgz","fileCount":910,"unpackedSize":2512590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKLaNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcPQ/8DTg6Bg4+acIa7iJAg2zux2N9bzBam+Fe7Hl8XAMG3A76/hSS\r\ni32GRNWllH+NnhvGr/V3HS2vzF1RDOTYWdALGoftINpTBLbvIm+KT9Gs6ySc\r\nW4Z1IAKq62FpNsyMnx2q+0EE0d589SxDSJvYnZzqG2GYS3a8xX6prIKv1tT2\r\nUhxfATxlAKEUeI67DARouC72jFjBPZ3F8LEg7xl3eAmimfnTFoj3vemSvLZ9\r\n05lGGV0j3ROQ65bycFBYdTxa2oi8YATqa3VKuOPzHnkPLGLUvya4LcynALLW\r\n58Tku5IOEoF/+bmJyCHVgqCn/htvTremIygspOw00Xl6tW7a4XYDGv9XyvmD\r\nDarlyoDGJEDsviSb9Y+iUsdqtbNVcKr/kxbWkgW7U5RMnetZCWp2M6wSugjn\r\nx4g9/0NOBry/5AsgA83xIw6KwT32UuF+xggduvZbwogUix4Lye5EX5Kvm5HN\r\nNbf2KTpJolV4QMEJEvXhsiLGtGLmd5+X2LI09nEhGKqLIPzKDPBqDm80wOhC\r\n2PMBpGRIMagMLFHo5cmn9akzMvg8Eihs3xVtu9Nw1KZJOEhKv49Kvtfeenjs\r\nan69HlVT6hIiwHYMayx+vtyaaIQxeAo73mJbA7U9p80X9AXhXAfzejKrbEQz\r\nno01w271CmO5ZhXQi/O1M0ong2Ft6p+Uaco=\r\n=fCb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkbt0dJnoiW8Q2ST9zQF7DtQedS1sXa0TKVc4K0gq5NAiEA0yygNqnv9uw1mNOgrpgu0Gn7GxAe68a6UwCOOyisO5Q="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1137.e5f0647252c2587f9dd5123ad2c4371d036d0c2e.0_1646835340853_0.5706750080503082"},"_hasShrinkwrap":false},"1.85.1":{"name":"@sberdevices/plasma-ui","version":"1.85.1","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"81b487ed76f53bffeb616626fc2f03c0a9eb018f","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.85.1","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Ooq1mUwxDQRR3ZcjMb3uVd17Rl6y/r3mbqwORy2qEgJx82+45r94HpqxUoba3gtPTZTXFAoVG8vEnGFvSFFDmQ==","shasum":"0d6c1e28e265eb872d88d3168fccb5ea57ba187c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.85.1.tgz","fileCount":910,"unpackedSize":2512813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKLiLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKJA/+LixC61MgU+lz94lByoPmF1ReWKhNkKKq18uTl1Npe1FtXG2O\r\nRYmjPPegkRNl2qL5tICT3n4Z9chKu1d1H0fm0mCcqp0iHFABIKHm2PtQT7HA\r\nqdQ+YBG5AGdq5nYLpxv6bjk+9/IMIzyIK7N+wSpGCnKK51RC+ctjsu/DebeN\r\nB9iGyTgy+h+wSdLmlq6DC8aGjawimKg1PlM8m1Cm5/PXbSEGOfbBToyuywc+\r\nLQWgABhpMW/munBFLZLniB8Z9d0jmHj8dSRrdAwFnMTcCZVLkahQ/TfSUKzk\r\nhlvGhfWoGkePQYranYETdKV2uoXNFsMeSSTseKQfV7AcRn2aXOcYD/msvzuz\r\n0IPfJi1bmDddukiMQpbWp6pv+ZyPmDCn9rFTU4Wq19v5a0D8ghxJ8dBiPnQk\r\nyvuWYi0UhQsUA/e+Na9LLW0ZcU3UiEoEqzA6KmPZC8rqTTBYuxXqtJL/BI0o\r\no1OMn9/7WKeKON32zT3KEeGVJ97aoajGsmaOfgIwUK2mlwAeKTGkXzwcpJ2/\r\nxzy6Q35YOQzzr86/40Iht6U78Y48+Uek/4062Rl1lE2cBlRJDi54KjN8bJlk\r\nM7EyBDn+2CHKKpJRbhxqoMGrEcG1RG/90Nor1vu4aYmaX7lSRxKlMueXAb+5\r\naYclYMhmShV7nzMgz5pNgzmmku7FYSNoJ1Y=\r\n=rksI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8POfn8wc3Q7fpZ3ltkriLpWDWx2C1quPPkeLgXjqkWAiByLso7/dl+1JRZnCVR0ZHs4UgAk3JHzfR7iJCs+XmBWA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.85.1_1646835851635_0.7542671510325478"},"_hasShrinkwrap":false},"1.86.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4a6002f96c70b9ae85ad30d19e75207ed394cd46","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-4BwFxFN6SkBJM/NfNpV7eC90YwlG4VY1SglgbQEP5411+WeTaIFMIvlQUmq7GY8OhcbskI793JTGHiLFUKP/Mg==","shasum":"f22700991f8f283b65e9e4802c845860b84e1c69","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0.tgz","fileCount":910,"unpackedSize":2513033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKMYZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUNA/+KVRTopiSXGx9Ugj7/V8F4O3bCdwu1qoOOuzlLtBqAviSP8NK\r\nipCpkqWGqKsowIdeqUmSMMyI2TFpRLFFPLNiyZO2IXnmPZmqR09mOien6zD0\r\nr1jCKGZGhW6b5pdPUXZVjcAXDo+SJxwI3G2Jpsmah32LwkVqHBktO5UZgYRk\r\nJV+yz5sl3KkBMZoMBKdZf/qD5qV1nYPOOkqJ+FdlFwttXEBVRUNP4pg3nA7i\r\ndu2bGO2Y2ONhA3c0x1oUYAUDODd191WPp91gg8baH0WBm6Bodm1lVIRD7Uk5\r\n09XRwSKjMZsumMnGefviXgh+Mkw8RgFJo+8JyMpJg91LvIVlntrT0NbaiNvg\r\nvpaOCevvG1sFVOTWu219Zj4Zvyg/KJ66pJpVQZWQ99TBrEPlC3TVxAYycWvz\r\nxozMSYKnJ4hJ7zHiNZSVFhESPZffse0DacpOF1H2ReVaNF3s6UgIE8E2hqU+\r\nzdeOvxOI4uuXnkvP60+X5quJe0pZGqwi9ONTV9FCSH/JPqOTbtiDT4KBhvI6\r\nuIq6ZI45rqIoQ3dwxa+UZRKL5KiS9Z/8awcInCGM83WjDPVYnaZ3iLBfALDX\r\nLlfVmczW0If9DMuLgP7ejJ0bQxFHro7iHDNRHFuCMXUx+ZJC6BWSImZaP3ie\r\n9/LOlJ99IKcBG5A1cu2mG1cggWqqtSTgiLA=\r\n=cGLM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBySsSrZImx/CzA24OKG7YkVGogetLr85NYk/tbWl+SoAiANVP/sklMOoSWvVtTjU0TqOWNDMMVEwacAf/5D5V7nug=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0_1646839320986_0.13107585928262844"},"_hasShrinkwrap":false},"1.86.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"12741064b989e4bf56814ed5112f5c8d3d8d2f08","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-fS1lZpDTTp3m5njHDnCJ8U/0yTi0jOIbFqcwd5Um0fnbebbkszzHilGz7HtI/JCBcM6xQYc+Xw9Z98XR4Rx0BA==","shasum":"24ed16575d331f72c76d1b6d93d688811a02f86e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0.tgz","fileCount":916,"unpackedSize":2532251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKZRFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohWQ//Vozcmlsg0jTnbj8bEsmMzGPP2pt5x1BuHgt+JQBM4U1YKT5Z\r\nu+PVhL64XMP147GNEGRcMXkV4Uo5w7ZT7FW24xIQfouIDyc5byjxNXbcZNng\r\ncwYpxoj6Cuq3YVTkI/iiJLf7VIt6W7RdGLf1K3+lsSkEGM9SgdvW5PX5gItc\r\nIA2QtuvO2BNFsq2j+2CdpcuYG+5VAaMUMcAEQU4j7uusqBhpiydTH8c1imm8\r\n6RZw4Li1wDy0hQMHXCwT/KStlP97aCJ48XrsaESQDTzpR6Ev/MyyPgBManoe\r\nmAJQPbNG9H9enTJ1L9KoGPzJBCCF0VUePtONJLXvczkOn3tSuXMtI3i2tcxe\r\nosevbkIcna6ewhRhQIu7/J1DfwRk1JmL3q0g0KNa+UyJYmLiVlZck+1EGcZE\r\ng4kcfuS1G/kBQ9Q9NwR2oSUhSsj8mCACIxNc2JwXnDiBJBG+wJDf3C6i/O12\r\nBD3Z8ckGLh9ve0Gs51KnyBkAu4xeBvVkQWwrI5h9NnKHyylDwJxxgS6aOVKw\r\nSC6VW7Dcl9bO69834HfskXEqeT8CjByazGGCXLBjXs2Epbq76U48di1801W3\r\nFyOBq+LbNyaeSDCSBPhny4xyDoguATCmNERg6lX7YMVyXrKvKFB285Kng5jv\r\njirUmYI3Vzjy1/5+T/FZwpyjGUFLJP2b2xM=\r\n=I+fT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2Y04kBHD9x+/n3ALRLyt8P5TVLjhYH8X6tE0SpS54jAiEAkYAay9sQNZ99JUClTC5W+xpH3Eaeh8Uu3IvllGmU8OI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0_1646892100967_0.4427288385730037"},"_hasShrinkwrap":false},"1.86.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"34d167bd968e9305f849ec641a8fcf4efa02cf50","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-sKR7iSRNsWjsLFlWEGVMUmLPxs+S4nhprowJ8XIGTrgpBLD5tcsAe+Ul591ocVRG18Ni/4kJD9GhGmUdGkJdIw==","shasum":"07a19c5221a38e25a1daf2b156fc0ef423032819","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0.tgz","fileCount":916,"unpackedSize":2532251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKaacACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmodow/5AG58Si3sx0yL+qREFBL1eLP2FLTT8Inm9WXmAHb9SQqfUX19\r\nycTXDDrppm0CQ5ufr41XP7xBUxptvkwxIpaqNFC9nnjUN4zUeTDVblfdbwmd\r\n4QWWAaVuvP3iYpwj9C/ph/z5Q6dkxllxOOFZ6osqtRmipJA1TmpSNdbtnMoo\r\ncyh9jGUD85qk2XSOo3uPM/uojtbcBViIKLMcQGx/xptWjFsBuSm8bADJvhfE\r\neuMAbFmBWRWxqq2ZVE6ExddjfdHf6/iwcl9d4AyzbjS1wxlaaQCBkFScu0b9\r\nyBEf2WSCkhmL4t2hJiElpxlI1b32/gPekioUpEu4pWfJb2JRnG5FgKba+Gms\r\nzEOFE11d9hx5BlvGfa2nAM0EowkDaJIjJO7/2iYkA7u0oSttHREoHmdS81Bd\r\n484LOnsCbG3zE5kAbKnfU3fZJIfHQTOlsorEXLmOrAYRvKZ987on2lb2ESL1\r\nYsNrorXJ/VSOhiqQDT7M2UzGJiD2/MS7SqeVA4fTvCixhVPymEIjTNPLk1Wm\r\nF0C4qHuXW1/MbOI/1OWQd6ywGM/B+ndSShQjhJKvykVAJ7sHjFUWPh0SVWWa\r\nztsnEnXZbCxV9/9yVZwgqJwF55VWQ+E8QTiH6H0FDOOOZrsInqS77BNvASl/\r\n5ODEM/R22jANVB6BzNcDAyAf/xD11r1wJQA=\r\n=aZlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4Mk5BjLkBgt/PCqx7rKZURQtlBfnTFuZL0Rn9D8dwXQIgFfL6/eEJOD/vsRyhHp9DceNb368zBla0hLoLTwICMbM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0_1646896795885_0.8204259776949194"},"_hasShrinkwrap":false},"1.86.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"84b8a4a5f7197eb826837f8dd6fa8def4755b859","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-EFNus3fPBy+2O/rXgIQXv8naHJs6cilfumhT58KnnKMyevNyrzqN0ihqE1FJwp+Vj2RCC+6u+gweKyhoFYH9oA==","shasum":"3f843cc4fdf37dc55d900b15a65400881239e5ea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0.tgz","fileCount":910,"unpackedSize":2513033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKeuoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov5hAAmzPnzSor1NokSg2HJoqqBpKoG2wZosMfq2y1vNU6QdIvmFqz\r\ntzh5CJyHcRidMNYQbySBZglPbcZPkE54fS3c8yIkwi2RMfumh1dfQSkXCmR+\r\nQ/+sW7An6OveodZ1a3JZIuC6G1spginu3eubaR5ffJH4+1I4ospu2z4fQgRM\r\nTijgu9YlG/bjkG9ZxxL2uFUP9FYNLpt/sDGDXVhhoIyUXunVffxEJNPobuvo\r\nH9ZQXWg3V+jkCSo2x0BULcAq6ZAVP4uMSjecodgM/OtOp4TsGvzZVNhRdf7Y\r\nLzdnTm4YMg0CqUEsnE7CXb27U9xf58173AnunbdohJxn2385pnfm7QEDS50G\r\nKTh2imhyobdZXb23GpW2JXyR73H0SdvpH9UOGsYZOnNKRjExLClHU/VG1kFi\r\nv5gFoZIfNeG0xIO0/fi+gvmIisJ6hEk4GSEx1fNvFbrKfkqKjLp6u3tWtFi8\r\nb8VJO9l7dxmN24zd4Pgf+5xBPuT1inzDPnCsv0RsPa3kDkOcxSHytUwTWk9S\r\npwFq6LazY4JpfuSzDam2YfITx8aKoPQmS19whT5Ylvsmgkwpqsp0NdI0syXH\r\nEY+m5YiZdGmCABmRoIx3SSFMCKy7sst+eiztKnDryTMiG5FsyLkDPERTxBaF\r\n6dCo2gOIWS35N0k1e/n7okFd7D0evb1DytA=\r\n=pXlG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwZeiDI7MLAEPj7iynHj/gPLDhpJma0MBpO7VMfX+V4wIhANClV4nT65UsB9Mgak5ypvT1m8OxmKW0iAx/cHf7P0Ge"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0_1646914472674_0.4638097456743808"},"_hasShrinkwrap":false},"1.86.0-canary.1124.854d12b5fc85ac4892c69832dbf55b99e23a8266.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1124.854d12b5fc85ac4892c69832dbf55b99e23a8266.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"854d12b5fc85ac4892c69832dbf55b99e23a8266","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1124.854d12b5fc85ac4892c69832dbf55b99e23a8266.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-NXjeNfGhe36AfpotPOr9/lBnGgXfiwpT+mIhdKykSfyWw8QuBqug0EZ+n8v50B9HJHdTnbcg0cFhaBOTLcKbNw==","shasum":"19c52c1bc823c7fbd0da0ee15dceba7abe5388b0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1124.854d12b5fc85ac4892c69832dbf55b99e23a8266.0.tgz","fileCount":910,"unpackedSize":2513562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKfUKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmEw/9HbISVb8OLLnY72VsmO3Ytf0V6iyMLiPuxbe3b/BjZJTLejiY\r\n0Q4sdei8SKHcMQ51BW37e6CwyWPfmUQTlGXjO6WTmIId8gZzNZRrrOsNll41\r\nNW3MxCgMXd/CLRJD3TsRGiioRfd+mhhkW60k/BWnEqN6kl/coOv+59DGkPGY\r\n2+xu7FnzsjprsORxYNmVVNig0JztsKnO+tyCeH82Wg2WuJrGnjVUbVQD53yc\r\nyXtt0vqVOV0lk2AOIaRdOPvpOfGdpxxDsBSDoxToTahc3Eu3scW2a2rZTI0u\r\nrdU94XEXXavjr8QCd48NEIPzqnum7GtqxZHZdLZKfwYRbJJ6qUjMDsrRzqqX\r\nUYeGe/JWjpWiJWQXw339bOaQh4rIOMTjZXUHRod6wiJI2AiMZvCo5UZdiy2F\r\nIZbGLk8i5N8ODLRMRQHCADrK4SNt2UgbPlb5tTvJGuYRjQD1nYtSERf5iijM\r\nCeAXcxl8lVb1JOrLaU7KAU2CuUkQIrJzN6dhF7MBM0gZaM+0t4XKXfCUZqzQ\r\nHs9LRRs6emhHuwYxE5fQSe3vZVlGzfew/bIa4WCgMwB7rGhNogRjA9nFQecn\r\nu/4GRgIZttKta5rGL07aN5AJ8zpvHtYsWfrg9oiFU3dW4LutxNu/NC4nm/wJ\r\nko+FJAqubXrX7EeUcQDU+o0sRZ658NftUZI=\r\n=fsgQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj/4nfRiTu1VQ3T82cl1MZzAmla/iRMxdNIToo/NxJogIgFJ/Soyz3gBLAB9g7VAH3WdWLcg5F67ap53q0ETfoU2E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1124.854d12b5fc85ac4892c69832dbf55b99e23a8266.0_1646916873818_0.6417743857504352"},"_hasShrinkwrap":false},"1.86.0-canary.1124.2aba3dfdf84d64a7b2cdfe614dcd08d22f55dd96.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1124.2aba3dfdf84d64a7b2cdfe614dcd08d22f55dd96.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2aba3dfdf84d64a7b2cdfe614dcd08d22f55dd96","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1124.2aba3dfdf84d64a7b2cdfe614dcd08d22f55dd96.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-9EmHFZMBIlml8ucK2vBivkGeQSgIAWb84OLDK5S8fjGUKSxMfClWCjZLZUO1k8T6EaPBgluhudBGFMC6P1HjhQ==","shasum":"893d041dee2dab2b567a1e1dd325cc448bc14cbd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1124.2aba3dfdf84d64a7b2cdfe614dcd08d22f55dd96.0.tgz","fileCount":910,"unpackedSize":2513562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKfV4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtJA/+LHQoajCd1fVHHrCZruqogyPkvwzw4Oynox2AWMPkKPm70jv3\r\npMqYhYsgT78OX5//NOx5X9Zh9walDqHLnOdh3XTLLTwxrZ1opZPJz7Us2Rc8\r\nmi7nnA4Q3RONML9KH2FeHpiSOHfW+SspuTfvBEAQrrTvllfOyProdeeFhYO8\r\nkVcTXUUTsvhz+J96sM+rw6q8J4Dge80tpE9Dama9TNDMngeHG599T/9daznT\r\nq9WfL2RVB+784tTpS1VLEfRiBLfhwoBcoVCm7/vMg9O4/ozvutpstHQ2Mk1I\r\nkbBEXv1xFfzQlT/es14Fuxt+grlEfSk0IDfldP/6Z/yAFRcwcJTpRJSVLvI/\r\nLJbYadF0JgcAXjpM7BA9V86HezG/RBsx93WfB+S/bpuKamje0RwNfBLpTu52\r\nUzHtdW78X0Z/y4Xjso9hAjs3t4dSPj83460chCHNLx831eyOtAPPDMjq8TZP\r\nNzHuh6QDZtgFxyba8Ik5H0RG1a9g7G4JaYScJluiSQhs2gXhlXe+EBCp4/Rz\r\nPTEu88cneAIxBpwBxsUOLvg/sbA6QTwIhvfWiq3sYT+rdchGEhWWs44XxzYf\r\nn4h4ewjmdKePytQeVTMppS4bHPI/tCqe4oAK6OoRsQq0PSoDGLHB8awelLVO\r\n7mxFMDuiAjC2hTzAsA4iTFArhuAoGTyf4Dk=\r\n=GO2s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGOwbeA8jf1LcS3pc5V/tiQBMAep7YPBfz9lahu9nB+yAiAn/lbqi5Yda+4GvS7YxJCVRlcbKVLp2j94y3IuLiRjQw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1124.2aba3dfdf84d64a7b2cdfe614dcd08d22f55dd96.0_1646916984509_0.8599294759977332"},"_hasShrinkwrap":false},"1.86.0-canary.1133.f3d5fee6f4617af0114680a8c76bc953a41546c9.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1133.f3d5fee6f4617af0114680a8c76bc953a41546c9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f3d5fee6f4617af0114680a8c76bc953a41546c9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1133.f3d5fee6f4617af0114680a8c76bc953a41546c9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-OmBPLaydoaBA/KUnz1Eu9wHgQW+5nhpEftuiOvzc/oGehSMBw1LXRFr/sKqcUtwP9eAXC4ldep/HL4zwQRyqZA==","shasum":"df1c13865568f85798fe924a94baa69d1840eefe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1133.f3d5fee6f4617af0114680a8c76bc953a41546c9.0.tgz","fileCount":910,"unpackedSize":2513554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKfi0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+lQ/9GhoIwT1nNBU5QsiAl1O24w8XUkZRw/as5CQi1NXeyXod+bKF\r\nS6Jz0LqIJFc/MHhd9LkgnpE1y33wUHh8nHFn51YNqzde2seP/qnHr8rFulxH\r\nkK62rghIgTgd7SA3h5QDvszPZy+PONXsEgOKpk/ZMXNbo1qN3jktk+PzWdv+\r\noHlfFQFy4VqLQK92ayD/vj4xuNItX2Cvg2sTnxF8OaknWGaM1DFfW1fAjz2A\r\nGEo69h6sc0myx6XiQ7t/5pj8/L1gapUe7a0L6lj5d9AIUee4/RvJSFwpX3a4\r\nxda4PZQBd8m5zl14iOEGyAqIUj4n6YARpAAH3v3HZ4l6uiG7kP1bxFGP3OjG\r\nPIjQKTjm8aHBarsCLRdHmNEcY1RgfcipmoJcPZ0bXVNZ/V0q2iMxnYiXROrn\r\nGEpNmp5iUp9V9s/A4ZvJ7rdVxARoxyXt8kDG3Skzk3ZRNDh3o4d5JdQrvJIQ\r\niWBwOe0GmvNNfPejktWsuirkH8+2NfFVyNKZqplrK8gW1oa95wx84gUWmMX9\r\nQXI6C6YHKQ1hNqiT9kE16llm9njLvy2ld6YPQGCM+BObyZOdrGubp2kc96Ip\r\n4vwVBX0zjcR79yncRRoxItxR13Bpfx4/ZOZbwqGtHpCIWvYSc/Wzzsz3C/lX\r\nY7SeuyVf7AxgZ+eXhlp213kidh/vm9LJGgo=\r\n=9w0D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZbT+FQy53rRK/kCK7ayLt1GzC0pQTj9VTtODFjahSvQIhAOdrN+QdUMPuJaD6eBreTK4Feqd70Mf4YGVH2Znw9EE4"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1133.f3d5fee6f4617af0114680a8c76bc953a41546c9.0_1646917812077_0.768774765205104"},"_hasShrinkwrap":false},"1.86.0-canary.1127.018885559acba879252d818c5b454a5234a473fb.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1127.018885559acba879252d818c5b454a5234a473fb.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.52.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.70.0","@sberdevices/plasma-sb-utils":"0.51.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"018885559acba879252d818c5b454a5234a473fb","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1127.018885559acba879252d818c5b454a5234a473fb.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-NTCuFPJLlgkK0jHVSdYJQ1Pir+H/uNkUgbXyiZLU9AQQHzD6G20ttXvWwOauz9FvSK//1T4k8G8ilylRuZVsRw==","shasum":"d4145f0913306826a6e2971eca46c86b16576101","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1127.018885559acba879252d818c5b454a5234a473fb.0.tgz","fileCount":910,"unpackedSize":2512868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKgsoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqemg//ccBMFcuAEQnkBF2XekiXxrsK6o06Gb77dKD7LiZ2I9+zZT+p\r\n3uHnmOKXLQ0zCCTGwTHspPyIPIpPFLi/1eMaYYw+SPogmbaB6k7NuaWVipHR\r\nym6FOAxyzljM1biNmY7CwlsU8R/aVvpQnq7ya66SnFAG3EbqkhOPxKUxOtNC\r\nFCM4u3UqQ9I+WNYKRFjZl9rREgPk02MeNjjqbCqRB/xGkQnR8qmw7fKFjF8m\r\nC/Iuv0z3tHIN393KU33694P8UJVs2T4gAJs2zFKSkMiuPVR63zv/Ser1aHaV\r\n3Ge3GyLbyYZRgtCCmyX0y6/36mclP/nmecJZPpsgv4eZDDTJiIYKzQIIoOtI\r\nMUkNZQaGO+/T3q4YBIme+7FXXeCCCi12L+1xqLOyCWm/vvnOPjIi+BMvmYzP\r\ngMMkT51YjtyRQtbp9YfdDvBD+ckZCtXUxD//E43CUWh1NlidiTYxiivuYmf8\r\n+Z61idRSQ9loSeqMlEjJps+cKnNqFnJVZgFPdyfMyIrrjg8NzZRayIYV10Eo\r\nlAm2gVQilztfNDeT/iC2UWeh+veCVdZQG7Lpw2LOYwK6clZkBWd4LKMHrGGV\r\n+bvUBQID5y5fdKjwVIfKeah5MRWx+gaZ/Ywa+HUeMOUqeNR3U+6y82ekdBg7\r\n8A7ZiklA04D19XdRvx/z9hps+2XKTHFFWu0=\r\n=fEa+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCztNSE54yUYpXetQCJhy7hNl91m5kuL2sQD4rL4xoacQIhAObRd0o1x5MuQb3bb5UqxH0qs/18LGg/WhGBpZHiRT1W"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1127.018885559acba879252d818c5b454a5234a473fb.0_1646922536144_0.1223171027136547"},"_hasShrinkwrap":false},"1.86.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"122eea92c75fd4b40bef36764136f3bb2531f82b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-FN64Zg1LJHDLeu4iPMpv2394+gyO4JjqZkoKuzcJomgaapYmsub9sy75JKcvDD3ndW6kqdnoVYFMz9e+fu1EVg==","shasum":"9f8767945071fafde6f0737a5fd78b5f255070c4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0.tgz","fileCount":910,"unpackedSize":2513033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKnmyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLaw//YC0rprtj0vLDUcDs5BIqZPT+6JH2oZ/khVCle/2OSvHBRwtg\r\nr4ISlTgGdWGp2tbe9kOu+bx7zz/mq0SJLMDkDsAsL8hNr9TEq7884+OO5MAe\r\njmyO/En7SU6UiMzipIIXBsntdEk94x5/KYe3cwe9Cu5WDfUsZVfZ9Bd5vqH0\r\nm/czCdKcd5V1xy0xQC9nx+gVKzH4Jb3hvOW/3yrVDtMV61AaChuDzRYZwO36\r\nMgCxF1vkcWtfA1r3Z6ZAYCDVviyKSx7PKNodxCKuIrDZvJ/LIrcNXPoDFwoE\r\nMvhkgaITGEb6q/tPKjWXv3LG/sQuI3yoyk6NfFNnamKYw9H8tcbcsYZ91eXU\r\n3l0+Tfe6nyz1lfAfIvtbPCG+qVT8jDYQo3OZKAHmSg+A4UNcG3uoDWR8LE3N\r\nuQAGS8zCInzVEzJdm6E8Acf1C77mNzG38ApF/WpFI+/7awpuTNpIADFjOVTB\r\nWxBmKyCvTOEp4p7FB/r/lfX9vY4qwCOPWm/CFkJZHqCE1GzckmvX2viha5D8\r\nLlnTsiKAOzWBt71YpkO/hp5+sLc+ltfCFqjG1RaIPfEJ4rTH9nQUukRb48JX\r\nTQqQdMjp1Z9+k+f5VM1U7wfM+1daCqtg4uEgdCOEgucvAmABvtDE1cSXUzIC\r\nbX3WavIYir6lZrHZ/7DnKEDPZRnFFieWoJA=\r\n=PaOV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDt8ETdR60Z2Lx+vf81CNdR4E6yY6oi2bOEYI7RlWJvAiEArX8PAhPY+sgQ2w+H1C9kUJhSq75Hl6c5gEyAKgZJLZE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0_1646950834661_0.7985539832296975"},"_hasShrinkwrap":false},"1.86.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0","@sberdevices/plasma-sb-utils":"0.52.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3b6060025c3075de11921753a002408bf3fba21d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-uwFI6OdZCwSdE64kiUC1qbXCteXnI9qGw416vxfVO6PtzfFtKcLTYPeaK4Im+c70QbJ6dvmXdwiEHRs7aJFDAA==","shasum":"54b3cc96c78c63f1f1f834a485c3954328de1733","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0.tgz","fileCount":916,"unpackedSize":2532251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKxG4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi6g/8DPkpmRIleaOEgxSxEtXLsnwBjnJBXBDB4PZDl3t7SYk9yT+g\r\nwlHeoOKYrJ1BaKVLBJDBw6BlTxAjcKWaUK/KYf0PJL4lLgEUIff9hwN9KPaL\r\nHH50XeAPaqnhlz141uIIB0bKtV7J0uQYQR0eqmUox5nz5foBYhl6rwk8PO2g\r\n6qGNpoqjtOiQwynydSzO5hzkVBK3PQobonR/gvStAs5ADtmMICo/TFnENCcy\r\nQx2ZdgAda3R7vO1zQ5JNjMvXlOTHPRA1zYPL5dszjq19uX8Xc08KKfFnnzE1\r\n4cBhuTD3269YB+5uIuGwOrPwf8SO4MP/m6tZhxj5aLmgcrToKlutlOmo1Yo2\r\np+3Zz/JxFzBmrkG3KiBqZs4KQ8x+mmBCM8b1T/2iHgEj8pzzo35KJSQy6J8d\r\nq7NfZYPm6cBlKcu5eu3b4PmGqNcYyeUJn/GQqgGETtkvoXpl7z15NTx40YP+\r\npOsQwMlLYbdSzmCMOTAb7RApwiKYKFjrudZkjWtDUx/C+Qtm/N7v89hR+qk0\r\n5p9G+dM2jPsX6QCtnq+nXvveikKnHuU3M+vYu8HKABrnkmELM7ZDptiJTJhi\r\nB+JV034Zn/6giJmpWq5KzVubt8rlEJblm6nUOW28QbV7xp2BlDg5b6T7ijef\r\nQrndd/eeZZRTuvZlp3sYk+R8xScE06jHwKY=\r\n=D+I3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWgfTB0bu8jlomD/D9VqFi7ZMHrDKjhuARENpGtM5VWAIgOfFeS0fEt2eYKGrv9NPV0D1pUjGXKvVxkzQ/36dgLY4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0_1646989752298_0.7847893313044809"},"_hasShrinkwrap":false},"1.86.0":{"name":"@sberdevices/plasma-ui","version":"1.86.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b6e8d62fd583b72d4eccfcd9ebb043dce8e350a4","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-f+9FbZnyMX02V6+HsoCDZEizTV/5gYHAT5VH+irES/zWscTbznfAVZSC3boHMBbyBD1I61N7LrM1hy2EKY3xqA==","shasum":"a6a1c2b1fd3394581b93f14c940e424b3209a84e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.0.tgz","fileCount":916,"unpackedSize":2532360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKyPTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeIA//a0ymF6pKUF2tHrIZxE6wLcxlS64HYFQjdFJcki0ylLI8e+Bv\r\nC7b7dOZmbwCr2+/8X47ibOqygxoXTgm8zG46AjCf6E2/RhWeE1qE5GLXc6aq\r\nGGyFVPOQ/qWlDsM9UBYb6gHbQyBFF245n5BNdZ49HLn64Ky2glf0+Sj40o5p\r\n6jVF/vbtyqCfFrPB5FkzGt4pL/zJwnBGUCal4xYd8ybgda5HKLmyEs5RjcWG\r\n/2P+sA4P8PNvceOtgAQDaEOZEhtgNovhXnn8vyL5YgvRLht4eNMdpzqr8ZsU\r\nYZKDqW1CIHQM1vfZBoQYjgR5bLbZPDrVoSifL4tkCF1+rDuy+iybN7XUQrbF\r\nFP0aXwv7YqkAH+CszRZIuuXNAxS+ieAusWPABPqsUE1dqmi3umWeY146F8YK\r\nRvEmWrG3bvH3bp0tqhR5Kt6agOnSRr2Q60KFVwk56YGwVT75wzHYBIa7X6sr\r\nl1xckN5vobjVqh7MxQ1r7SJe3TJSwcQ1Y6mmoExV2SnlkChxl0ErRVtLJV8L\r\nHhAMkJTT9t6B89wnu7/SWv/0DDKDYuLaf9jYsMQr4Fl/C0Z+QGU80Ioub+M0\r\newkbwmYpK+zegAHo2okXW5b99RD4xJnLDo8btm2Go0IaxQyytY2q3tII1uKL\r\nGjFVMdfEe8jvooWOVqoc9eOE5qq676EOaeU=\r\n=v2p7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7w5cCqSGW+5WHx6/TOul356jf5mVse60c8WcqW928VQIhAOpaIlsY4byiTjbVww2tbc+esnnYE1/Lw2JLsbQxPIDf"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.0_1646994387169_0.31809775027466647"},"_hasShrinkwrap":false},"1.87.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0":{"name":"@sberdevices/plasma-ui","version":"1.87.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6db57d98ca2b5c20c20c35a1955b74436a12890e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.87.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-vLHbvu55XJJRgYFhACTmO+dJ8nHx7OFWtvPNkjUAlbUwVgcmegQTq8rS24afSwoRl+4FQT6x62Qh5TLSiCrXsQ==","shasum":"1e04805a0f454eb99307cb4985f65b10b440b78f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.87.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0.tgz","fileCount":916,"unpackedSize":2532580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKzK5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6Ng//Tm12i5rld7MEbWSm6dymxy8W6NJaq72JCgNpjT/xDhn9/0j6\r\nFF8KOPkc4StdwSSL0mpecKqMm/TI/JOkxwk7s67pDu5O4DyJle0MwzMzLtHt\r\n0QoECHPHY8Rkylwfg1ZkwchVAV8Rfcz8kBjupZKIkdbbmZmjRmzWPa+UGYSq\r\n9AlJk6ozzowLvI4NVF9OyA5XxF/BGYJ29Dm7iAvleKEw8HkUp7L4BJsi+Tv0\r\nqJY0f534Z7+2jL+eyOEcQ0hrI32sqGndOIF7S50qACVgqu0KANGHfpzaXdFW\r\nRlc3FQ54dNtk2sPjwL3C6n6eWBxsdwwXfg74H8oGLNREIruG4blYU63c55Yo\r\ntIZNfXS9yeG/FnEEmT0SfSjQh6dGk+qIhzjKvxcMQ1iyxe6reXjRkJ4nBV4e\r\nrw5UfCYC+YniZmE9UzEA295TYizlNf8q5om646TtcvrBIEMNOGX4gAdMTgkD\r\nmL1PUfgg9UAOy+biFxKd4b2oRMUBUxEAAGtzHzLzKOiw39yNYJpVoIzKUmZe\r\ntl2fk4nL4gcI1/biYRZg8eKF8I6xxn6+80smuxFAFN1plMu+HPMyzOjdVVo6\r\nP/RFG0pQaM7QWgPu7xCVIy/oXct8AiJ8xpNI6nxzroydzl7dly/ZVvi/U4ug\r\n0y6edosHlm3PM7lTFSx/GfdHPyQO4Rynv/o=\r\n=UX3n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEzJozgeBlWUAy41PSkUketKVi5RWzkk4nbk4g2rfJwAiEAtfH4ej89jRgeJkJPUc3vzkZE7OneSxv/qXzN4ITZIUc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.87.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0_1646998201667_0.29121265702460253"},"_hasShrinkwrap":false},"1.87.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0":{"name":"@sberdevices/plasma-ui","version":"1.87.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e49e7f07961652c21d9920df8c22edc9d18f5a9c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.87.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-FAk3oDmYAP3fnXjo9jGLJA/nK73pipvIppzjClBK9/0A5Hma7CIt7ch30VudlDJfFuzr1cc0YdVg8p0VL+bJTg==","shasum":"16d26c90b590b93ef6c9abb014fd68242ba0a061","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.87.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0.tgz","fileCount":916,"unpackedSize":2532580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLvGcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMQA/9FGVL7ZF0HQwkYl01UCULuYhO1TLOzWPOP0oVgE4cJhwJWhav\r\nusoA7l9sy3uwEJmP/qsi9Em/FkJKKTQOLyOk3fQfCnIZZNsmuR5L4ZRJnuir\r\npCZtsHqhK5rGh70995LTCFXKAt9BsTni1Hc4a1m+eQ2uTxyIJ8IgRcqAKc17\r\n6AFPezQ34qJnQru+B/xlm45jTCrPkJ1V4/MVtivPB6era0lfi9FmxDCUNlve\r\n9tPHaWEnQpTvcRvoP986ACp1CDx4pL7nx77a+R9jh6ggGx6N7cKag+OozWcz\r\nj5ssMw35SOfKYPoG7tSLTVjlFSGfEgVyYr9RA9z/iaPXK/I7SV7C/sznAVNR\r\n+GhQ3dWFrXmsjxTT4BcSRcps49NnHEvUplgHCCw6C/pGDfsHdHw6U2sb7BYL\r\nFdC5jcKdbF1DkzDpYLEllcCzDhj9ibqb+k+KcN5IE0jghw45OWaA9nxgwZCH\r\nJ/4oo8fIqg4zBQhQMQS7PwzXjqQrKDf7W1ul9xEkOyc/M/Zmu/4ERZzLiDfS\r\nKy1awH61dBJcp+Xt/HwMqslJ8nWJsguAuS4fLFzdC9UIxECYOwPFhppzAIw1\r\nd8tNmOhYCsxejvZthwDqLteH8fbRTuPgci62M1laSu6Z9q/PMg0cUQjhH/Fo\r\n/K6U7vWNXB3/7uTaKSapR28ZS1plV09vhfM=\r\n=g513\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6va4R1p2+gK4W9HHLKofF9yJWEXF4FgaISFIHUyCp4AiBAJhvNPOhE9vTdHtm6NFFMrcUlNmLNRdDA534zoIbcpQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.87.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0_1647243676457_0.4504511840602248"},"_hasShrinkwrap":false},"1.87.0-canary.1127.7f1b1629f8754093ca8f7dbd9181d40b69cfc097.0":{"name":"@sberdevices/plasma-ui","version":"1.87.0-canary.1127.7f1b1629f8754093ca8f7dbd9181d40b69cfc097.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7f1b1629f8754093ca8f7dbd9181d40b69cfc097","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.87.0-canary.1127.7f1b1629f8754093ca8f7dbd9181d40b69cfc097.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-luG9zD0ZSpe4TMJb1H42pso4ivME+bBqYwR1egtDfZ2lZBkBcOesWMAWUhzB1ZbLf9Hu56YOXj+mo9hrqEcOFA==","shasum":"ec580aa3edd69f711cf0dcd9a663825588e3b92e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.87.0-canary.1127.7f1b1629f8754093ca8f7dbd9181d40b69cfc097.0.tgz","fileCount":916,"unpackedSize":2532415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMIDlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphnhAAnyidpOHSxiik7WJEOgUoEEGrxbq7zEBeqFeaAPfCaloOeeOh\r\n32RsEZ88uSd5Drq1L/CNNXhkrTEw3ZhBUUltOcwWXHfNdbH9ceykVvV9kPj+\r\n1mb/JienmX7t8iK7RRLVhP1VscG6jyZb5Y2oMIlTQLpazKoan+XvcNWn6rGz\r\nRvq/zkm9TUJDQYYecBcmlNyYVKYtmFZMFQpfJTFBXncb6aYpGfw9aL52/0p1\r\nzvjj9/b0MfPnVRgtwu/hJYadX/ezctjhoMG5bWlggEkUMu3Si6wfiGzNhi5C\r\nlzu42p6KnJNRAYtH3E9N1Mx9vzrmwl1AsLGtHMGnk4oXbpcuAJTamHaBh537\r\nNK/i+FvpqfCNi3r0tsPlCSSqPVupTPY0h4a2ULr6dTUskhdA97DOVAwkaJ4J\r\nfjqlXm7c3d1Yzi/t57ELo9T92rEZI8sWVfcz5nJ6NDCihON91fvaV7IrCxMs\r\nBAtDydqnJioygiIZZgUi032uUpqug9Tz6k4cyYmGu8C1SDorXsVri4ndIWj+\r\nTtWXNX5d7Bh6QjmmzdZC9rKBZDhqjOMH1DpS4ZdKdFKNvKnC0HQ4q/uamuMN\r\nX6GYuk8yfgn1HSZAkLH1LZAVw+m9gYKX0jPHH7WchoDGHSoOuanl8M++mkbS\r\nJZ3ia7avwhN9Y69w1MM/VYanSHgYHLmTVXc=\r\n=Pnzw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQoIIu5ZTtd4culu7WP5imYCxPjVwh0rzCCkrYktPOrAiAMlglOl9iL1luJT2W2ftaCYjVka5EznO3XNmbHzLNCKg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.87.0-canary.1127.7f1b1629f8754093ca8f7dbd9181d40b69cfc097.0_1647345892953_0.7594926996018987"},"_hasShrinkwrap":false},"1.87.0-canary.1146.96a0bf9b7f48079e50c44a28447205c0200f4af9.0":{"name":"@sberdevices/plasma-ui","version":"1.87.0-canary.1146.96a0bf9b7f48079e50c44a28447205c0200f4af9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"96a0bf9b7f48079e50c44a28447205c0200f4af9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.87.0-canary.1146.96a0bf9b7f48079e50c44a28447205c0200f4af9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-9092qQ1xO6u7YgSGahGXvSPs2sTmeUnnFB+8Dt7wgfYrEoskZ97OocggyKGFJ2ugP3FQT+YbvcARvxHPgzLzZQ==","shasum":"6a608874e409d8b3836ea4e2143474053681b90a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.87.0-canary.1146.96a0bf9b7f48079e50c44a28447205c0200f4af9.0.tgz","fileCount":916,"unpackedSize":2532415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMJCnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRqQ/+Mn31cx2cKqAL7oB+te3aWck+TMs2UyiIpQZsb2h0uvrDnMNy\r\n4PKGZsbrCU7gL9J1VJFfMJmFAA3X/aoBiwXppkWXaEjP2V0YvI0KD8tdLnuI\r\nRu75QZ0tHvaVDidPqUvxdp7tYihgmkiuadV3QwQJ3s8k2KEf4fvCFU0yM+UX\r\npaVgYVBCdqPX6wOSLIH/otxYsXhTf9JWwcjk4zyZ+QubJU8A2lq1sDzja6GK\r\nGldJwKkd4YlEjS8fIwDeWzzZMkr54LivecP3wBfLJI9PCqmrFMRHW1okn01b\r\nhyL6kqdth9Oa9WWIdxkPb5PdtuJASiCSqLLuJXgLi9pW3EmZsqQCm8ir4+LB\r\nwnFjbwu397kGikjDruAF0smJ8BC3739zcG/radL7vMsUpDpivWnk6h6q3V5z\r\nhMfJyixTYnllezlvBj8eMAmOtf8xJQvIjLIU//z5KusCeoblBgdAsXFXUjbW\r\ndEIn8qUtJbcQ0HJPdzaTVwM8nSW+Kn/N89oAndFOMTv0SPiJDp0yRb905+3j\r\nOPfGEVH4otZ6Mps6F1ojwg/1DUnOFMyW+1RY6W9+JXV9wRGBey48kRPy9reC\r\nYIZO1yyBMnpp1ElGwC8XWFbpZpf5evOStx3zaGCRV3nkJzymWIsOpB9rCGoB\r\njKIQNECio/If7LV67qjbKDNHomZzok58Mcc=\r\n=BlZN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAleflVOD7V9OC410FZtGQ1Bn1u1/jgUirjYYH2UDVFyAiEA58a4pXOQ7QngLOXw6wpbBeBOpqlryb8aMpU+Ym9Wn1w="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.87.0-canary.1146.96a0bf9b7f48079e50c44a28447205c0200f4af9.0_1647349927470_0.6362246608773963"},"_hasShrinkwrap":false},"1.86.1-canary.1122.f11bd5839f6bfc24c33710a5d7fee5d9b406c19d.0":{"name":"@sberdevices/plasma-ui","version":"1.86.1-canary.1122.f11bd5839f6bfc24c33710a5d7fee5d9b406c19d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f11bd5839f6bfc24c33710a5d7fee5d9b406c19d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.86.1-canary.1122.f11bd5839f6bfc24c33710a5d7fee5d9b406c19d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-cgpjKKu5bBUpzAQIYlp1cw22TM7UpirNp7TmvwJvvwEr/a1btNoK5qtJacnoyX+yTD1Qfx3Morm/MqbZZrplGg==","shasum":"c30149af7675fb584d3e75553f2919f99fdeef6e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.86.1-canary.1122.f11bd5839f6bfc24c33710a5d7fee5d9b406c19d.0.tgz","fileCount":916,"unpackedSize":2532415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMKB7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqobg//b6aBGpaO3Jfar2JLu7QO6uOo/ZlHlZ80RDH3t7ov7V4L85zx\r\nE7lsovGQaaTDzcMDxGurlZll6zwO8/Ylf/rPnynjcMkOpH+JxWbw/zJg2JWt\r\nV6SauaXgTwn7kNPD57Xw99FQuV7sDs9/fVzIptkMQOgwIICzvPeTf+dgCJPK\r\ncgvYkBz2UrPLO5Q4p3ZM58ox41kco481yv95oJX3lYvqgKjnbgiUOOGH/Fiy\r\nKJPmq7yu0sA6agFvXVGN3YvbXQTCMQv0s4UTcKhSlGwxuTta2hXXs9mpLEd9\r\nPJoHPdxSjeIfFnluHR/GkdGBKkABjsIZqjI5UAfnWr2S8DORyC9KqExMy2VC\r\nJYKJpF1mvJYG7sbMNoZvVwA+zQpBSF3h4FxzrcQ9DvblXsnYiqUJiiLboXiE\r\nmC+6ToQP8Y3fDBVgv7ZZaQcz2C39SYBb3WGdDzUc9RqJULRN6puXKTLSe+V0\r\nDuJNZwz6bh+1Ldb3RCJ0yDaNiERl2ckxt7gfwszPd5LCbyxBRphgbzNSkBZE\r\nISGJSivMK/NV/VBaT/3zpxDLudttoFqcKEPBxyOJEkbT6zgiG8EyedBCw7vv\r\nKBZc76MeYVLKWQ7ikBJeLmKGiHVG8vOElRrXlRJjRuAWAOjx0NAMExr9twV7\r\nP9ZIfXiRD40dFP0LKymaaweemWQZcVM76TM=\r\n=7Gov\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfCgrbwfxgoYxycT+6FtDNcyvTvE+k9V7obn7Or1XZSgIgS7Gv553gYpjjFkvDOcY0zF1yf28pE5SAJb0eHXcxVZU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.86.1-canary.1122.f11bd5839f6bfc24c33710a5d7fee5d9b406c19d.0_1647353978937_0.79777006027584"},"_hasShrinkwrap":false},"1.87.0":{"name":"@sberdevices/plasma-ui","version":"1.87.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8e966f54c84012716ad5ca18f4f28eacd8c078b4","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.87.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-7Jf6lxKIypxcvew6GoKw6XAbmZm8H//YAEggsavaqj7VNklMOvSaGSirGy8j+RS8ELgkVCQyyMTOnBth60Wcrw==","shasum":"5a2c7099a5419b75cff1a9d6cc10db7e44669b1a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.87.0.tgz","fileCount":916,"unpackedSize":2532626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMKrQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpuww/8D53A0DsGBL941hZ4j425CR0jxY2EqVS4nV3d/hMGdpYT72kR\r\nvi98eUjXOZaOBMDCz3w1yMHCvb2QwxvOdPGCr6VuH6RTCkcqDRVqnHQ1hQCz\r\ngvDDQVOxtv+CEB8aGV1gcMjhSBVnTi+J5D8iZ36/MihTYIRdjj+bvJXeTkjA\r\nVzLR2Hfe1oKw9fZAXPdvv8TpFRD/3H9AsKnHaHNH8zfMnnZv0tvjdMjx7FMu\r\n9mhol8Tjc/tmOdOKv9/boyiqaeWdWE2enYUefxb/aJwJ++YfsoqnTRotNmdC\r\nCNz4aeUvTqg+CUDPc0KFcPifTenkLL4JoeH1jZVZRr/BDeues/E4LIWmN9HW\r\n8uIbD5JkC2SEETewnn2sBF1Cd4BXy/2xGVylpDiR7HC1LyerBq2Eq+r85Phy\r\nIeGxrNIgK87MfQK+OverlHA+SXnHUBQXFDOlhOTlIL/pSguirgwcL1N0+91Z\r\nn9IQPmSAp9AkcrWhyG2xrjOKA8+zoDIb14QCHA4ku+yArnoZG/7DS/+RhqWU\r\nHevj1DfKFezkWvwlJqbI7nN9F37hMCGnozZT2guCQLs9USPHy6zfQNbFoGDt\r\nOEyWMyaD4vkn/hvUKDkZBzZ47jT2kwXoNmq9vfQOo4EuPYYVnvl9/ORn9U2o\r\nfOENvsRKP6ujGQv4hEq3nk+bq/1E5sqvch8=\r\n=NS0N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtuqZKpKkMn2FVF+JD5ADKHrnbMsHbJs6jFwZS4Y4NGwIgZ5VsnTe+JPAVFaxWytUX54pIeLA3oZ99OxE36Tioi0M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.87.0_1647356624126_0.4556952424469798"},"_hasShrinkwrap":false},"1.88.0-canary.1144.e3fbe226303984c1f29e087a961c98b3428a8fc4.0":{"name":"@sberdevices/plasma-ui","version":"1.88.0-canary.1144.e3fbe226303984c1f29e087a961c98b3428a8fc4.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e3fbe226303984c1f29e087a961c98b3428a8fc4","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.88.0-canary.1144.e3fbe226303984c1f29e087a961c98b3428a8fc4.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-e+ihmyRt4KYIG2s67p2442oEOh60Qu4yafqYh3kci250W8VhjtwJjgZYiRTbaMPT8zFc8Egkte03C6vuOBJ78Q==","shasum":"6ae054ebf86bcbb6216e2d5cf1261877d4d92201","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.88.0-canary.1144.e3fbe226303984c1f29e087a961c98b3428a8fc4.0.tgz","fileCount":934,"unpackedSize":2598296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMbIBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgVQ/6Akxh6dn1iW+L0KJQtTS5xDNtf31E0+/yO31aR++NeNFpAhQz\r\nIJ4lVHBhcRAjfsswGlpfhblMseYz4RODu3JDEFmFh4Nyiu7m8Ka/MZW9zxxD\r\ndiNbDUZ+pLRO74oFkmNYE8eTjQ06/347dkG8mCgmVaPgGX44grmvfKMnd3Wa\r\n1UcGnnFw0xLkB7f2jKbYSsKZkxZPv3ixZR/TktmKPMke5oUadiLcks8rarGz\r\n4yMmqDV0aXMkxDa/+KYovPna/IhdTUrcHm94ikgH/QWCG4rV2jDRVsLjUxXO\r\ngrzPR/mlYQ8kZFnS/B5kO/uHeM5KAby75u0SLAag3MCa76NY5NUO4JdJ0tJS\r\nTzXBnIBfG82Oud5tHjAH70xLaRm+wnjeYmom6ieY2I/1+kxQ5jn/5lrNekg/\r\nHNzZxfIqm+30xo0mkhPudssf22kKGW5gvGs0PBUk+RIYlFsSa+dbSs6QhFwP\r\nnyyvaAp+9/L8ZtflJbKnE/y8jk/f9QJlrXp/H4+JLDffzKl2Dct+M2LabOA5\r\nN94Ou73xVZJxIRWv0Yb4yNzN8GxYpL4gs0JXETWoss6UUDob33gzeljZFySt\r\nJ0HqFF18K8P874shCetES0xsnketjQg1/KniZZ12a1MWP6Z0z0KvJoOtG+b8\r\nkwqBk7uZGv7fktcoqWRofYvTNsGlzwYGPSw=\r\n=P8M9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0w3b4KJbjvzkgr2A/V+d6PNkyoOIcEXhYQ46hkLt2QAiAP4u1WIU0SyZlEwqGDLxw127kQBtnBYynMS4RJG9vLXQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.88.0-canary.1144.e3fbe226303984c1f29e087a961c98b3428a8fc4.0_1647424001529_0.38107569995666934"},"_hasShrinkwrap":false},"1.88.0-canary.1124.006a44ea79b233f8d5ed0a2166029efc84ffb9c7.0":{"name":"@sberdevices/plasma-ui","version":"1.88.0-canary.1124.006a44ea79b233f8d5ed0a2166029efc84ffb9c7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"006a44ea79b233f8d5ed0a2166029efc84ffb9c7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.88.0-canary.1124.006a44ea79b233f8d5ed0a2166029efc84ffb9c7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-zlxPUkNddl5In+NZW6huagLeGLiPd3rYgQWH/1JMxONTThlUcvUPNuPCcm8tnYGJOU7zpreiZYn038FA2pmBwQ==","shasum":"fd26af10e3fd971a4200093a9255c315506fac5a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.88.0-canary.1124.006a44ea79b233f8d5ed0a2166029efc84ffb9c7.0.tgz","fileCount":916,"unpackedSize":2533375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMbNIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG8g//Y3/0lxQsuH2O0OPgFCVpHibRZUIkl44VQm4PhRRCqSFcqBtN\r\nzHk08Qau6LD6lUUODMDV+Dnmp/Vgs5QjRuRw/sv4rgQtM0cB2kxEInpFipEP\r\nMWu0Edbk22dXSUDQndUv4Wc7VC0ybwRO0wFQQP/gt5ajGiuu/OUZTi4ZUZMt\r\nzmsRUJD+5JpNjB9PaGyjNGkaxsV4u2cmQqPCKhfqsOlz2QZ30FdgsL0Wp2Cb\r\n27McHDMn+CMWkXL0jFfKdeNq+Z2fzf99yUKd8Jc3DVo/Cx+MezQcnQFh++ks\r\njepg0JgzGBtA9JguLXxSgY0xTxfG71k+Osz6TbGLg/sac0+T2XxIbSJNJ4OO\r\nTwVjS04zeSJnRKpyd9a6gYwuGf1maPZooPrgbPYtBH6hgu0nnAfpZoI0bBqJ\r\ncwWbqqu5FngBSuOAcHis+UL+xp2MTahwJtdse3xyEEcIj+aeOwhm7677Zwz8\r\n80fN6LwPa0Fu/Bwt36zVEA1HYDF3YIZz1d0WMVtGTkivsRq6t3FMa1mPZq3a\r\nQSatVybn5PvHP1pchD/Cngx0MB3OHoPo2rL6o8N3NLk8Nlcd7T7lgXit4pT6\r\nRXf2k4al4zDig0GBkvQFjY4rJk0qePNMKJx75donm7Jemsj4iQlZPGaca2rd\r\nEToi4fcVBZUGhXV1N/KHMVQ6BOn+KI56VYM=\r\n=FnDC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG67aM/98reaXAUE5jPEhQNg72P1GxfEYRBcynor1/ugIhAP/IRiWqHN7lGZcWGl8MgQCTWa+YDnwYwphSzrYAlBHN"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.88.0-canary.1124.006a44ea79b233f8d5ed0a2166029efc84ffb9c7.0_1647424328677_0.002443936341260722"},"_hasShrinkwrap":false},"1.88.0":{"name":"@sberdevices/plasma-ui","version":"1.88.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1af8bcb0d730d7ed52517cf90c5ca4ad6a4de5b2","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.88.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-YSQukGdnSGq0jv9erJMgPDah+JXkLgg6P0hHY6dA5mca1lDmJbbuFC0AM5CXId/ZbtpEudqzB68NuQ1xqGCefA==","shasum":"43466b3ab848c9be396c97733d679ba3d178b109","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.88.0.tgz","fileCount":916,"unpackedSize":2533776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMb/RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOOA//aEm/AbihhswQxlArmXM4bdsykiVPpLulGCGo9RDZMDmK7OZw\r\ncdgJek1hynBvHKtilmL+2QQl5rXqbLg2EH2ITqnFfl5/0V+7ytCfhum0Ztdm\r\niZx8tCMrm2CjN7/4LvaLbTqWpKndvHjJuOb45UMh0eQk47Sc1Yw8mBqSHdAB\r\n7oy0KK3jWmpsGMi478CUMggE9VU4PovHsUcajeKxGW8n0Hk7JeF3lpfYO3S4\r\nlrZVErABVSbZuVUoHN1S5pKgAGm4HILKPU6PMeXI9aFMzA7H61f7m1aAsEYq\r\nCT4SYlqxEMEjShmJOkAOfOHIp0NCSdlV7mz+p9bTkguMak7hT3KvY7sDagKN\r\nwPEQz56wMFmFOpaVWsyDMoIbyZY00T9kqT6VgXYNNgTAgtAKJ+6l6e5ZFbn1\r\n+bEPDoTwGAIkhpn05KUih/D4rEhKKQSxN5uMXzTPTBSiyyLq1rPJ6ecPNCHH\r\nENkg0irNAax/hiqCiZSbxx4FfQyLkHuGAWO8plcFKRcQQs4mUBRxR6exkGjZ\r\nkqq6VkKT7qh9xnNt+0U/eSZM7HLcKh80olUJ1r6Kw3DpCOq+wmZnGnnggWHN\r\nF1E5UDHbU2M1MYrwNgz1JI4Vz4ZG7Ui6VSMHI0yx7zmsJlwhsr/p8koIhiAh\r\nMGaL1+d/ui+t/lwQyJj+dgnBF3OXKicaQkU=\r\n=3ESc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrNQk/RNfC3j9CZE5pdMg4g0HZWNG9zMNF5CG1WT9p0gIhAPauClEB16WDZtfy4esMvrVz28lJX9NI5pj1bktZOQ+e"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.88.0_1647427536814_0.9824520056101456"},"_hasShrinkwrap":false},"1.88.0-canary.1146.16b21bd1a0fa3043151e5a1edb620644c6ce463a.0":{"name":"@sberdevices/plasma-ui","version":"1.88.0-canary.1146.16b21bd1a0fa3043151e5a1edb620644c6ce463a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"16b21bd1a0fa3043151e5a1edb620644c6ce463a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.88.0-canary.1146.16b21bd1a0fa3043151e5a1edb620644c6ce463a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-jmNipM6b0EVJND/igrOUHZa1jHEWI8sDlrbr1ehsbwTJyBdt1vLuC9C00/xEbFlyE+odF36oIXqrTs7rq3ClYw==","shasum":"2ee9d25121bb87ef0d40d12ac5efa3cd90cf9c54","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.88.0-canary.1146.16b21bd1a0fa3043151e5a1edb620644c6ce463a.0.tgz","fileCount":916,"unpackedSize":2533375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMcAQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY3Q//dGHnq3oWfuwXLfhP6pSYJ+FEGYLjY8uOmtOUrsJow289PHQR\r\nbmZZXzFmwwZZAyyrzSweqk2mOeZGSRDFddwVtn2Ex5CTDfkYKU0fhxDo1aeU\r\nVEe1/PPdq5P27YhXis4kCgFIQiajZsrPTOYSnHzdXLbmPK100RGKX0aQDb8D\r\n3PzChl5oUtuaZ53qKKU0f5UYG2pfce2wPsORf+jONrhIs1S1Q0aKT/k8L4yM\r\nyi1pnK4tKO4DKvvg9I5yoCgY+6jlplTQ/xyLp3KRwgZXeQC/SgrJAyiQHk59\r\nleY/atO1wP4ie69fEZB8+KOaEh88BqbYbvQ6evXtBFMK9B2OTZvelyf2Oxoh\r\nzOSAn0aPFlm8QWjQNBHpI+EOxaPW3CIkj60CgD1x8Ye492dZrlPmS2PFKMdy\r\n75OMnJfP3EPUGNwdhW0nK930xEb6m1qDD2pJkmpM7vB8p03R03W4xzee6LLU\r\nLI/cY6rC8PIvFhSQPiSGq93huMKfBxQ3aXSFag+cyXULGOo8xqQCUgB+bu/p\r\nvC9aPSXx+iihFcucQJasa63Jf6/wHvYzldeOywDgXpI6iZn1NVYc4r8K3O4o\r\nvDtot5yjQnxFsV5wshzXYvAOX/+7AujkIdd78RsdBzsHWFp9U3m45IrjdnvL\r\n3w0DCfGkjdyjqZWSxuNNbZGcs8Y5NSPaE7c=\r\n=hujv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf1NNCL3peGZ4hhWSYncAo9+kZZ8PGpY0mQKr7dgAgjQIgfPgl60uaPc9pTg8mxVcjg0uWzdxRBNyrPv2XU/pVqQY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.88.0-canary.1146.16b21bd1a0fa3043151e5a1edb620644c6ce463a.0_1647427600387_0.828505209069925"},"_hasShrinkwrap":false},"1.89.0-canary.1133.f3fc4a99469ffee4fd6479c8bde8eb0c216b79ea.0":{"name":"@sberdevices/plasma-ui","version":"1.89.0-canary.1133.f3fc4a99469ffee4fd6479c8bde8eb0c216b79ea.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f3fc4a99469ffee4fd6479c8bde8eb0c216b79ea","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.89.0-canary.1133.f3fc4a99469ffee4fd6479c8bde8eb0c216b79ea.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-APj8dcxpMDK6UAUNxxANhaFu9VKRqcsdXAPOR1TryYm8m/t3S9UhbAvvAe1ZWQYkiX2u2Au8aZkxWDpEGs+EFA==","shasum":"26c088196103cc279e3e7570d3dacf90b859ed3e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.89.0-canary.1133.f3fc4a99469ffee4fd6479c8bde8eb0c216b79ea.0.tgz","fileCount":916,"unpackedSize":2534517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMc5VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmquqw/9HpF35zd3dTZ3QrjNtx6ZkolrUdmbNGguoijXvqZdEYm3qHZL\r\nkg+IbQR0ejMqZifaV7MsAhehddtRglgZd2IJXYLKBpy7cWo6+qdso3fSgWjk\r\nq6FVXQufEVfUAOIXRDRps+JVRTx3uTBnlGTSOci4sXYvoDuLQafhQ64P5/Jq\r\n7+sFwxcDGzFNt292bEJHq9O5ip6kdY+fx/jsaXI4ptiJwEClU93W/holfBVG\r\nt6pUw9HSJpaEVCNUWoBEEVwj8hKKBqHUTdK+Se1dW9+Emfw2fOa/xJdK8PSj\r\n+78J2RtK5EUjNyYqBtl9VwcIGjj56U6yy6Zl758eIOeZl7WjII8mrHpEWC97\r\nR3wWPUT4zScskK4MBa6DEScGKmVmeycQ4TRdsoq2U5tSqln/QxyEi25QZ1s9\r\n9SlG0DoqqQLlmPUdcUCvVGs3Alroiv/gjlvv2i7uTvagO31AVW47w2HJvT2p\r\nWUXc23uQu2mneG8cGnbjpEC2CbCLh3BgNVwyJDEX/rDECQUw27nIoJQUph5i\r\no70LNf+rOYuT75H/9bqc7ScGmezDrNRHzfqPT9JSGrWJjpK5IH813Bsk6+Rk\r\ne7vQVhppI1ZEBn/z9xTlHmWEsULDFyPDyg+zNskhZRda8m7GQzNyc5iI0M6A\r\nX20Qm2/BlgBG6cVrdVFXp7nP6bHN1eki0nY=\r\n=y6SL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkSW4EQ3W6vLIIfIy7+s1UAkUwg+OazyDv4WYAqN60dwIhALZTuqY4BUY8W07mTBWmDkT4lzPvEMUMrA5P9+AXc6Yj"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.89.0-canary.1133.f3fc4a99469ffee4fd6479c8bde8eb0c216b79ea.0_1647431253383_0.0027179910833470267"},"_hasShrinkwrap":false},"1.89.0-canary.1144.e9e536ae6d62c10f31eafe2c5ed4a9837dd20317.0":{"name":"@sberdevices/plasma-ui","version":"1.89.0-canary.1144.e9e536ae6d62c10f31eafe2c5ed4a9837dd20317.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9e536ae6d62c10f31eafe2c5ed4a9837dd20317","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.89.0-canary.1144.e9e536ae6d62c10f31eafe2c5ed4a9837dd20317.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ZU0xkjZlT8p2QA9we3VAYvDj1gaaOITVccMoynPxjqaNvUVA94X6agOsUzNF5US2xQtzb9H8GXO5ly5MQ7Df+g==","shasum":"9a3218e3c21f82d81a7a75b9c9d4349ab7d26586","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.89.0-canary.1144.e9e536ae6d62c10f31eafe2c5ed4a9837dd20317.0.tgz","fileCount":934,"unpackedSize":2600499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMdKQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcGw/9Ehx0SJtG2U+z5aVnG8kvNqv9bRSSvcME90hOO4OgaEDb68hi\r\nuPNFWkSjO0lRfm/gpJoeTeJJc1AIwAYaR97qwkLw9uDW4c5dkYOxx3kVRkIk\r\nug36f9Q+5kQqnH9pMuwOqHBGO8sWGISEETJgGjXTXfx42MChIOSUYUw986ql\r\nMpTuzlbBnmdKttUpO7MFhgTu3Quqdcv9QMIZYnsGcNdaoo+ZlgshQSBm23N9\r\nutmCBw1kepE0k1W9Oq5+iPMRGYkEGP4NDFatqbfGS/6k4Q3wlJsyj9lTMV7A\r\npyinKW+aiOjJok6mexXMgtxNJ95GSMkI24S5U9EVBB3y5xmz0SEoWqINmPd9\r\nwGYiTj5THuCz+BkqHn6hOmhpj1x7bgMPB0i4K8Cs4/97Jw4zu3HTSWEQWxmK\r\nKr3oMvMeRNZFj3LcjDX/jgCI9i453zG4H+rOq4Y6SfRV8O0kvVu8q7R3zbnh\r\nfvSusMbMZJvRWa+6BFYzqVKrcJD0Csi0J+AhoMi7aRh/mP0aWLVPMeheyX3i\r\nirz8evyjosLnEGvmnEatvLH77RIrQjiVnrSc91rYJz1Vz0hpC1fM7F3+kSRG\r\nuKk3aJq6KMyeWDqgw8K1zfiObW3py1VL5o6VqiuMmFPbo+HaOyx/sSbwnjbj\r\nCk2VzkE92+b/PGha0PZKHTmPrki8yki61t8=\r\n=96+B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBd1eWiiKKd1D3oeDTS+ef3wKHh/ozBCU1wK3Rd5Xf8LAiBg7x8iEgGMVWbjLvMPcPbO4TcKHO1ePNmvkcKplUp2AA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.89.0-canary.1144.e9e536ae6d62c10f31eafe2c5ed4a9837dd20317.0_1647432336477_0.8000032263535033"},"_hasShrinkwrap":false},"1.89.0-canary.1140.3f66d111bb906c37b9ca117edb044fd0e74c86c6.0":{"name":"@sberdevices/plasma-ui","version":"1.89.0-canary.1140.3f66d111bb906c37b9ca117edb044fd0e74c86c6.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3f66d111bb906c37b9ca117edb044fd0e74c86c6","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.89.0-canary.1140.3f66d111bb906c37b9ca117edb044fd0e74c86c6.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-7yDCBrcxRm1KEYZh5nRcKL8UUCQuOlMN9yTWpIm6sx16Zqh7+4DAcejUquYxUBc5YjK99y3NY46Ii20cP70ZDw==","shasum":"616ebff214c141d0ea61ceb977eb24056e1f133d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.89.0-canary.1140.3f66d111bb906c37b9ca117edb044fd0e74c86c6.0.tgz","fileCount":916,"unpackedSize":2534517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMdpDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgNg//QFg+cYoWYO6wTp6KJhPS68TCvJA2bpAuh7pN8YfvydQ2EtO8\r\nndW5z/fF0DCYB5RsbGddsPmmh/3yrD3IKOVTji8RiCLkoGvyxkA8iWaRpvql\r\nUxv7ipgVa6rrYVlgy50vUVWCv4oDhlt6XWNWORMDI+BYfdiJN+g00hPzhx5x\r\n9MSkUS3XP5n3jbXPoe9zUO/Cok8V64ceK0jJURgSZ3eC3pUeMSVb6yB5PJcZ\r\nln64T6XvncErT4DZW1RpcMS08bI3MjdfjKuqGQyYWFh3qZIaB6TBlqYFSZmh\r\n2hL/WjmORpfvtxnEG1u0cCAGhBUw2XFifBzpWtdMjqf7ihsUS/YDA+m6DsMj\r\njBc+KD82jd5qXB2kYHA1IRVSlpZF7CctCZWzNOcNI0T0Jd0ZAVoXyBlZSMpF\r\npp/9yd6q2vZ73uKb66+8DDdfR2fvn4uC2WdRQ34A+TwisghwNxMGqGG9ZigF\r\nC0RVr47aNesbB7H5rS2mjh1qs2etuP8F1zPS77LEq/5gBopmVeXjZkLeaLsA\r\nvlLcVxZfUDEYKxKELYb1AiW2Bhd06yhUdqldND/VvQq196vy7YFrWje4ElWF\r\nrGwuHldHhE5kjNlv0R5/9spu+wpRoqQTsY9ZKqvbSP1/iL2rF54QE0M2AnZU\r\nobtYrvYUd4Ft5ELZPsv2jJfzxTkqBj3HnbI=\r\n=4Cgi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVoURnhnr5JFBAXNlKHvtl0llkp3w7HUYaxwzlt/lS9QIhAKw1kyjFUPcfBEeyOf65LwQCqk1S+K+cXR0QUH/hfG4/"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.89.0-canary.1140.3f66d111bb906c37b9ca117edb044fd0e74c86c6.0_1647434307530_0.32804591788576243"},"_hasShrinkwrap":false},"1.89.0":{"name":"@sberdevices/plasma-ui","version":"1.89.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"04acb377226566160cb2f8858bc612b50e689d74","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.89.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-apU3oA+5prF0piENFa/1O3FmVr58PMRivu8c6sZdN70OkoufSvaskyx3etGgO78gW2kTWqPp6rQhJz9TLLuq7w==","shasum":"cbe268d3a7f8f8a3276172ed7ca30a2666c4d797","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.89.0.tgz","fileCount":916,"unpackedSize":2534756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMdzGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGAw//QYIrx1vrDq/CVA/pU1V8L2fk/BRKpzH7exIXwP63n95kpszs\r\nguHUAVAnvP+K8XwLw6J8XOztQ9YtCrc8HmuWBfvo+8nHX5g0pX0CCtyMQ1CJ\r\nJqXNqy3Pi5SLsQUMuT0et6V5FIw1q4nCN28FpAq/3wZeEaOI1GSk6krfzJbB\r\nrVa/M0r/1jIu7EOHMH6yn1xuhTAY6uq7pXhQuxM9YLcTSfcqWsG8pMg6riDX\r\nVzv1hlYRKv/+tvgNm1uA/MY5WHS20NyZybSy3WTpxi6O+mMnzd8hHPaXU53W\r\nE3ZXRpOx5AC/5nfG5W/jflPP3FXiSve22RYD0R2r8USTG/8al2kvmnSft/YE\r\nhKGIAqJaVFC/yFBJ/EBJ2jYtJELud3NXnee9Bw2hBeZqlwkgxCbBd6AavEW8\r\nw9KyjYFS41zpXAVQWtW833TBA++J3zIPzBqSvX3Kf2Hzbz65cwOCVmAo8ecO\r\nkpd5jlXwYJqQPB+EKAjxrARybxyKSuzV5cHvXoakNuOfLUqj46corfY0XNiu\r\n9/k6C70xFdG+KHpyeNV4360o5F8hcMQLNiOuYzT4F82SkUdPcvRXEKyEsEg4\r\n7b2MwZ2EwNcTo8Fg8YqBwRooTiy+HxDwBZ+EKq6bygXPxk96dyOeIwOtkrGU\r\nAj7rcQbHpOXiY5szfgMK8RhJDAlZo2ZmpW0=\r\n=pqP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvokurJU7u2HzSo5CQdKtrFuqjj4/JYEHUQyFSHkDJLgIhAI52rLZZKXO6FgequXSVP5daIstDSUNT5e2ZlWEeKUQy"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.89.0_1647434949932_0.044472475703097425"},"_hasShrinkwrap":false},"1.90.0-canary.1144.9a3e8ce65bff100ca0dce2065d91d895a729c11c.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1144.9a3e8ce65bff100ca0dce2065d91d895a729c11c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9a3e8ce65bff100ca0dce2065d91d895a729c11c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1144.9a3e8ce65bff100ca0dce2065d91d895a729c11c.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-iunNtD4ki6612pAaeekiiKWkxTtJeJM1IZ9JeIfkq1XPUin9MiFXzeuLoZzm1DbvvkX0QK/qcZd/6Vlqatzjjg==","shasum":"f654c26da091d07f587351ba9531a9b7332a7c60","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1144.9a3e8ce65bff100ca0dce2065d91d895a729c11c.0.tgz","fileCount":934,"unpackedSize":2601479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMeoMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiuBAAhv39jblOa2TvzgxP5IbZxY8fL0tIcQWKwmhaENaPJiUxBO2j\r\nAPh9y0FTFeh+EYPFmZ4CmNyclj2olG4Un0Z5jF+hF3XXYSzvNoHZmjqVtAuI\r\nfC0nDPQS6QlYQmqbs7JhNhBJrtbhFSVrDE5Eh6FgzXOU4SJGgsmYCMkgrBgQ\r\nCK0uYieTt5p2VmPoVo4bu2Ehlewz4CVlB4m2xma/gV4N5TIgH0ZWSoCebaNl\r\n1EvU2G5tboHqhVuKAK6JXtWdKvFnTQEkTpHBWnx7e3489mQ+NA+RGSfBH4JA\r\n4uALE2XEC7u7D/iyBlcbekwvdymylwY+fPBigXYubBnGKRDi+kDISAKq2a2f\r\nE21eprOWLXmN8nlNSpj8rgd/PT8yrxK9WpNNBBBLVnx6/9a5b3MCOm9rmepc\r\nld49CL1s8XfowpYva8mO5Uk0VBk0v9VtK406/4aNcG6m/WYoRD/+jl3WVhkL\r\nKXXJHBrzVZbcl/SBs0AgPLfpEj+V4nl+YpZsEVxgobMI8JWclsSijRCxk5TA\r\nwSuptt/6wcDccx1RR+heNSwD4GNrIAleZGHcLOWPh8w4M6ONdflv7zvd2yss\r\nvKkuAafq/maQ7aIMjkpwSBneoCq8lRLW2JF2Zuaax2ZFz+RGPs++tKK9aILx\r\nR9MkWpfVMVUBCbK7kzMhN34dy8Iu6XiL3Ao=\r\n=SBAW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAx3/3oh3BDg3VryhLd3MxYARpsNEvUskjLrdrS5S+pjAiEAxunj7TxUiK0avQVbLBGSLphXZ0o+5BQj4+306SdLRb0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1144.9a3e8ce65bff100ca0dce2065d91d895a729c11c.0_1647438348394_0.4583984975398312"},"_hasShrinkwrap":false},"1.89.1-canary.1149.18c7c5f9ba21e3790e3d916713b3d4f3d67e4342.0":{"name":"@sberdevices/plasma-ui","version":"1.89.1-canary.1149.18c7c5f9ba21e3790e3d916713b3d4f3d67e4342.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"18c7c5f9ba21e3790e3d916713b3d4f3d67e4342","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.89.1-canary.1149.18c7c5f9ba21e3790e3d916713b3d4f3d67e4342.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-AIDYvsDG0R1bOHw6i85iAUaEqjZlLEVXEHS9Ly2cPVY7LNSDxEa3cfFcMudMBAzOC6NNtFD1+PAN18BndQ85LA==","shasum":"caa847ef7073777faf8c5793f9e8589b131b9d86","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.89.1-canary.1149.18c7c5f9ba21e3790e3d916713b3d4f3d67e4342.0.tgz","fileCount":916,"unpackedSize":2531807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMwORACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2EQ/9GMCBwN/P4lBodMviMsBVJJqqi5Gl6Fo8tBlq0diM1x/LHxZa\r\nZpgZKKNNhGzSkRMWQ6NVi/FFJ0mqj5lfa1Vc8HKkQdVrAXAK86GxXc+i16h7\r\nB25YAElVhscQ2NwUWBlpIHWjVegKiHgylsTIfxR0kNFWL3Jd0TZ87V8pPenX\r\n9z9WFNWSUkv8fytnLrQw0aCH74Yd54I48dRNmQ7IfaWX2r+eKx7oxgbFnmXr\r\nqi9irBq3b8XQbfllimTqh5FKoXS9gWVu3APi5NGLzeoZ525oI+wzCUaIcKAg\r\nuGZAYGqxBLc5SwlSeqANymj9iKumz59P+C1bGWGKbHq6gIl7wVwh+9+yhSZt\r\nCJm6vzRRlLOuivE3r25st8FuWGaxOKNWM3hKQNDw8MCjf0Pe5kZFl0dgp0rz\r\np2Gd2CWaJponPkrRVimcIBGSBQLlg+PGgQOltTCoQ4w7K9zFBkl2teJXPPvr\r\nv2MdFfrBU32fG4kKqmiKfvkzUpVjgjMgmTKfgXqMV6rXvEZAQdielgB39418\r\nyFooE0dehxu7OPNq4Qocw2BcmzCC4DytO0gyJzynbf3zgg8A+l4BScQsPfsR\r\na7NhOyM6y68HP18jC58EiAF56u24bTXDQMOMUwjBgexevUyN5p43O4ixfBBn\r\n0D3WWXlE+fdjSbEEF1Ji430Vfx+UF884nOY=\r\n=K7N2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNPZr7DJI1moizr8uIFb0kLSlMvBfDM+cJQsxn5nFmZAiEAi1TtnHg8BVG64vGK8lqBdi/7HEvOLvGps4LkMqM129c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.89.1-canary.1149.18c7c5f9ba21e3790e3d916713b3d4f3d67e4342.0_1647510416837_0.898772771876426"},"_hasShrinkwrap":false},"1.90.0-canary.1144.6e8dc508a65c6d51e3f924af0aa9d56da13f4afd.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1144.6e8dc508a65c6d51e3f924af0aa9d56da13f4afd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6e8dc508a65c6d51e3f924af0aa9d56da13f4afd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1144.6e8dc508a65c6d51e3f924af0aa9d56da13f4afd.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ZLySV/16IS0ccps0pv8f/1L4JCvuRb+lZwvQBLiurf34D6vO2Z/E6ZXoFiAcJ4Od1ZRZPOCSdRLt7LT47bZOIQ==","shasum":"d5c9ffbc8f0cc23f80562d2fea7a0571d3c54643","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1144.6e8dc508a65c6d51e3f924af0aa9d56da13f4afd.0.tgz","fileCount":944,"unpackedSize":2628146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiODT2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooCBAAoasg96of1/e6ZOsIQZv+xNX86tEGjMiH58+ZpthnZnDzRerG\r\n+omF8rE4tWHluIgvu4zjvu9Q7/bM0DTFymEYEP+++bUImyWNAJDnpVlJShGu\r\nfUV0sTidJpl7QUlYFoFzP6gpD43w4/2qmvIpVIeu0AocpdAimDrNPg2eDQ7u\r\nvXxRLdtE5UkMoByt57vvBtsAFggs9f57VnSpSSmOMzQPKAZk2CpIfRrq7CZS\r\ngiuTgj4qEjQibqqaUuoLStdjHtRLZCV/XvxOS/EqiD6NyzjI0F7dTQED/Zyn\r\n5deJ4KLy54xnEmGLnq5bsnS92hEK4Epw+qWYOscoOjba9MtdYmedPA6UrjWC\r\nrWi4Tqpm9bczzJkr5cxYrlf+Nu4nokzecY+0fA0aX0rN92smsXKT+Mrzp7Gn\r\n7f9UarZznH/JQtP8bN787kUPSH01QSxQiD1U+zVL13IxNLzL/aFnpLDa18Z0\r\nxNuI5y5y7QaFir4zg8UIBUI+4LxFYYcqFt5LSkR8/3OCKrsY5vci3kmF4NXP\r\npsHZd11vR2upkU441vbLlzt3yUjesx9KTaApq2DQhjcBdCRTPJSMr6st2voW\r\nmyPxSYS2QZrutPHTyAGBMQwER6KrDQcTuMmIxh4GkhUrjVKzoUJ57cy0vbOz\r\nP9ww84T1W8TBw/UN67eWKHKpd6QMq5yBJvw=\r\n=/RB8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu3xjqeL/T8iqtn/HkHVat1bxBbk4T9kEPBPHZznYsAwIhAL6QP/QIOa4xx1h2VrFuX6e6IJZ+fewEW/TnDJxWPi8R"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1144.6e8dc508a65c6d51e3f924af0aa9d56da13f4afd.0_1647850741960_0.5767345814366573"},"_hasShrinkwrap":false},"1.89.1-canary.1149.50a7c2648c5a3a8060d470103907c971bad9fb30.0":{"name":"@sberdevices/plasma-ui","version":"1.89.1-canary.1149.50a7c2648c5a3a8060d470103907c971bad9fb30.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"50a7c2648c5a3a8060d470103907c971bad9fb30","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.89.1-canary.1149.50a7c2648c5a3a8060d470103907c971bad9fb30.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Vxa11pSF07mODNvFNKqbQ6BSrkSKTsF/5bKzJtFIgkjWCHRS9Wxy1eOV/WbkD/TQJ1Wfv03hkQKYuz9PQVxtGA==","shasum":"e967d9c5fb0c2bdb1bad7e68431d47c695ce615a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.89.1-canary.1149.50a7c2648c5a3a8060d470103907c971bad9fb30.0.tgz","fileCount":916,"unpackedSize":2531419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiODf0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr92w/6A1A+p4RQSAjuqtPzFTPpo5gOfC6pidHBiXdgRdo6mH+TZceJ\r\n7UcEaH1V1aGGuLLYkA3BbQAJYHqOLCrCBv5mdJ9u8BzdwevfWZt/e0GD6Bcd\r\n1ICQsvaZB3+Us2ZzBCJdLJzhe/YhIRPS7hKYdjJvMvNsGWIdU3kfWW+XGzQW\r\nJjnZCweGNFLzb96KpHh2UrCCxCQWsIscDnuukLBynnJJ/vVEZ6eWt8nFoYHa\r\njh573Xm3ANi/M0OutCw6yDpQpo1RX6PpMl24T59Isy48LJqTXN0Bz8sTZp/r\r\nRXohEAAR95CZv2wpfg14mMe0Dx75KinqwGbctoOy6sOIgjdwL/3/NI0zqYBD\r\nAm8ghMhgxOqf3dUKDr/xIUIAcetAon4k+vL0PjGtsyN9FFq0IExd6TclbhQE\r\nESIrLUKbLJDod/wkt09h27uEcxiqwFvmcxO9u/cRD2b2jK8SWl0e9zm5NSWf\r\nz3CB64G1ihT6/tOyLXVde3t9+FbbKTA9JyBSyCbH0uLLggEH1Jd+HjCc3vND\r\nub4qBWZ+u1SQ+BERc/6DOQOnw2t+QDDfs5ZyoKMcBrMnKGK5Xg+o7xq10ELa\r\nbRVZ7I8k93Evo+bwg13aFP7YrEoJoKCP4rUTTX4yy21KdR1Kv3hhKgG1XsC9\r\nGmhY3pjw38cVyukYcjvUNwqRueuXY6MVOvg=\r\n=gpxQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOaDdnLfyqlZDX/+dCLjODffJpFAp5BAlEg5GG4derfAiEA+ZvNe9E4sjQwVKD4eCE4nbFSSRxENPtJqXZcxQaxOcU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.89.1-canary.1149.50a7c2648c5a3a8060d470103907c971bad9fb30.0_1647851508122_0.9340943940990662"},"_hasShrinkwrap":false},"1.90.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","@sberdevices/plasma-icons":"1.72.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-t14qHXkyVzop6I7QPR6stBqLdzGcNJCsmeJufxMvKvoGxcmDBWkVCGd6BOBsD/d8mYgSe5lG4DC+dbfmc1RJDg==","shasum":"f92ec77d4ad6bccbf74c51f8d9b3d439951aae80","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0.tgz","fileCount":916,"unpackedSize":2535178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOafqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0lg//f3snwKRyg3ez2195LE8BMBtSJru1M7dVGqN2P0fo4RkCCFUB\r\ncfC2amb/vGkMdjjRkHTwLaFlL0aUeNWpotJ6WHoDePaIK9oC6CY+HE2e0ed+\r\n+0m20PD9ijaiBfiY3sqZLzApL5d/5cTam44HRS4fmXyjQn6eq3fAMen0XNK4\r\nJf2DWQo9GpuLNAnr/zfnS+10oWwMdJ5MLcGDZ0NsuMtU+VveGNhcJxvCEbUM\r\nwUy5eHLX0+dVKlsvC3RRD17U66oj0QuvUrjiCcjYyl/WcvVzCLcXQ4ZJS9Ir\r\n+Z1bRhvd70z+0l2HELcrDq4cAobK9pscUwaSaqjdgzPqePUcr+tOJCBM7VXp\r\ntqXjyv7zwf/ttY0v0jmAN8M3GeHNiHh7V1ebw1tohELuDQmLyxIEfgMHOw4L\r\nAQ6odLdoI3/OQ5bgOKvBETvcoCYUVSh7pVe55WqCd8wI9LnP+M9x4bfFn+1m\r\nCy7DBLfLDzBfAJLpxIEodtjDWnBKHw3iSvIArOkQlSpsAXJR7XT3YaOoQrtf\r\nZnSgueRFEp1nONNgbSxCzTAJRaIeIWS+Fk73+IhEhavoqnxD4QuIFenZCiqB\r\nI+Hji/O0+QBGcphJ/ZDUsq3UnwdRY7v1iSYTlZ7tQRhm6+V0o3ZpbC7w5KzE\r\nx5Ofc7VsbHG00/2h1yworETFrTvVG18f32E=\r\n=swNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkIsw9YSmcPRtBd0YZEt08SAnDPu5iqnSVaDJdDC93qAiAycs88Fff+Y5QOok2XjrS/Kif1cQCDnXTlKz08d2HnMg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0_1647945706185_0.2725395578894798"},"_hasShrinkwrap":false},"1.89.1-canary.1149.2bbaa42a7475dc14ab73d17f56eee7f558baf5f8.0":{"name":"@sberdevices/plasma-ui","version":"1.89.1-canary.1149.2bbaa42a7475dc14ab73d17f56eee7f558baf5f8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.71.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2bbaa42a7475dc14ab73d17f56eee7f558baf5f8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.89.1-canary.1149.2bbaa42a7475dc14ab73d17f56eee7f558baf5f8.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-GQs9+QySX5O1lQ8D69zjpTxkBEHr8nkmef0jxlIBr467r4LT9V9435yfw99GSV9AA/agXwyhqihuUdhT82bcRQ==","shasum":"b08e70b3f337c9e75b81fef8c2fc8f864bce44d4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.89.1-canary.1149.2bbaa42a7475dc14ab73d17f56eee7f558baf5f8.0.tgz","fileCount":916,"unpackedSize":2531419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOs/QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAMg//QNpEQ7XvTULpB3nVY4NiLDCo8/wCNUHeNbBiw98FQq/uqnwx\r\nKy/YF1vaaOKnVUozl8ay4GveKAKltfUpWQMwY30yEWTTprVWOswChBgnJ8pv\r\nFW20EVEvrTT4h014RvnrSTab//LBlwynM0GN5xQFuUa6ZcaE0Se7d+IwL+ov\r\n/P4j+YYVU8jUTI/QC8Ly1pyjys28ErqoDZDh4+9SrWQh7T3FkT5vIZicLTSQ\r\n7YSfxEiWTWtSS8dqGlQss7thueqnJ/O1r2R7tkqtf9TfmxtYg0k2CaSDM6E9\r\nzVJEOUQRYsuBOdd2hTdYbEBUULTzwvmmbVnfps43pzeEw5iFjRfL6GebzZCI\r\nenl5hD83iPFVqyw4e+/lvV2PJOTYjbnCtCzVhGXp8AAbqGkStB+g6uScpi62\r\nwzfMIu3eElWRTG/7uFyupyVTA9LTf5xjTJvyE35dgdd+cPhYTjRkcmoDxN65\r\nXVlX+zJQXV65ekWNT2e+Z1bkyxTnFw6mjspgcAPC/uttCSH1RMJHHSgfUAoN\r\nneKTqHJNjuTLfzI1WQ0lKBNeIwHsEkBBZMlRKqjWmqM+epayHGV9hqVWsvmF\r\nOqpwTbmbpxEUj7lkXi7A7ABM3O59pXszd7BlGVcNuGJRXZPcIniu96kTJtKn\r\nBGAhBsFIKBstsM6m2AADZZ9b5TrsPikrbGI=\r\n=lJA9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0csJtWzMx3unbA9jHDQBO1tSCpeFqrSmTTDT6Yc5cJAiAoH79ZoUn4JlEHGNNMp8pvp7ES3uCTKrTf8cSxd7Uiww=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.89.1-canary.1149.2bbaa42a7475dc14ab73d17f56eee7f558baf5f8.0_1648021456038_0.6586791398941474"},"_hasShrinkwrap":false},"1.90.0-canary.1152.d3bb303f24cf1f01be1f5147631010a7eea94b10.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1152.d3bb303f24cf1f01be1f5147631010a7eea94b10.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1152.d3bb303f24cf1f01be1f5147631010a7eea94b10.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d3bb303f24cf1f01be1f5147631010a7eea94b10","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1152.d3bb303f24cf1f01be1f5147631010a7eea94b10.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-2T4jjoa7qpwWkTHR5shVvN5WwsrJ74XZov/zt1whSRWZqo2Y39tAXkCIo6TbtW0DB50FDLUDtFz9UaIOp87Lkw==","shasum":"e8a1d0bcca92357dde1bc2c3e29ece519bba7c47","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1152.d3bb303f24cf1f01be1f5147631010a7eea94b10.0.tgz","fileCount":916,"unpackedSize":2534866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtVUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEFg/+NpOtMroRGCUa1cilHndErKZiufxS4n3PDbV7Kk5g7pfmtf/A\r\nBOeIZUIVJqOi9MrWL6uw/rB6p+BGxOMp5tXJVw9DX7Ciw7JQhL1LIMaERqau\r\n1gRV9bKLe1WlaY5aHC3ZcUn5dqN3HmkWGAHNthsGeggnsfKwr+yqFpMa1R2C\r\nsryFCbPZpIQQSV75Nab2a7RV74NjPhxln4rZ+6X5+76If00U2TwjcG0QUbfl\r\n113F+rSKIK8UKhSS6SlAC1iN4Nne2yGYNKphv/O+MxUSesDCD9EDOGhhQH8W\r\ngygetsIx7B8729ziLZ4Y0yaV0wmHqzL/A/te3/l3+rgpcnqMQlDiZN0ByRIU\r\n9JlFwLK1N4yT5gRzD0IkfHcZ6cGLRQrL1oSk9cFD/7CJMk44dKMleYIoECrt\r\nTfv3O2m6XpkOYmQzRFqlctJed0xVYIfch0HZH/BErJ3CNQFwWaraQQBJQgtk\r\nygU25aAaUQd/ML9uPUxKJRXo7A5abtwtj2im1qS58GvbOhB2th2L3DmANNzk\r\nhpr84C2QOI9xxzpEO+3PG9gAijxdvtwhHflRqzyIpwg7D8uw/I8nvbYUb0Ja\r\nyZ46r2e/RTZcUBTTa0BBY7rwyHFObotKSLVS/q/ATjboHKjxHX43fXcvsC8l\r\nXABpb/wMKARlhLfGfqB/MGD111PTMx1Rtq8=\r\n=d5vb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAj8QcveTTDeW44jme/WoS0s+DLgkuMTM7MnSHB4VkTfAiABRe8sAHqfg04Fw7R9VRSfBMCD5r+ubrxNSlKt2Rz0CA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1152.d3bb303f24cf1f01be1f5147631010a7eea94b10.0_1648022868744_0.24799352436827804"},"_hasShrinkwrap":false},"1.90.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","@sberdevices/plasma-icons":"1.72.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ae417991372b1f51360a496e576e6d92ea36c875","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ynhopEnbkhQvJOuGpUKOVDWXY9Aq9ypAQLSXCYy4GzTtFLWgLSe07CLPeweRIt2Ry8gUFuI3oDMRUPM2n8Mc2w==","shasum":"79b2cce59d9e83e664c970ea2ca4bca7cd7ef106","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0.tgz","fileCount":916,"unpackedSize":2538344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCzcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1ERAAhkCfzdzsPCM3CFO+E3J/BY2yyKdy9u3SVz2B11NqYCwOvkik\r\nPAPzhQHqSuSH5tqC657cMrFL9u2TKAuIYr7CG9isl0M3c9hOHJ7tJIeJVtX5\r\npw2t4LVQXKexkldbZq6AWuoO3uoKGpv51HAr74adfQUGVGixDQBNrLXA+YNp\r\njWuH47E3K5Ymwo94gxn+IdTgXnQugHO9192qdO+q2X7A3r4MoOwFN7Vyk9Xl\r\nZyKfEsIAC00rbqXUJL1Cd5z0yGwtXxJnDyuKmo6PrXzS7skQGxgpPxqj/fOu\r\ntkhQqFEmVR91ab9IujYP7KmKkX7xWtQqc15k7yEfMDzMWNRJX5aP33W203Wd\r\n9lmhFfOrB7B3NrjbhfqrA3XdD1bISV814k+9w+7U4SNtezsH2Plf9SHFo7z4\r\n3E5LanqTgQgx6piTPpRqR1rM4bqCAb9iX+gKcxFPYgRdWC+tDgD3SP9DfUWj\r\nt+81UFwR3hwZpV/Sh1vKBTKwDE3M80biEhrbuks5MxT95beQ8NNHowU0Szcr\r\nVlZn48rskTnw7Z15IgxgTL8pyi6ulJQvC8qFLlOQ/5UCZqlwJmkOUGPpNb3x\r\nphE6bBM6En9P9oIVcaNJ9F6FGbddeCrx2Y79S1CdaQRuR05KRh4rEARJGl/Z\r\ngFygiirnR4Z9X2aJXW4i4qS1ENBgd1djtJk=\r\n=kIl/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8yJBwy3aQ1yL7f5qYjPZYHuO99lsc4Kgct19M19rcJgIhAJxpAPlHr9urekRDhMMb6L8svnryagsqYHS5HlAz1Ysk"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0_1648110812233_0.20879264137984532"},"_hasShrinkwrap":false},"1.90.0-canary.1152.c5c4d21aacf86ce00e5cb4cbbabdb69418fed123.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1152.c5c4d21aacf86ce00e5cb4cbbabdb69418fed123.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1152.c5c4d21aacf86ce00e5cb4cbbabdb69418fed123.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c5c4d21aacf86ce00e5cb4cbbabdb69418fed123","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1152.c5c4d21aacf86ce00e5cb4cbbabdb69418fed123.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-86YahZqwhgx6OlQQ2gx6BQvhhYv/9uaIztH3USISdIsnAVoV2rKhD2as2gGa8A/5pp1fwdFB0vQ7JBNAIhfFRw==","shasum":"600bc8d85574ca296cc59a0a255436695b53555a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1152.c5c4d21aacf86ce00e5cb4cbbabdb69418fed123.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPF9LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoSQ/+MhAEgaWkd28V5TNt6vwYvhuvWBdKLVpjHldetJk2hgNcSWwU\r\n3qdY+s+UMN2mblkvrLZ6/ZxUlfD8REcg8xrLcX0MoP7w3a90le7+4gMol/1a\r\nILqHYC5Vx0s+i+z19g0uAFb3zd8LieTNuYBSrBSP7C+ChC2eYDCsdbg4rAQ8\r\nU7V8+NHE+NNdC7/3K2sireLxc+DAhtCIhB2Cn+kqoWhLMFRdD/FnYN9oYz7T\r\nM9w00QtOxKRUPTuk0cXh06H9eubvUL27ey/kHkOLtCDkr75svTujOPBKsbmV\r\nJ87fUnsudSXbwkG2U0eTqbD1f+1O3mfpm0HocEeTm8N/kBjPLW4CGhmESSq5\r\nWjlaypR0LaZuiHFlWU7FsnSZDz89v/oWiBcqFzY5gW4YAQRaXShexeucLvJ3\r\nwRRmB/WZI0LGFFLxRTUlP2+ofbIxy9VsSK9EYK+XNOjF/jHlXJejqgckopFq\r\nyr2yeQy9bNjGUa4T8RdvkgSinW/xqbnGQKGqN2pYWnafMPo9yF4N8tXu2QMd\r\nxXTElSsHy02idET1hyXPMukv/tm2uAZjerNGP/zIhy2srunOoiBWHo6QTOEP\r\nSrL3Q832eek84B09A8n8pClwmS+fd+/1ORson3zafFGxFeAKw0/fvAqK5Y1e\r\nG5ZEIg7+oTg2nUvbT7tBMJ7vTGt3Bnsr3Ck=\r\n=sVGp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIJWIPrmvujZ/zeN89Pkp8vS2pQH7lJaW4F+iXES/4sAiEA2+WFP5USIKU6au9+rpoVm8MZYy1kHxGRsUdfF38BSn4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1152.c5c4d21aacf86ce00e5cb4cbbabdb69418fed123.0_1648123722890_0.43165406607138346"},"_hasShrinkwrap":false},"1.90.0-canary.1156.94d8f27de4afd279a1cd6b88fb1644941e5788ef.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1156.94d8f27de4afd279a1cd6b88fb1644941e5788ef.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1156.94d8f27de4afd279a1cd6b88fb1644941e5788ef.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"94d8f27de4afd279a1cd6b88fb1644941e5788ef","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1156.94d8f27de4afd279a1cd6b88fb1644941e5788ef.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-f9dPMFSJHGE9D+VH83fKM0z8OMk1afD4kljT83cnXDjCLLlkx4vWM5g7Xdimd7e7b6aXjs6oDQSrYU2WPfeB+g==","shasum":"d566887cd1aeb589c99db65baf9d813282d70f1e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1156.94d8f27de4afd279a1cd6b88fb1644941e5788ef.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPHXnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxng/9Fc2yy7T25Suuupo7INYaD8aF1Av0Y9sUcBGlFPlkP7JeR2HW\r\nryrUJHv3GEuhWQE9o+5l9KdM+KntblWWKhY2tR+GAoC0pfEiKdy0v8OffPev\r\ncgJfNFDf4q4D6XTbEr5Q9TZjkSEiOuBCRAHgFjlJV5VDNPC75PAIGLYQqdzN\r\njOlOtV9RxNmkYVXGPVSMrEeAw8u8F15PtS6eAgkUfmaAILsTNPdW+xq/eFW6\r\nttLr6M9PHODjZj8fXGS4Vu86qFV+91JaSyupuJcNzEoKYpJPv86mWSv/dV+1\r\nvRFyqYw+BFFgjwz8uiqhHNFuFsSZ+8ZrYUyEkBK/gxHYygEsT9xehcSW3qz9\r\nxWuW2fI8FHm7NnVg0OBHjICYkrQo+V9SKdpsL/gjuP7ujBv0hHV6pTQy3QXt\r\nbFu7tiF8TiBTHswA+tIIVZtujyxEwrX8x4EL+r3B93zaOW2gIEdH+DkAhrIg\r\nlflryWhV89J0feIWpuBslzvX29ynuShQwdmKXp3K2YA1O2eNPCIsXDWFZvbQ\r\nJ67jvGyDntVaoyZkte+F8rUN4auzuC5Ru5ta6FIF6ZrhtnRnywmo+X9qH7s+\r\n1AIjy5tQJt+ocoelhh+gUOPJ3WAe+9+CZ+URmTdv2hBKODRNVEMPh8kyilTz\r\n5yvCJDsGfE01X4b3ZqhdhHs7DB0aNPh43QM=\r\n=dMZK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAxtKqwgjsz617w9Vo7ZeVgbOSBor5JSMU1mJBlcwPQRAiBJ933AkuqaIXr3dlhGxv4i0mtvz2WkPIVMGHfX62rBiQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1156.94d8f27de4afd279a1cd6b88fb1644941e5788ef.0_1648129511332_0.4663406410902795"},"_hasShrinkwrap":false},"1.90.0-canary.1155.72c403de118d3d5ba4f882f15ddee41880ff2b4d.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1155.72c403de118d3d5ba4f882f15ddee41880ff2b4d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1155.72c403de118d3d5ba4f882f15ddee41880ff2b4d.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"72c403de118d3d5ba4f882f15ddee41880ff2b4d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1155.72c403de118d3d5ba4f882f15ddee41880ff2b4d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-CNskJq4Dox5ZNYDmR9OH0Ttws6sbetuqwZVbikJUM9QzKkz/hKpkzCmrC3iI+tJtKYNBeBU1UJ2CrKzFQjS7kQ==","shasum":"dd4da724724acdafef76cc8c139f8534b7225981","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1155.72c403de118d3d5ba4f882f15ddee41880ff2b4d.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPK2kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfuxAAjopkL2LBm5ayW1XNanryrG7++GLT2L69Z+ZkgwRCjYHFUBYF\r\nvwRhW9kzF3VglJ2z1kwHK9Q02z3s4tsM98RPUNU+kPxCEPhcV/I/BbL9+PrT\r\nlgUSNaZqrOO7PmUlTjJ8pWsowiynxur00vUtJ+HKdvNaQBgLN6USlI7t5EFU\r\nB8qjb2vikrh02Bt/oQOPM6DiDS1jYp5aTFhki+wSHylH/0Rl5d3EVadY4Ws5\r\nAuZt3i/mJzj9eBtf15b1GpD/ksE8qmESsA+Gkx8uhW6wBaBAd7HFc10e2uiO\r\nWCktTJ716U3Xk73vvltqmEXHHNJKbbVzr9z3nq51mG3UUGO+lO7oKrXVtmZP\r\nIRbdJRT70HXNwgFxd1i98GHTBWo44VCwzGsiwztpPqrtQevTJ5Y+LCxSkA3m\r\novLUaSjOsRt4xE1iiuKdmfy0D6GzQWZdXy0ySkmNcPiuZxpm2QwHEg/mLML8\r\n6Hscf1+83K2UeNCTT8tHWdwOLNSvW4crQOSlv0dMc2k334tFO0ywlebbnxln\r\nMdUfXKOHrLjrjwfP+R/hd65unakgTpyRJCM+JGgu0zchtt0COpTHxwKEBfsJ\r\n5YS7veDQX5F9X0o134ThqL2QdOrPPYHCS6X2LZBMDhZJTUdXlma8ors2hrgM\r\nJm6nrIPpCliCxlVJch2voPYd4ubA5Bn1cuU=\r\n=SKQu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZEqhdN51ZepOb0ecu+VAe74Hn0B0NjqpALJ4bKlKUIAiAHxcv3Yb5JZ/7207L/EBqyLFMeouLtuMIosxz51V7fEg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1155.72c403de118d3d5ba4f882f15ddee41880ff2b4d.0_1648143780479_0.2965881761572735"},"_hasShrinkwrap":false},"1.90.0-canary.1156.a6e87e65a622808c7683c120704978e5d8266d67.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1156.a6e87e65a622808c7683c120704978e5d8266d67.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1156.a6e87e65a622808c7683c120704978e5d8266d67.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a6e87e65a622808c7683c120704978e5d8266d67","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1156.a6e87e65a622808c7683c120704978e5d8266d67.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ykc52GysvzHii3KAHFHHzhIhq7PCWjveF6h+BWSdE1JVwEkuH4pT9j74gOfzXk+u1TLTUjMBTIFsaiIwhiwIJA==","shasum":"142347a7a4d3321cadc7f011e4c6a1f8f806020d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1156.a6e87e65a622808c7683c120704978e5d8266d67.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPWr+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLbQ//QiD+geMbsR1uiwVZrTwnXTsSf2NeFTo3qH0FiK0Etugorych\r\nG3Clv/r9/Rd22Wuj/Wg7T03tC5jmaCFnthGU7GiqlCNHWVbUzDB4AWVZJHV4\r\njt2dPYcp81IpivWWsyY38rzCMZitzd2YXCgYf30stUnxoULZ6iHcO/pXX3VA\r\nW4ZLDFr4OTzioBaSnvJ4XP+XU6RDUQ6t1xFZ8JuDFZc22a0GAjZjBukdZ1/V\r\nJZmgubh4c6qjuzYcEIcf++zXAUCB6KOKNJbNWyFEvm95NumdFmG/VeGCT4W4\r\nOOuO7VUnZMKRJ5aVo8uOdHpWJW8cqq+Q8sA48V6URL1RHSfWIWYiCAQ77Yl2\r\nqV9VYk2mIWbM3f5HEWn2iKWjrE/3EK5aRVHZCMQtVMNXZue+otUmZX1DzU83\r\n3gj9yR0JygOdh3CqyZvtWV6T5sm6X6YbdIjxB8c45CMt7lrToBFP3eP5tLMi\r\nkMiwJGaoErW6w9Q4s/YApohchARtqmA/eeYFoMVV/Tec/Vgj1LG/x9VeVmxU\r\ndOX5V3YkW9iEVg3v1YE+l9lHD2KMQ/S0oeSKtnkXSQB7kT+aoboJvJJB7j+C\r\nu8b/L9eIA9g41jWjROSh8LiH3YzROALDiQOTJf+BesEoaC+ug+xdt5UL3UX9\r\nzXoFApx12ziyaGEj0QgfR4se6DNDs9EI6Iw=\r\n=KhFQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCea5NNY+UMCNKBy7S2xn/DCM3GJeX+5VHE9q5k3O8sQgIgQb2MzyU8hYB7BzRUdrp1PAC1HwXf2NE/xkemYZFjdgA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1156.a6e87e65a622808c7683c120704978e5d8266d67.0_1648192253926_0.9737395159156266"},"_hasShrinkwrap":false},"1.90.0-canary.1156.3171d27e3d07af8b3d90ce382147b95c07089b0e.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1156.3171d27e3d07af8b3d90ce382147b95c07089b0e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1156.3171d27e3d07af8b3d90ce382147b95c07089b0e.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3171d27e3d07af8b3d90ce382147b95c07089b0e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1156.3171d27e3d07af8b3d90ce382147b95c07089b0e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-MDdTFYzHk2jLMyVoul12REE6uQDQFH8PPLRsrTl2bgKF7735zYSfKGHnRmw4gF9YBgPBNYzDDFU5Iac9weIHlw==","shasum":"47e4407ebd23f8ff2c4d6d0920a0e2d3a3c92731","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1156.3171d27e3d07af8b3d90ce382147b95c07089b0e.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPXSHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXIQ//d8j+JVmlA5GOBSYbchbldIB8KCq97sLnzhAdRkM3LgPVftTr\r\nFMZMuf4NxnHN0YfLv67MfuURlHfeU+caYio6Pxlc0Fjxa5+VpJIX49Mv888t\r\nzeYm+advyKCa9AESk2euJ2t0IpDNx5TFho5APSHIw55F6FZIzADqnBt4EBE5\r\nbishpmuuIgtAVPBLcCQrcys4ik5N5ksPKuOx7xgCHFbMgfq4aEV9HpCNQTk3\r\nmGQxje4gIcmRrif08YhN2Zoc+r0JG8/vFtx/KgZ149veqTQlu0q1OioCFTZ0\r\nv1kTHTSIfTs3GWYKakwyMMmJzuxVxUpasP5wHoHJd2+1PMdCy7MmPFrlB0D6\r\nENTZEtUHGCo40E9JooUx2Fnn1xiKEZu9jvtSXZnQNdk2rglB3CYpjFz5MWzC\r\nex4/yiZVdRuZF/u4dA8/QucNbF1vfTW09GlgmW9wUM04j4PaJOnZgKkfv+M7\r\nYIU9dcEMKHSSOjBPRMkwQE1DQ1WLO0gsZxwyokZuHKsbzRq2NH9EPm2MlvMt\r\nCOvzw38HcJdKnmO8n0Tpi2tNUKijgEXKKP8RxZq8fIIxeeleKr1mK9SOazfg\r\n77/Af3oy4/9wgnUSVp/H7iMdJ6Rsn77AmwMEZ1GH18F+o2Mvp7aIJb1hj+AX\r\nzB4u5BrUCB/5rQaSsUahs4OHq6h0pW4K7b4=\r\n=d7vn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAuPb+D59T8hxSke4TOunmnDF5K5kdqJsx/hLJhMoSQgIhALe6qnDqGiCcUQLmtDpF4gmTllsK0StmQzfuG8tpyMbP"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1156.3171d27e3d07af8b3d90ce382147b95c07089b0e.0_1648194695577_0.030330759351884895"},"_hasShrinkwrap":false},"1.90.0-canary.1156.a3a9c840556d4a1d2f445b1b594033dc1b3ae18d.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1156.a3a9c840556d4a1d2f445b1b594033dc1b3ae18d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1156.a3a9c840556d4a1d2f445b1b594033dc1b3ae18d.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a3a9c840556d4a1d2f445b1b594033dc1b3ae18d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1156.a3a9c840556d4a1d2f445b1b594033dc1b3ae18d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-M69XGzwtJyFvkKCV/71nVuuw8NqBZmTJiZAxCvXhHL1LjCe34aS9BOGRJrdCt32sY95U/CdaeUnMxE5nxVeZZA==","shasum":"7c9104684f8edcc83336b07b1976d06b0f91657d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1156.a3a9c840556d4a1d2f445b1b594033dc1b3ae18d.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPZIvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAqg//ZZUuBqK5Tlm248ly8mjDK4M5QtgeY+G+rqTDtnOgWmCc41bg\r\ngc0xaec7BshbH275z1W3WD3QXeTY/0KYX3PMUXyJFskGjosAXkBzuyjoN+Ya\r\n6qoZxAozQPrB9SExap227cD/ZccXKzjbIoX8XI9b4qReSMeuSj9Ui1btaD/2\r\npBxiJFmamFCdhLS/wLuFPT2YOg7EHuhO37f/IkreGq5bP9/eheakWmkwpd6B\r\noX6kYbTSNpX9+3Y+S/MrzfNctqDQhHz8nPL2mDzq04z1H0yrBoJaIxPFL/l6\r\nZpsq+JAhdwezk6+Jd4JaSMJsACrvIgsV8OxIH5Ccr9UlcZXqs4c8Rg/Nw/2D\r\n39SprgwNsiIKaOAvCOHL17ZHrHpekIoi0eaVRx2/A8v8ldQhlmRfWeRf881o\r\npDwX1Z8R9dWJLEdK44hUwP+k/ZecxxD/fR3hYPH8Yrya5ITGFNi+YoREjC+/\r\n+O4xpYlWClrqYwT2cT+1pkhe9UIiEtlb2BuJe9974I4gyN+fUIsu55ZZ7Cjp\r\nRTq748VD902kEiAuk7g5rnGCwFuavMcBlMADxk6hJeWriEqdhoA7r9nW4JVN\r\nj8uRdN/iiFuZA0h3Hul38V58mC8xpstZK9Y4tYL08yRZimUH0fqH6/F/5kFQ\r\nytD0alVvuyk0+X/hHM6kzX7Gy2MgW6RPxhM=\r\n=5/B4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCry17Hg90gkOtafDxRLq+Zl73NixrygOJKIQJWHjWYjgIgTMuTc+lDJI0V/HJOXmmlevzIwF0TYpb3zHReoN7Wg/I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1156.a3a9c840556d4a1d2f445b1b594033dc1b3ae18d.0_1648202287596_0.15585363982319755"},"_hasShrinkwrap":false},"1.90.0-canary.1156.abdde8b16099e5f8a6ecf9beaa738a483549900a.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1156.abdde8b16099e5f8a6ecf9beaa738a483549900a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1156.abdde8b16099e5f8a6ecf9beaa738a483549900a.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"abdde8b16099e5f8a6ecf9beaa738a483549900a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1156.abdde8b16099e5f8a6ecf9beaa738a483549900a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-/t3R/0aue7zWxrrrV3FRt+UWXmjhsmEm4UEFtZbH1/IdDC5ACrQRldCvo4wn20RAfeWvXc7iqzsbTAi2klrfvw==","shasum":"b8ead69f742ee2bed6481dee59444ead052d3f37","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1156.abdde8b16099e5f8a6ecf9beaa738a483549900a.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPZPEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX6Q//VJFv4O+I/1dVN8nH4bYoBbbQI03+byqpAsd81XHms0VDyujT\r\nyvsnf2XJDJ0l/+ahftd4fLT+NBug6peQUI7k1kgmZz8r8Wsy62mWgcw5wHf4\r\nC0lqu0nGDRBV39J8cAoM/+yCceY3QTulg5hvGKx+OlsVEVlTkqydR5g7VFpl\r\nRQKVnao3ptB/YiseAgUcyTDsoSxSRxe5fkUqUgOuwFfs+asiJfqd/qpVTkzb\r\nzz9KKOkMKRTOocIf2Dk0V8kSkWkdR7HPdKhGQnXAB4mCXfoSXiboFI5xdh+5\r\n0hN+/+smYHf+z+0BEE9jopE0bZREuHf6utOe96Ka2L0a4AS1xoxOE0xJcrFq\r\n5qWAmxKXBKMH9rIBVePldbMl3ZKw4NtprUJKe/uWfg+OuWOMw+j29jvE7+zj\r\nHCmgivcUcj9gyIZlRNiuQlOg7gfPNSUlfsHzDOOSBwiaY+vMb1+i89HWg/h6\r\nFyxLb8Orwk/NIL1hoHJq8MCJxuuqsz1FFsQ2bDjYUNDvUSKWzG0vznAgpKVQ\r\nuOuZjegNPcVH99eNjGX/cvsitySWcdERU4d3ML0sCX1M2qdNTclm70iz/ZSl\r\nZUkJG4f9/G70yYiu4qxQcX4QnkgGFyWLQXCzFA2OUTQQmedsEgrV49HGnbDN\r\nq610EZl41bqKB0wOS3XUJj47HWr1d1YXSLw=\r\n=nSc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0gKPHNO8sF+IQPdOTrkOve4eCLMUZQxlUBvtbhGhFNAiEAjvPP6RMEBCOQT1klmwx+ktVO4yEC9ysAAFTqTTdEp5g="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1156.abdde8b16099e5f8a6ecf9beaa738a483549900a.0_1648202691844_0.039620496569031216"},"_hasShrinkwrap":false},"1.90.0-canary.1135.e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0-canary.1135.e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0-canary.1135.e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0-canary.1135.e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-X4hZ4p5hHHK8O2UAVpUHzs1RFActp59+Fqpe2AFHGFsLjDU90BVHAkeufTpuRRDlrd1vQWEprA8C8KhcpHQ6wg==","shasum":"7ecf9be196d258a5ce3d192acb8dd990dbfa97d9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0-canary.1135.e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPagXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpFw/+IVMQ+hNsRXlxjv3ApO6YbfeAgdjlpTUAuQsUsPwBQ5mg/shT\r\n0jugJk0nwJIDxM26Dgp5dKxScoaNIiS13U/jLUYNs+cRFAAvQHgfTdtUiqfq\r\nqfT3Etky6yo9AFzg/cs+aFQ8Z090eXoX9yWMtTu2szUq2Mnj2N0tVhZnqSpS\r\nnBEwpIFVm8dwXu4NMckyZqNP8mrYr+i43ZPxmq4MkxTsLZVjZmmY2n8gp/fq\r\nERkMoj3MKWuCNi5DRWplWO49lsrjKSleyq3J8AwLTE2RWuqQAIUNIKNRmOjP\r\nwEGkJ3eP1bxxV5EkcmgvRkXNnYXBee2KdPM51h6iNyl4t70q1FziF43ESnmo\r\nuE6l6fKf+GCNLI+81vIdGMboa9ldn1Lj3hgtmPr4YjYRXWdmXFVEZ6hUvV+y\r\n4jOvEA6adK14d9YFBwwoe0TlxBf7+Ok3/assUDpwOJkGS4j83zhv0GaOE5ze\r\nhIDjrN11nU8zhuoXZAkaUyU8cowAxl1rzs/XCqWy+QTABAbCjjlyu3R1dwCp\r\nawf1wmSQwLk35pIrWHNjC/eNTsuHtK45epn57I8ejcQMhHcOS7kF3FYb+c/v\r\n4+GkNNpA+8uYapqHOjSwVf9w3A4HRd97jf98xv9pdxmlOI+tLnsnF28RRcHZ\r\npNxfSm5jLK29VAdTHysuoDN/qVL99iRhPB0=\r\n=AYbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH12JyE5OVV0pdhUiACtOOqA/E+pQBXkf/3WjpFOEeSgIhAMKhalWy6NWAY1/I1XF0ay/fHZK+L8htFlE8COV/PNtc"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0-canary.1135.e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7.0_1648207895539_0.913333033209728"},"_hasShrinkwrap":false},"1.90.0":{"name":"@sberdevices/plasma-ui","version":"1.90.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"314ab189ff4cbfd3c3063ddca83df8fe5565ebec","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-yhiJwap4q+Be8o3GVewP5nNz5qpqdTzGmXU05BNED+EirIIjZ1PGq2xfIfBVle3iul5kp1xmvTumcOnRL8JBvw==","shasum":"92b21ed0b64b386bf89b3eb4dbaae372b465cbb9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.0.tgz","fileCount":916,"unpackedSize":2537922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPa/7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppZBAAk4eKFocNfzBe1q/oq52p/yDChAq2S5Hdevi8F5OhWkq41Z4M\r\nESNIc6MrpZzzL1WAa6mVr14SAVVOWD1Aq6cDCFIMU5pY+5V7oPNlNdz2BFR7\r\nS5RvcQl8uo7Wew4rf6Th8ospGbh6/qkQnsPfV4JOQhgRIdiRKQA99ClHPuvb\r\n31woRIMwcisBWvwrDvdG6OHLPb5xOn9b/Cqv/unZndi7h+fiNLagy0s6hBsS\r\nncY+n3QZWkv2Ejj/lDJX8MofSg8dCjpFc08vUpUAgoI8zVqLxHJLw9CoCksS\r\nt9IL4GVs56byavkUsM4oOQPew8PRPnaidYPE4U1K2M1xpLwUaBtANv7iGGDB\r\n6eGX0rhwRj6EIpBHlMwOjfza25l6Iu2ntyKPx7/zQTQHTs1I35rdpSjoWVYC\r\nPm/u67/5Wfh8o0DGfoTxtYOrbpLYlzkzOttUk1eMkK+IpH7zC0pCkYH7l/c1\r\nEV15IOQeCokWxvjPKhk6OxEuiQ5juKKg10c1D3wN5q7bDe0GfjbPxT5cj7e/\r\ngqGMiwRw1OGwz0Xk7iRvkOxiyarfpv8V8jTonPUeWRCyOPvf5cia/ObCCZW6\r\nfCdonLkBOwiQGpc5CV0JYe1TQWYgxHjNSQoG07jg8Xw4X1yx3YMCGPvifiWt\r\nerdcOGOJZMNjIRjBVXr3ezCTvb3InTvbnp8=\r\n=kpgc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCttcwHsSY65QgnK+bmqmfEce7T2uVyikG0gJxSNxnRqQIhANgf+aBPwj36RxJWjUq66XbbEGkDZB15H6KEi26XDqCL"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.0_1648209915186_0.8005011529202517"},"_hasShrinkwrap":false},"1.91.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e9cb0a383d4997c2a7ec1e461102ecba06b54276","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-W99TcNoAKgvuUuDAp0pBdk/5ejgdpYsDfw04xIw4+rJbScUokMC60VqB3o/NWbP9RfYp2nfEpeSArStXOjEbRg==","shasum":"d08b57800df1be661a4e41381136244842511cef","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPjXhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptlQ/+PgG0mHVRlavy9oinGwHzwSLSuL/5d7JNmm7wu8HeAPTDqfeJ\r\nSOFTDiHPcFgZNkjzm0/0Vob+V/GGtdz/jHvQJ4n24mewEOGmrAzoA09llWfh\r\nXxVKJZ8HrH2YqO03jye+lC5w/4L62Uo02tatxdpxFwpny9QjnTn99tFSZXwG\r\nZP24MuB1XBV+DNMpedNJU+voE7EuBAcWad8XDmSnITvF3xr3IQddh28HWZDH\r\nNJT5cIi7yTRNwbiQ7CwdpAou7CQzJYThw0Gl+hC43LV5KbvRXUPCVZcMeuqv\r\nWQlmYf2RdJWK15dC4JEKYbBOenT+ZfO+MoahALu6jMPGOVFva68DQxETGA8Z\r\n8K/v1AspWg0nIQt3REbKeVkIEfZBnle7sfMihlrG8zOldACQ0fQI9U1R6eQU\r\nwA9IGRVGVw0FA+GnLNMb8jg4VeiMIshtNhwRy8ZoYOsOKzufCRp523rpnbQs\r\neEzSMZjHs4gvMK1eblu41fvOTBYAtpswb+m2Wcxe+HyPirC+dx8S+621yR4E\r\nmIpWu39TwRoFD6AYYLvGTKRWb/uXL36Vwa7IlKpFFfAfkLEqhltP0qsFnYDz\r\n3dsr9Ej3QG/qJRqBP4G/fyUJ3xo9E0ZPGCDbAgcRJiZllHwo89xuqT4SltKb\r\nxq116IVBQYA/yvW6c5U5UGxwVf9BC+mHB4U=\r\n=v/JD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQo+6US4tImjlUtOCEwhMM/cDXVfl07B+kf78VL46qtAiEA/mgRDyJBPOVOrsABTytinLmac/6Kn6eA/mLPIv512Ms="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0_1648244193187_0.16367192746596504"},"_hasShrinkwrap":false},"1.91.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-2gRdZbqkTi39RBUKrebn1AqeSkQM7JjoVibaH48eYSTs6eGDgM+FzR/Pe54N096IH3hgP9LKeZv3NsY0BvMMDg==","shasum":"63f8d715201dffe30c1579a978244c836b35ee35","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPunJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmracg//YRAQF7uOM3QelQSDZvTjKD2cC+euGTbS8cj5WnMhV7M/7lmT\r\nTOQP9ARr3Dk6dmRSAK3rZ4dW2NXpWku69VJfoOjBXuf3p1zJ22QkTzGIwBcT\r\nlZdRxhRF3ttcL5bdjIGOVMYIcMI9fdViCSLXl/xczXpp/ep2bXhEMaJKhXfH\r\nmDlwNBt43aVcL6/FxGFKEQgZA/HP9kR9pnbeZTf8PA2h0dgzCpdFDLNEIyFa\r\notmB7KyFZ0HGfZ5htlyUHelHmAukuNqOKOKU9AhvWFTDNf5YqSGXizkt8m8u\r\nf/S8pB1u2Pb8tKFXmE58dm8Y4pyljNLoTbbbv1F/k1Hiz+4RLrwVEyRiyGfp\r\n35xavtLFsQpZs/Y2F56lpI0PL/1nmI6KDfTSNPBAt+DBsUdUjaYOEDSC0sb0\r\ni4oLaFiD/4cC8CSiVKHfy7yWqEy4LEbRGPrJ2n5Eh9wwLBMCC1KDgklUbALQ\r\nSfvJOfgX/hYuFScsir+cg8lGayn+8aHtXSD+WVPK5PSm4zfW1mD2HytKJ/7e\r\n/KlLfIizDiqZYYrKfl8syTeRwY9y+u5k6bbCM1mTYdKnobUhTCrOJNrBxiFU\r\ndrxgyDPeWmRUrfsXDmzSNbDYOxe+pEJmjXPUwi5w7aj9b21EAZIKrjQNGWT2\r\nZE9GuRSpv5cEFc5HiSNVoTEccTH27kfH7KI=\r\n=3e68\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAs6MTVYh/JlgJDpKPb+o3M94Oyatr6YhZynBHcP5HeHAiEA1ZNhnv3voeFTAwyeIy4iuF+MKVwaY95GsZwq/I85vZM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0_1648290249502_0.09437242271549406"},"_hasShrinkwrap":false},"1.91.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d8492f52c662fe27bba004062093d9370a73ed9a","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-hs3gYJxPjr4CPG380JzgDDaAL65MrD+HK1ySNec2IzrbdhlJOXH9ZGWf+8vb4MxJm/uJDrPF0By2p9/oqe7w7g==","shasum":"c0b85591eb37bff5397ee9799e55b6cbc28bb496","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQFyYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq21A//akVaOvHe2hiIg1kmN13xVdXe17KHqdBHLry71yD3fqemzKNi\r\nkN9gkz3z4ygSTokpOAN5tLouQ0oGr90mizpuTAkyWUCeVTj0/vmBSeaJJpB1\r\nGdaKG7lvG3a+vp830GEZmTTHIbR/QehLuXl7LskpX1DMVX0++oN9qt2o5XEm\r\ne0kk7sidxIIeFm5oHFKRYbx2T5jv4cxXzsQj31SX4INfB3UPuHrLBnVchIYW\r\n0rHfwgD+vWLIlSVFoHMQRuZlHfP8DrqFtgmQ9aZv94tV2zOQwmTLORzj/1xc\r\nEGTyRA0xGFmfZdjw/b6HOzSXByysV0KxpUX5/CJ5tD/V1zBVeQ3CcRD0NKPk\r\nd89lwOnnCCjA173/UHKgsW2lL/kcBcGTHe25C3O/To4kQgAXyKeWrJK60kM7\r\nC34MtwdGhiHnyBYAnY4t07hixRGK2YLOX5n2DyKiY6kDJmlKY9tg/8y2AgWY\r\naCmzRlAe2g/tN+ikKmMYcSMPgJ4kBobb7PpiqDKQ33rknjhfcnXtBIWbdw3z\r\nTDE/0sJiZP6/bm55k3dg4cwVgO31KNO51lfpz1ten6PyLd2DukFrmHcx5737\r\njyIvnZOLit9XN2LYodsTkWQfcx/AuRxPNR92h0p7oSKC8Kh/pGiCyJSVhlv4\r\n/w7znJ+WQgTEIgtAXXj+cr3ZU/JP2uRCUAU=\r\n=sBPL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrdxHQFawSmyS6TJq4jnNh4nru4rIAPP0xl1JcxjYL7gIgEhhlK3/TPKxL3tP+C6UIDPGy6vO4DHqbrvBKW+QaavA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0_1648385176516_0.028107643803118254"},"_hasShrinkwrap":false},"1.91.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-r6qtqukMiHr2JEUPWwtDmfRwdUmDoLTjFTWMdVyM5bTURX2HrMGJ+Gnpduw7sBh8uRBqfSmjMnPf2cxK4GmlXQ==","shasum":"9924d40897cd8ceefc7d106874fc33a0ecc7dee1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQGPvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiLw//dtQtUxhP5IlBa9IDIwkPC6LmzUJy/dmCH72zRY+9knVcg9hq\r\ntkfZ7DtO/wkwdp9SVIXvvg/qYJMuo77Tmi+Q2im7DWj7NuIlNRsuWZPz8Efl\r\nr+3NX1T1Ff/GYe7p8cLUukC9egiWouZ39sRvC8js9C9MnpO9JtEUP5YEDLNl\r\n5xag6qsbLPvD8GG52IKzZJOGGbkrZkOrPApokHu97nnokOLCd68+T+HdMneT\r\n+DFIg1T/olYN0/IYoTUDUVCerTZaAE9/jD1xQDBWmIOPeuxrrpnP4MIbXpRn\r\npzfzW5TW1mzyMDFLqX8utVfR1bedNZ9/0JZC5PRMqlh16nUuS1iyeydvKg9G\r\n7ySjXxkdTsjuL5wDzmff5wz5fLzFuo9pSuXdclQofuJiU3AhC2G20wT8agNe\r\n34Gmbnjo/j+wdOfBqW6G75oB04iDcrHq+nJefXfQ9ZJh7Cc0UPMUQRPUkdtN\r\n7tKMNPmH8vGsjggyoIwbVceH3czALG99k22JR7yTKbqt7QKzQy/aa7gXsnld\r\nhUjCg2WBewPfIo06PjAGY4v4WDAo4had95iqQNNva/ONdBmMpdsmlHjLTE4w\r\nSRgHTujpiT7I673s2FIZlrmLBMDTjas/o1JGIoE39kjNjxF7ZIN/v8F0RD+1\r\ntc5x717XXTJefmbCzZFb9CsZ0RRBNTEJXSM=\r\n=Elq9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdWWKfbjeB/IBdk5Qk9JDIeJTd/GyPdufpF8hoZQ36EQIgJHwsEveCk02hcK9g6YWCiHIVAaz5qGwoLMEdjpCSbM4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0_1648387055176_0.7627581583434397"},"_hasShrinkwrap":false},"1.90.1-canary.1149.0a362bd3aa6bc1596ee371e984da9812c6246362.0":{"name":"@sberdevices/plasma-ui","version":"1.90.1-canary.1149.0a362bd3aa6bc1596ee371e984da9812c6246362.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0a362bd3aa6bc1596ee371e984da9812c6246362","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.90.1-canary.1149.0a362bd3aa6bc1596ee371e984da9812c6246362.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-bNuw/B56jO/ayGbp+vfMBpSGjFHVQXXRg84UaTl+XtcnJ0HwLP1Y/dwf27F0twaicRga0a5Oy3XLOkL4awxqdg==","shasum":"a6f663b15d94cffe6a6b26ce97c55fb1ce5f3d79","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.90.1-canary.1149.0a362bd3aa6bc1596ee371e984da9812c6246362.0.tgz","fileCount":916,"unpackedSize":2534585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQXyqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Nw/9F/K6tvyaXfxi19Qw9xQh1aMIiEeSwlRo9g74WXbh5HKv750o\r\nJ+lMGHI84X71hvKxWNkYXHGmfl2jjTHFEiEzSDXhQZvD6Ht5c2qfieBb5x3j\r\nc6/LkUkRlNjJ13eRyd5XMGeYAbxfHmZVLTnVJjIg+dN4LQGFPiqBgPBEhYqB\r\nbPSvmLYBdcoVwOhCUSNjplwCD9IXoXD56Jb4xEKd+JEmb7CV8gzaexIUoYRM\r\nMmv57V3LOU/0iaS/aYwDT3b8TMSy85MaGg1jI2aVFcD6+YadP9VwPKs0Q4Ys\r\nLL2GdWsilkc0gnDr00betENhxwNJT6DQpqi87HAJ6atEXtgYBXn15d4Nal8C\r\nTy7eFWy39t24D/dj7DvRW3sADZv7oXIb5OjvnUTeBtyX8ojnadxr38Za8v/7\r\nGq/n2YrZw6BAVdEITklXyyMxntJ560r8oINQQk+4sLxBYDY6faepfH2uLES4\r\nQqYeTXRIS40obb2Y1tP5B1g22sXzGaLTycPWoQ0JQPC5dSva+651z+yIW16j\r\nemTnirjdVcL92E2XA+vCP4WObbGNVo06aswhOOeaicY/tEYjKfkWkBqbtzVx\r\nWZdJLdZTwctFvUX9m1cvWZnuT+cs2Y73MjGgcRFLKeLJHNzHsW+FE5R2WuRc\r\ne/EK5O77pJbU9sf4JXTtLyUx5MZjkXC2FvI=\r\n=527D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaDN+oAlirnFwwAjtKDBldtzzBO1Qh/MNTQvXiOQdFTAIgHkYgKMROMI2WiBvETdOANCPtW0JdFSTG1pzOKwOnlCw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.90.1-canary.1149.0a362bd3aa6bc1596ee371e984da9812c6246362.0_1648458922462_0.03647880881725807"},"_hasShrinkwrap":false},"1.91.0-canary.1149.0bc47ea507ec56cfa5c18de423bb746413e8a033.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.0bc47ea507ec56cfa5c18de423bb746413e8a033.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0bc47ea507ec56cfa5c18de423bb746413e8a033","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.0bc47ea507ec56cfa5c18de423bb746413e8a033.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-D3b4bjE/IQqvA3vfJpGAxtLhqnT3CObahiS9GY+DAE2QKmvaBARSX13/ffjC22KlDxchvr6/6QOkP4Vv1m5pPw==","shasum":"3e8388a2b765b78328da0b04c7a08f2788f258cd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.0bc47ea507ec56cfa5c18de423bb746413e8a033.0.tgz","fileCount":916,"unpackedSize":2534585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQc7wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWlw/5AdNUmfGhRg1kf/AC3HGtzwR4GD0GLwptekLTakl1iFy5yRXZ\r\nD5nYXBpIITZ+EfEjRUwx5mgykVr126fAlRHCuo3BqAx+wjS+30pgLVZ5tL9g\r\nYzT8fj2yixj5b8RbnZNvr1H5H7U0xdXD2Y4PHwUGQuJAR5ELNszwypZ4lmZT\r\nHSzTD7OrqiPnADlBRz05Z18BVC1kkz4iQm2JN6g4L0o1KhSsdOjeWTZ7T7wD\r\nUk1OIvrt2lf9V2WuJp2/65hkgwfKqsXWL43/kCyg6JoIlRnQXKXZGpn7XFPv\r\nQ/T+9gvbIq4LHMsc4QnI09DTco7VsxjnvCcP7wGhBNfZgrfAypLKsYK1o0Wi\r\nbhQEgZdcKYZNV9bLEhpERSKudFzZfspPz858koBvxjjtXoc39BEQAq8s4Pmr\r\n+lMT8rkiQ1PKxtbLgzw42POZL7sXO2+BBiInXSJie8CN6KYA9d4MysoqifOy\r\nFSEGwe+JERWFroN51OC8R+nOHT5OnRmZP5q832J3zoZF3o+kZzAOsJt7vuPp\r\nY27Adu4E28dZze9Z2E6CDc6Zq9U3KS9n70soYHNDuw/CnmWeURFjI/Ja0dKg\r\ngv8REVFCoX6LKhw3m1Q4qhlTOV3Q7Nn/e2n+1gYWkXWTxQrXRc9h9tXeAEUQ\r\nTmPQqToor7JhEEjwIqkOYX7NIr/3/udaLq4=\r\n=3jjL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZkC31aazQlZJnUPdZA72MNCnXLuyRdv9YpHlrdYiQUAiAvt7xHaTsxfaIfQxWzFnQL5dDJ1oeZEvMYZ5uFvg969g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.0bc47ea507ec56cfa5c18de423bb746413e8a033.0_1648479984045_0.06825637874060297"},"_hasShrinkwrap":false},"1.91.0-canary.1162.e5e1df50b94146e96075add7c658dbbc3d97d200.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1162.e5e1df50b94146e96075add7c658dbbc3d97d200.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1162.e5e1df50b94146e96075add7c658dbbc3d97d200.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e5e1df50b94146e96075add7c658dbbc3d97d200","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1162.e5e1df50b94146e96075add7c658dbbc3d97d200.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-FAuw0yhmbZHWuCE0EiL4hv3FLnCbs5JDfXMa1Ufb1CkgOEt5KUITVhYMD8kvUYBj0//MkY55UlhHE1wp83sv0A==","shasum":"ecfade448ec178b51f549f1a9ed7054e964da423","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1162.e5e1df50b94146e96075add7c658dbbc3d97d200.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQrSqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH5Q//eU/oM5vg/VEUyzS2pjp9ztNabHpJSHNRmR9mqE2HP/ELMrbb\r\nnW1x8lTWwlJayEZAEypdLLUK3Fdl4FyLSNEyz9yB21B+ZwfXAg90Tn8K9N19\r\n/+Wr2NQXClC+My384TXBFIQ5P7uO8saAp7KO2hmyBdqSo35DBb5jRj4Mhk4O\r\nwScqLH3oJQlmR6StZSHVScbV3XAVIJel/HgDeAnsBlTwrIE0hwWU1deNsWJx\r\np5NaEHR5/4fNn2YENZtaLKBBpJ4UpeFtPjHhgAMCyMiJZ1oe5e3dTOF1qX7u\r\n0/Qaf87D7Tq340W3+GOQHPTdHGleqhnAA1cwP7YuXzNJyx100QtQkFjz0NJ2\r\nczhWoIhxQXfei3jBkjJeeeaDe7pOORnJD7F2Z+QEZutwo2NdT66FwSeT514Y\r\neBwXecOhYB1Ger+RjEhGu15OPLVsnZo1Q1Hz++GMvln/2bTw15/2agIsoLDf\r\nFWMSgfKW+ipSfCsnP7N8xuwDL3028xTWtPEekcP3bExHbXBkh+i6/FTHnM7M\r\n+13p1tumW0CjslkY8kDU8FzXPLUqO3iA2Ef6/yk/1xqwOyFzjbmFmdUMexm+\r\nzP+5Rd/ySoB42VgoR1kX7OlsrI+KpQ23KEBuKX0kmVstRnIJxc4WevoUtBaC\r\nx+Z7PB8qnDlQhQ5PjdoD9xOHjDq/8RN6dcQ=\r\n=ug6Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEMNxqxoMi7p7ABhEjBsDlcdiJ3aGjVMYedfAEvWlX3AIgUSYFrsmDBRVpaAaVeOp5Wo8N/EtRZqXhw/pwA0v3WN8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1162.e5e1df50b94146e96075add7c658dbbc3d97d200.0_1648538793789_0.021776948324068846"},"_hasShrinkwrap":false},"1.91.0-canary.1164.7e4f299732a05640997571ed06257fea837ddd3f.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1164.7e4f299732a05640997571ed06257fea837ddd3f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1164.7e4f299732a05640997571ed06257fea837ddd3f.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7e4f299732a05640997571ed06257fea837ddd3f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1164.7e4f299732a05640997571ed06257fea837ddd3f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-dbK9x0YfC5toeHbD0HOQtCj97pLTDNCV0nXargfByf8e0+NHFQ6yeBos6R/WDSenxbDnht1Tm2gVZXvRLh42IA==","shasum":"52d502d7964e0aa6886ac02156139004730bf8de","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1164.7e4f299732a05640997571ed06257fea837ddd3f.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsmdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowoRAApE2D44Fz5dR1hpb6Hod9/mMzCFHnhp/MhxWzQnGZ1DvnWxnJ\r\nF162AP79yDOzGGVzJhNpWzNiLU10N8X39iEdFdZe0uUkuoiHP4DKhXjMRipA\r\nqHFqRULz6x87R95vmf9qisFCEgBW50unhXtpGfuNJ6/Klpu8kaLw4riUeW1m\r\n4DVm/IM3/no+WQOB4VoeAlcjGe32Kk98qxmlPwJVCYACqJf97w4FAalfZ97a\r\nltubFbVDl04SBi4USPYjk0ggndAb//qFCX3VX4tYLlXQeEcepiZkvPkgcKPt\r\nKbnbpq7ksSzoI0QyYpCbEe7K7xxCcxJw6PnNXWlQFqJgR4dxqUZwqzCD85AL\r\nw0EJrBU/KfK3z+/fBxjntvF+qM+MPCYzcVTorIQPjPPg2MyLha3ayuylg5Js\r\n4koGd5f0NQteYb7VrLuJ8EREiIWLo9DhUvTM5jtTgv2uhJ5lCJ+wmCjn0gil\r\ngy107lK5c9Dv9EVGauJwaAfBoZ3bNpSx67cxkRhD0NT/HuzLkvr+GyBTQ9VI\r\nCKVNJ6R0UYUbc7+rzNYOd4emYTLRN8gbyhgANTVh5trBPU9/zcaWIUV0c9hz\r\n1wv1Gc/16EpbBpgm5Pl7Edy8+7C8F4GgmltGYHJG7pbRP+f79LnWIe7WOc3W\r\nj0hfQPKwWowPIMQhmFJSe8QSCKxVn/FA+14=\r\n=H8So\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+ysVBkliVTQluU0QaSdtlLygoDi3Goq9vWq3EgspohAIgUWSIEFKu/ydWrGODY0Rp/8NWfOMl7y7wuIy+xdRxJLk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1164.7e4f299732a05640997571ed06257fea837ddd3f.0_1648544157594_0.5461082893254565"},"_hasShrinkwrap":false},"1.91.0-canary.1149.083853bbe7c49fdb6865a3c6d099f6c49a3a17a8.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.083853bbe7c49fdb6865a3c6d099f6c49a3a17a8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"083853bbe7c49fdb6865a3c6d099f6c49a3a17a8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.083853bbe7c49fdb6865a3c6d099f6c49a3a17a8.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-YMrITZpqwc+Mbx2KTHxwdv8l1K+iBJziFpYZjPKC04GYpaXMf/nA8vppm5PllUdofirUgl6TjpwHQu6IcHtUqQ==","shasum":"d190334238a241152104f81577381c16c15b675f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.083853bbe7c49fdb6865a3c6d099f6c49a3a17a8.0.tgz","fileCount":916,"unpackedSize":2534585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQspjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZAA//Sz8abd6xoXIiFVrzJGZCqGaYUSqFmENx/6q+v4xfGi6WxHmu\r\nOSJkshGfMhTclWbpgmpUD1+KHXHiX3kBvfRzXiwQaeQnV0f2w+qGe2aW38Ns\r\nAuuIyC0okjOjrrkCKNOSLkWkX1XCEYVM2aOS/z6mU9POYvabGpZY/tqFbZgF\r\nW/YM8Eo0bR9+wjBWPLlKXT3heX6KWIm40TC3QAZoNQxZ3opppJmo9ANfRrRs\r\nLrjXhmz0DEe3+s/WnaeF6wjdM/J71860PNM62Wpi/Mxa+dGecRGU0VejC9rL\r\na394AyEuR3Dh0+YEySglxV1w28W5xi1dAVsL23v3T8do26ddEjJR4TQePC2y\r\nrAcaDIIHw6eU39d1wExgHdgE7IXZGyOxSrp6EcYS4GGHLcg9FWHg6QPfw84j\r\nP46q0BWdCp4aafV2m70YOpvXmkxnrfHqd0b2ljdra9Bu9zu1oNt7pBVKIhaU\r\nl8wDouGmMd0NH844wrYxiWKkxgKTMHWmBpSSTV0lKUZ9Wseml7bhJlxKyuM5\r\nr1o50tkzq9iqdFTJxxV5aS1QoNQvw4TP0RKUGEQLGQ92y4oUe0IJk+A/lVfj\r\nBh0OKOpAR3+dHeaBreCYf6dZALJmBnOJQMdqX9DsBQgULg64+ni58tk/eyuw\r\nPkr333QaC/XtbeEPZZmqkjUqikNmCs0HDg4=\r\n=W1UA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6jkQjsQSkQOLZPyy7jSPToyBaTwOBHtg/8vtrddbdNgIhAP7CTm8fXeduMi2YzNp1av9HftQgbXQyHwX3z4RgVrIk"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.083853bbe7c49fdb6865a3c6d099f6c49a3a17a8.0_1648544355283_0.9576274454971023"},"_hasShrinkwrap":false},"1.91.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"77d24390d53ff6a65d0647d31d8bc56bf9e8ae35","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-GapBiHr5g2jVRQZRs+5rqr4+1pOfM8y+6LT6BU9g+t3ah/372Z6FLSwBYneIq7JoMbJqJ1FgeNuQrjjUjesOdQ==","shasum":"7ca1b8bb3b4ed1c70dc88053419d431cbf6bf257","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQtWbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqR5A//dOzB1T4pzFImKs/UAFLStPLpNxlAi7QZvKM54rSe/KWL+MD1\r\niEj7J8cfm4ElHqGIUHvG5SoZhZstGx+B48kbdoQQNOKt2sn5H5Dtwe8vaxbD\r\nqwLNX9dP3+k/8GL0J47ruVCA6YAcfbU3hbs3nWjndz0+cQ/MbPvcBynx6r30\r\ns/TqaelK8v6ha/uFlUMpSc71YGY1/KE/RINVZ8hrZx8ciwYonDpWpYGOI0zf\r\n3BxXsCAVlWMiz7PX+UNfw0XqpeLbFoWD+oV/v327QsW05ZQ94uUg7sAmDcoI\r\nR/ZbEuvv7BLr/2jwEbhDHuyrUBJ/dJKFoQRqLzihd+nu3gnDwI89xQabMIut\r\nx7BXJAqoZC5SztamRTviVqEyN8BJ/GRSA2SSDDDsnEMpPlXF1cpWqwMhWRcO\r\n+BLGJs7l/46Eqi/6dwQ6ZIgYUJYi1rSkaRzFVlem6f1QLECY6iLpZ3/7GJTK\r\ntUkycoX+3kenspaEEHpHybXEy5CwIr4TtlTqPIVGJTaRatrH5ITcRPA7hSj3\r\nXeKk9Cu6wuzK5WjYlACb6v8lg7mcyYtG1fmp2jVJNPNl+LEKQngZ1ZwMVVWx\r\nzbt6YUV9PZbBwuKFWqAFhMvwtXqAgVLKEk8WR1xvpah6gT2MFvHa2ry3V5jq\r\nk84zVQ0jEqtWGmf5+uIcW9cSbuaS1bX62cE=\r\n=FgDa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg6G6bArYE0nW3ZMpvKGBWMmaO2RlDX8uMkNqaBNEMyAIgIa4RxZVSttaulNDAtfvYSSUufiiaUkcA7AVu7bPAOSM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0_1648547227503_0.6694368230092671"},"_hasShrinkwrap":false},"1.91.0-canary.1165.cd437c4a733188e1cb37d5169d8081ae728b527b.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1165.cd437c4a733188e1cb37d5169d8081ae728b527b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1165.cd437c4a733188e1cb37d5169d8081ae728b527b.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cd437c4a733188e1cb37d5169d8081ae728b527b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1165.cd437c4a733188e1cb37d5169d8081ae728b527b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-iQ51LlviSD3oXIGA+9ySSLMjf8IKvRIDCI4KPYblS/I5SWgpB6rDGsOwYZXLF3UaWxYeK66zfK3c5jlifAOjqA==","shasum":"3cb2dce31a3379c39db427a2ebd90ff2a0936017","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1165.cd437c4a733188e1cb37d5169d8081ae728b527b.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQt8YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/3w//Ty1fO4PUuUsdaO2ed8olsBn03XB3nlR5uhBf3Fvx2TlqJznu\r\n0OnI6gISF6w5tni5A/Vd5kGeN7FfNcBfNeqRyYkpeYvByq40wpCgBR5+MZjc\r\nl4VIjPA1nUfTYntzfE8R/2SXeKwI5Ko9j4+b8rTNzAsVBVMwfLd8M8+kvJ0D\r\nKfrwwOSpisON8q4U2hJjezrxfY/U3uFSZ8gRIhRTCcrXzwZNdKGXcmzC0ROY\r\nVLHdqrH5qZNTTcP6cZ76JEq4dY+gH1S4XMcYKx3RoGCtjSSTs7wQzFzytWB3\r\nyBalOQIdlyxwyAaJcLG0Jr9UlCvym4ngYxK080JB2mNeIipyGwZd5zU62gfl\r\nrmjQsWeSL7ia0YkYVD9fFs/K5yMo6ZDNYs0+oLTyncJ0WtkCthkZNqB6WD3P\r\nCcBBc4OvnIvoIj9WXWK57n7mDYNJtkaXPReo8/6jI6UdQxbWTKhBylumTi9R\r\n/81ASi4b7Jx4iuU4zFJGN8B7/h8gyIrU3GUsioD6Fw87bvyl7msttOL/9g94\r\nuwcYOe7P/de6KQx3IVW0iKW6jfW83TbQ8bqY6SmRMNfkAtdG/ZbN4VPxxtVh\r\nyzlkqUy4WU6ATwy12dginEy35LuBWLMN9KWiiDVR0LXucYkNpWyA/x0iMKlu\r\n4LMvcOycNsXlEFTfFfqL7mVdc0IQpSNu/IY=\r\n=rytt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFldfRmiSnVaUvs68afPnvM9CHzuPov+ZLdP05CuWjHvAiEAtX1E+55lpaYC18SCZL0Xn00l+qvi861FZ7JLk2Gd1lA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1165.cd437c4a733188e1cb37d5169d8081ae728b527b.0_1648549655954_0.046173417772567005"},"_hasShrinkwrap":false},"1.91.0-canary.1166.a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1166.a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1166.a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1166.a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-DyezbUq7dk8zLRaSmgJ/CFee+JPyQnVPi/kIOeOlGJeJ8zm1YvF7dnEg+RMbd5451qDHthYXjg60X93kwmmuCQ==","shasum":"9bf1f806388eda6bd1b55df8d96a8a2abbbc0fcf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1166.a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQt/jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTWQ//Z5E0DvKsJGgokyhen+wvuCT8bWIF9HW/uB52ZNlrL3SOEnx0\r\no8mqnIB8HZWUxb58zJMhwJaPF1EfvqmQfAYqtJilMzm0JxyNfedtMyUEaJse\r\nne2yjkzjcKBKduwdjtsiQFwu+0al+qnr6o1HyLRki0jIllDucVgFHZg/88QC\r\nriiKP0Z0EC0ym8BzGKPwzDToZFCT57ZYPslN8ruEF6GbBCbkNf3PPZE2nPkI\r\nmZYVcJRlienvhS/tBDluv6VXIdL2CtHEkLbhe1J4HpWZfSGr7QPmdyF5ZBz+\r\nXHXAX3PKcyf4BllfSjHzzlP5kG+lbJAL6znRziwzLqn5CISMgprHji4juATj\r\nHfhVOzu3Y4JHrGKh/BW9NZIZkgGP6fVLjter9xRLSycM3pTDNN7G7AmDFDO/\r\nLFtWTRNoVnzPrvRO3wAxBuEGb6l4qzmMDoo8pQo3fY7w94P5D0Ae+9G/N/iz\r\num0m5reVYiL7fbJ9kClT6r338bHcT3akpKtL4a9KqCX5QOoyfMOY888H7pgu\r\neQzbBSA5UMam6xWRsxxjOUUBT6k4FDqs8OPO3uB82hjclwHXc4RLflSZaOwt\r\n3qGSe0O6AHvECMrnA96EgZCRsntKrGWErKTip1JLNFU9A5fde1j3O+Tgl+Xm\r\nB055cyBXyZasNgVOX8hDWJUWKiv9uzqZkM0=\r\n=k6nL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSftGkSUIMDOrsOOi+cvioxrHuZli2ydXsql9EU7i63QIhAI+bjWglMP0+5ase1T3rvJPdSFNFiovofP4fRDi0eb4T"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1166.a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f.0_1648549859679_0.040600107200896796"},"_hasShrinkwrap":false},"1.91.0-canary.1167.9604cea624a10dcfa524da75e7c40d8322863198.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1167.9604cea624a10dcfa524da75e7c40d8322863198.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1167.9604cea624a10dcfa524da75e7c40d8322863198.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9604cea624a10dcfa524da75e7c40d8322863198","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1167.9604cea624a10dcfa524da75e7c40d8322863198.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Kxdocvyb3GOaEaJ1N2xGZ3A4w4OHP0ZmlYThW9EnAnAWoeNO35zR3wHDh9RvQiRFLoBWBg4zGm0rT1A8BsfDig==","shasum":"f62e53eca11346849ba40f1c7e49ea27da9f011a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1167.9604cea624a10dcfa524da75e7c40d8322863198.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQuW3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohiBAAjGL0CmiBrQGvA7v8AYwZ/EbYuSNQHQ0dRAB2JE1MNCbHcZ+B\r\n01qIto6p2ybvxdstAfiGW+tOKRHorQkG5zsLwtQ1aOxq3D5aVbPot1SVv9fG\r\n4CuCRk40Gjglf21P2jfE7qfMbmZx3i3LI4Ucl3GPVTfDME+aEgnoFUgYHCfy\r\nVGjbN2RVPrGQTLW4M9K0LNebX8cLc+MB1E/1ZbLycXipYSRzJbXNUQbtqQ88\r\nF7stFZaGgPOuUHtR9eQLT7bBB2Y3nRYMobfJlspw3fQ7ecAwjhxutkTbovN5\r\no20SbeDFy/AkqJf0hq5/1X8Z7Ii0XuqIL3GxpzoUvY48uMKkcq+Dy+rQu86e\r\naFdbb2uhNonVizxX/F/OBih3l0muiNzwuYOXrXwTMb14DidJw/vpuTn5fjBf\r\nD+aeOjFP1Wjt4EDdfqaZkV3XPp0a+tW7cRpxjFgzbrF97nWYl3KQR98FSILW\r\nPFO90eh4fzie6RS0zoe0nnGugVr9bkHYOhS5pl8JBOjvrZfSsE6ZLakq8Sg/\r\nUaQ50BpNWatfbjbWLFyScfkuTIwZhtndfRbzcomiAs1YRZOaQRZTs/z3Kkbk\r\nhWlV/SUnwHIRMnTDgPzL6Tynlyf2A4rpassrKrvonJYS1PHyH+yCUYXDrP6O\r\nrHw2rdNyXJ8pSGkEe5GUM3Cm3vRs7bl1EsQ=\r\n=kbqU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeC3FOdt7Wev4dJAF28/wRmAQlQ1u0or0mSULCnM4bgAIgJxNuQM4cmiIXZcns4Z0Y7jW32Cb+7knYxl0g3CCrfe0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1167.9604cea624a10dcfa524da75e7c40d8322863198.0_1648551350918_0.29020937389972423"},"_hasShrinkwrap":false},"1.91.0-canary.1144.d23fb3af90b2c8b71784afa26d3cb91ed927d119.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1144.d23fb3af90b2c8b71784afa26d3cb91ed927d119.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.72.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d23fb3af90b2c8b71784afa26d3cb91ed927d119","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1144.d23fb3af90b2c8b71784afa26d3cb91ed927d119.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-FrRN3l4S0DryEgRwe7sI0HyKPaXVcKU5DoEUbt1pagosTqSoogySygQQ/Kr7c6OS9p5GL9bixwEcY8Wcurvpmw==","shasum":"232c9913ee206557236d9ef434afc5e5ecaf8941","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1144.d23fb3af90b2c8b71784afa26d3cb91ed927d119.0.tgz","fileCount":944,"unpackedSize":2631558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQuxwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdmw/+O3JA2d4KpX2hd+ja5H7h6GAh6Gtv0f5ItcDoDR4u41lywax8\r\nwA4HiwMgHqSrbJfQNnoLWBKfsXmbSPB9sAVpRcw0CcrUnSVyJEvYVI54r8pv\r\nFvOgKynISwy3Skx92SbD3SraTJRgzSXBksB0hGEEwAEzc9xvWon7QdKQY5Qd\r\n63tzuPuz7yaBUN1bvqlkM/p9MXFCGgKQ/s0HkGYLiWfhpn0o/vgQeGuoVl+i\r\nTLq0LtkvKP/JBHhgKisN2qIt+dSbwF+FMVsVOCGhfSh2y8vsvllXTrgXN59C\r\nkpEKCTWicn7nkCJElnr5nFBBedEaSoYEzDwcsNJz3xN1jE6xgbOhbRo69pKs\r\nsGOUMsGYiEpgqqKd4xJC7UdDRuv/MhdYaeJylDajcWEOYaRZ/r5QlbTmaGPu\r\nAwP2jqW+sbfh2zh/bf9uH0maxBim5UFEXhjGViMgZ2SpjcG824HDTThTLWQw\r\niD8gUYtm1FJhI4yCqMIRT+yNgU0OBtIF91/rSqKFz9DHMrBY1dRymONJkjVo\r\nIIqv1fmjMpj9pn7dDtkLPIUF5R/fNnOjPNjq9u8Jv0Rt0sU73GJEUzCAfwPU\r\nvr65fCr5G+uWcCBepMGGTDoJEMrhHdwz02dfeT+ymS8hWY/X17jliZytL+VM\r\nV8xDFOcVu35NuMmL4FLyA8kpn3ov7xDg9rI=\r\n=BRql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoTh8Wjj2fSzXR64I+1Ok/VZMlHLk3Ph7UeX9KWxc8WAiBL6u5qmqfE+cBEZWwl/W1E7tAZl311dTMHuCmfhrnl9Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1144.d23fb3af90b2c8b71784afa26d3cb91ed927d119.0_1648553072434_0.23358936810442854"},"_hasShrinkwrap":false},"1.91.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"20e585c09957f95d3f51b13b5ba00823a72559dd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-JuD5/O0FGfk4zemgDQa4aQZndMsNeSsEdUcwY6QS4nkp5N8T25RbYXieM07YvImn7/H3UAC+lCwVanYA80GQhA==","shasum":"58fc9c23b8a701e4b9cffd30075524947e2768eb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQvYGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHjA/+JPakwPDwsi80SDSACeJSDrc2utxqqFuM3rqYjhGDFPWhRtmf\r\nLQLUG/JMczy8lItlDygcYS9pcDhJ2Phc+dgYgQAf9gsT2LXpxD5qiz8/GrNz\r\nBxkr/Bpka5LTxsCw79Hju57J901rMVUQOjXTdjcS73qWyXURWLgkiLx9+rFZ\r\ndpAboL2JJRkwCTQ0pxdYdxOlCpydpuBNWQak7JXbHEi072b6OwiyBqVIUw4E\r\nAvY9+Gx9pTAU9SFOv7/PmFb+/6MSfKi+QOrXaAdqQRDpV2t1LIrcStBC3R3e\r\nlUi8ba0PgZbFMTorVCKO3oAxHJpeHgd0VYqsmMo7kPnX6e9FRCtkdaAC18hO\r\niaQo2j5vbbM9WberKivA4cMA0/R9PH4WmCBTe1og+vlv+eiLEFPkQEt0HKJm\r\nPecZrf6m/BrQAe32smXGvIv5RRf1wjUnsr6/hJYllrHIE9WDYSr+zHPwwaKD\r\nsIgHhdb4fPMjB9l3XJgJ8ADIzMTDKjs5fBQ/SrdhwQNHxmQcHL0q6EKSOaaR\r\n5mfn5wKaAOdCNaPLmKQYAe7AZMlmVwgV2w6cP97tDYazBgbhwpULM8PV51ni\r\nyJtMuJPr25h1Ls1djk1B4U80yG0Pj4/wIRa3t8eA2geZ/Wk6vnTft2UZKd7L\r\n5bgES3XRYHsVBzRNiMymoXOGChc8qcW27qk=\r\n=+1pN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjMj2Xxn6iDeDcxh+oBaxiV107b5VmdoqLw+31mB5oEgIgJNOEVOS0CI6ZnHxFvNKJOa7e62zGTMhF+e1rdSV0x8o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0_1648555526409_0.13828221018967035"},"_hasShrinkwrap":false},"1.91.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0a83a00e05e2adb6cf2255869d77a86df2d9fbe7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Bgnozv3c9IDys5cLAcC1DbzhYYK/dDoWf1wgx34pWKtdQyy/kh2XIGY2FbUJEaG3gBzqC4QdpEZUlMe/y/jQew==","shasum":"bbef937380e3a9265a8bc35834c6a0dd8fa9595d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0.tgz","fileCount":916,"unpackedSize":2534750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQv4qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz2w//aub+YEyHZ83HKhOg9LNBK9lO6oTfNYp5ejwckmpsmAYW7l5q\r\ntdKaxUUntfxiIf4hRDJhA5N0QfwfZ/nNomsxSMXYOzw/N5+YC5sdArU7qagH\r\nageXat3X/vtirvzwoBJ7+FhhdxCJ4ab8Ih9/Rt7g08OE59KRiMhUqMrRowwH\r\nv9cgA+7yyTbzxvh9VBeHlejLcj2XawGzxOqSilILqAEJDinDG3RrRQMSSGg6\r\nRwdwMsRKIerRyC5TjlzEJDuB6IXTALqTMMXCkhMjWPmpcP09VQgP5XH4bArZ\r\n/kSbVtHS4oevLx5tei0ADbdRpKfQ7Ac/FiJR82knJEa4h3QZgiTKac/fp5i0\r\n2vRVjfoaf7APFUsBZTmUm9c+wfoSF24so2WAJDPRGh1LUEp0qK7bNh6iNMSs\r\nakwKqIW7I29ukLmfgk8HSUDGoRE3uDwEcH8Wu4Dgb4OSOqtEk7oWgeK8L3qF\r\n788m0jEgk6tWR23xKKU1PJ428ctgPwWPf5Sg0ZA4zkxG8GeaR6r/+DNTitOA\r\n3oSLHnV0vPG+HXBOvR7A3KYXq6COvLTYLC88z1ndMYZCMOaX1LPGFsMgKd4O\r\nuXvaYs3BccGf0VeUxg+5gBGfMsG2eJkJrZfOitPyYIGgJ0urtIzxwNusPGe0\r\ni0cmNQgnIqOvC12F8nBQqZWeLKbVhN0V6ek=\r\n=mBTe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv2mTNuMopA78aTGck3RFsmkDPgYfSfEsyz90ONz/hZAIgcsyOu71I8TAqRW6fAQegPP7BdcsKKjxWMXEZt69c5io="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0_1648557610539_0.9295727510524763"},"_hasShrinkwrap":false},"1.91.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f176924f02b0c5645982774d25579b1750406666","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-8D9170TXhiLXsioynQ4BDHA6s9Mj6CVbkLa4TlR6Fz7qORM2SiVQpGNaVOPoCc3u8PpPJuVk4L60uoPishR14w==","shasum":"83c1614caa5601624b0ad9f6a3d443bf45f3f001","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQwTHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL1RAApF8YVDZrLx2ngNnJz9M2ZKtGHvhJ9WV6iBJNSj6lfK4IRCMV\r\nE0LXRup73tRCrfSrIk8R7N7rAzTFHfyTHF1OYv90kGyWuL6GApCEPfyn57i2\r\n3EVMTGguXD8tSmIxlG6JyGWBJCJ+2bV3ngBUBYrAJQDrFykGdX1YLoLr+wBl\r\nAyetL2bPWoE4LYChfp89wenrOFGd8jqkNzCjCm8CXrQ/guOcDdBBjqNC14O/\r\noMd1k3/4aE64mEA92anA4vuhZtWhvaEUkc+fnz7fffODxY56OSzCsSTqJUkF\r\nVd+GKjzgucSFlXrLtNoijFOLTq1x/sgkTytJzFJ+GKUSMfzFTMUNPNzGZBZt\r\nb7fF53BEwR66Oz10mI4/7Dw5pJo8aJw37z2Rgf+8kUA1YludGNFTsOov3Yj8\r\nDNVW3ULe6eQGW1KrIIvFcAh2HSLaUvL4ixD3xI4Gn0IL6OYYqi3NIvVYjoBv\r\n1RycMiJZpBlkQ8Vc++P0y5UJC5tH4cRT5Hl4RcpJ205KoofUV2S5/aLd7NtI\r\nHG4co+hYAqLrWww+vyO/zyQWSPRLDYlBrc8ATv3oR9nyKbQMB0Gudl5yFlI8\r\nEcs6UD6VgmwexVfvpvTmDrj79aAy7NOjT4TOedxFaZumDfjsivyTGin29grn\r\nAcRSPtZWGPxhaN+tAKnCAN2dMYLcIbo80L0=\r\n=0V+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDeBUDCURPNWm5czdpoiMP9xW2BukTw58+pJurr3/BBVAiEAovEBNsqK9k2MkYz+X0jvOnXcIfBBrlbSeKPyEdvqe2E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0_1648559302969_0.5510066375931932"},"_hasShrinkwrap":false},"1.91.0-canary.1164.aa99f6a129cd56296d09fe4537f0f7ada9fdcb95.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1164.aa99f6a129cd56296d09fe4537f0f7ada9fdcb95.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1164.aa99f6a129cd56296d09fe4537f0f7ada9fdcb95.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"aa99f6a129cd56296d09fe4537f0f7ada9fdcb95","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1164.aa99f6a129cd56296d09fe4537f0f7ada9fdcb95.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-AJYXTyOZB0MyGMm3pXL7XMIhnKXppxREfUa4DrY6GnmabmX+MytAtIypzSlhOCj2VUZdnkbDpeslff7oh4x2Gw==","shasum":"b674a24b0a394f62ba80f789447328dd3922e652","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1164.aa99f6a129cd56296d09fe4537f0f7ada9fdcb95.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ/PeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOGA//eJsvAz4WFA3xDSAJScG/a+60E8+inDAYmyovngSZXVINCnOH\r\nsDgDRPU/j7buaeqq8hWjPfKAnVaU3ZHrOCCh3TrDuFm5RX/ugls6hcXY2M9g\r\noTrDoflnpQ7zMgkKmN0MtJYiFQGScq1JUf5dBeL5zc2VosnM8kjxjmmhIgD0\r\nCuzcqFBqBLqVPXjAUke5BH7Uot5WqJIAzI7Gpq/FJmrkO68uwclVXf4p4h7+\r\nBu+4a0R2W8JWaoIi9GRpfKwYmShrUzIUC4HyOk4VN8CNnD40uc+/jcaSFym6\r\ngBMkWRS7uG6oat7G4vcsObUvowkkjaGJY7MYBMq0ojn2J4ntDGuij6cs33ht\r\nY57xX21pUWYR25aV5qCM2imQ7/+aWtK/vSFXbkxMc9VFOng5PRLQX9AJD6w/\r\njH4CmvcE+NVrbtxFefzeUrtMBmXng8+yogin2B85mR4ePVFJ7TmmG5P+la2j\r\nagyDUrrE0EFO7XzkaXC7oixH9B5eUfkRyxhC4eCJzynD62nQJMhCSSUz6Ops\r\n7AEyD9XFJItLqTRsKwrDhUBs8iAsSKS6/OiFZQd74BFOrBpVnsk52KVv57WG\r\n2AAS5m1g0xklXBgXga5GtJVZWRsDrft39NfErCWYFMKFqtcKXVgE7HPFm5nb\r\nXRnolM43K86r3vHOBf4z1HsFw0SkvqEz3UQ=\r\n=Ywph\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRXxSNws3EKCIgGfAG7KeLX46UfS4VYTGK4+9D4b1RYAIhAPGFBFqciXOrf2ijkKc6bfLZvWdcISVXLNSFPp8+autz"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1164.aa99f6a129cd56296d09fe4537f0f7ada9fdcb95.0_1648620510382_0.8656673168326363"},"_hasShrinkwrap":false},"1.91.0-canary.1166.eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1166.eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1166.eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1166.eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-joti7d+gIo8a4ggc+tN88UgKgA7JFpJCsPLqIm7VovCMMjSnXDHqNBFKbWcCvvi9uuWcsh9Cd11Qj6PgfjVguQ==","shasum":"da800a2fa7cdc1c378577f9f842908d0993a0826","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1166.eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ/WEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkXQ/+P7FoEs8C7Hu4qucO5YuJ0nIC38YAkG3meyhwdztEit2Cygcv\r\n1eoXrfx7jZjUVj79l0bLjbAHQyqerBxQxUDesw61e24/kX8MLz66YvftXvF0\r\nQavge9vwNczGauNpxXN2TGKLR6ZqY90oxWae3XDgOhhNj5lDlwvvzEnddLUR\r\n6RGpuUlR8G5C4Y8HOpjpoYH9Y/B79E7AALbnd0y4BGi/ni7RRhCgUXK8YiYz\r\nkH4kd+n+mzgVW7BtdgBEQguRQ23CU/UGSpMFdXMOsXGrHkisYpjzRZo1vgti\r\nEGp6uPC32Ny/RX+PCZG5e/NrqWjAVLYdaroKcNOexw0prsMx7ErFc8raZYvf\r\nMS0vjJXBVNVbz4tt/s2FVAPz19VcbEiNeMydgvKAz9AzRD3Fq1wIDHmbl9T/\r\nJ23s7eUf23HdaEb6pV9O/m5hB0BhKI/XJrzaZtsQeesotfEwXgApJmhdLXoK\r\nu2KvxefMLv14RaVzCD3PfAM5/taosICCFkxN196k6fGgFxpkANVMLNDfcfav\r\nhZFrHeGztuohMkJLn+Zh3YuUu2b4MwX6zICvoHP/nOP0wtB8zdpHaSfG9tNg\r\nnDd1ICmsHnWg8wH+x73zWvKD/PftlEW9RwBdVQT1HYXmPlZtpAgC9yhV1TRw\r\niWanl87tCRra4nLXYI08bE2eddaMc10HT0E=\r\n=XaD+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe4LYH8a18h2Ugqn4xxTy1/tzdfn4h1T3N49LOiv5dqwIgLKcCHCypQvWC4kHXm/BrnvZ4eaMdUdguVvH2PNAw4N4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1166.eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa.0_1648620932442_0.7559300131424582"},"_hasShrinkwrap":false},"1.91.0-canary.1162.1f1e303908c1e798cf412e3caaf55165ceb6fa5b.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1162.1f1e303908c1e798cf412e3caaf55165ceb6fa5b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1162.1f1e303908c1e798cf412e3caaf55165ceb6fa5b.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"1f1e303908c1e798cf412e3caaf55165ceb6fa5b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1162.1f1e303908c1e798cf412e3caaf55165ceb6fa5b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-gvUuB1gfMuI/y0Sfq0+++KxHNl16ZsfPTr8xgg2L4wPrX12qsHPH9qXQ2QUX5f3gp/j6X7tt9/MgUSRgRtuGyQ==","shasum":"4ef36488221241b526d7bd2c26d124b047f59e74","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1162.1f1e303908c1e798cf412e3caaf55165ceb6fa5b.0.tgz","fileCount":916,"unpackedSize":2538032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ/wmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGTA/+OHrU9udQj4GVGqGNHr+ScqzBmMN908wUkQIlv4ATHyXkAIcV\r\ndL4UWj42c8kE4EZpGQccXpfHLhMd86COOdzw5RwPpFXj2WKXoPsLdh2+oamf\r\nwYh9OX5ICBZwbnOF5Jo/S8vyINxQHjECu71LZvQ51Lx0A3ryx50fAXzgOMMC\r\n0TKkANDXzodWZZHRTqTfpkpE72jpMz4Z/KXBbtkbqt/ZEACfyFky4iNIqPkh\r\nIF3HZPnosBI9EpoE2blhWnrvz5zHWDy8IellMaggE/edY37grJqmtpVmVumh\r\nBpAlS2Aa3eJ1BzxB+Lb3gU2csM0wn/dlOnV7R/ifRn8KOGhorjtq6iRXyiUt\r\nZWH0anNAsI5XyW3f4VY8iUgL8ZwFkQffY6ax9mVNJDn4g9HQj1mA9F7Jbrkz\r\nuz6k2Thjbnb7uWzvPmUBaoBFkhuOIW179GDrzoHiCAzKMQC46rOZNrdtR3nk\r\nccOReKY1Rj9SKNQHLnUT5ltVfZulijRMogMo/fvSbQmnSq33Iv4V2XHmpQzc\r\nWmV48ndqUUoMdu+HbCCdPfUEl3GP/HI52J7hrGheUwmeYC3waUU3MCEAKesB\r\nCyusxPTZOJ1g5dcAXVIsXo8/lXSKZsj5nRw4mqwBnoIpOh+W82fnNOcFT6vv\r\n3UT8IXevq/Hiix3Rlauq6ns/esijzXmfdxU=\r\n=YvHE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8GxfiioHFe56QMbMww7cZxrTCHz/cdUB7s7LA4Yq8DAiB/IlL9kpFB0Bca3qATcdp3/5XNODd+f6ERhULnwmcHmQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1162.1f1e303908c1e798cf412e3caaf55165ceb6fa5b.0_1648622630531_0.6140670435229854"},"_hasShrinkwrap":false},"1.91.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-gPM58pC+CgMvno3l1XBz02/LvFxAqBOFeDSPdK+0KGt0Npq2nDWohb/Xdnw6dNvtEYjCG+Y01+kDAIKvukzqHA==","shasum":"53aac2538862573e7976e2de238c6350dc4719ed","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0.tgz","fileCount":916,"unpackedSize":2530452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRAqKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBjA/+LS6s2kkvdmH98mOO1soPn3/0a21j+LWN9jgrYP0gcM6zHnbG\r\nvsplpje8T5Qvj+WDE8w/3zRFzjm7wvS+w+pp60i/N08VpEe/IyUFwlZJBH2l\r\n1rK9FfWqwcJW4api5tJRjX2oMPxRZf2j4WRGjLY9YBDvYQyT98QFBHFzm6RI\r\nPuej/rQL6HMajPGkU5ajczfo11pJdATPR4AZUWdVa1PeIB6xt0aI33zJ4Ykk\r\nJ+P/OhMwJbb367VYihOrpgW3yYWH++m4YA9Gt1K+g8Iu2ldYrthPDpVhsu5Y\r\nkKszPW8vdZaoFLxORxzAhoLcWl3ETkxhC8SD67uSbgPTJejr3t5h63LFaUWv\r\npV7a9K1xDHV4aZen3Y99gX3C3VcrU5hHdn/4V4cfHwNnKDB8W2v7sXrkGg/6\r\naZmBQIWHEitSCr69Q04MkXkOszLcRoyRk45BIiRuaa3XDT8KbT188kmS7Ct/\r\nRhuLJJoJDHFMJYVztKN51o8ClYhPHOMt2x1dfEFYABvS8oA1JpcxULP4Ygzn\r\nM7jtRPXLIc/OSXl9mPZNscUXDOZCKP8EhJpoR7xVjDJ1xMoyymoeWYvc61Sz\r\nTgWT4ZdWKrsgpIgL2VyK/1AoW+LX+6oLal4DNml/WtlLQyjw4Etnfb657942\r\nhAqudmgOFp2RXT/XeokKN/uawGD4cWie6cg=\r\n=O+FJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7Oi/hpHnhTjHV9QUrjEzW8Ko8p8iOFvrBPYmMjHn5dwIgeJxfaEimSge217U06M6yAT9Qe0AO9yCPHp63TSl1fUo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0_1648626314201_0.49974207597131604"},"_hasShrinkwrap":false},"1.91.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6b9fd31946c8174a6ec8b79fce7a1622512ef007","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-2+jTJ2tPHt+Zsx9YFZl8SitsrSRMr5Pc3grNoVNHZegvKsw2PbXfdKPIRj/VCO3uXz11nRUzdd/PoqW/4XuJ4A==","shasum":"97cd21b6ea6a1c206f5286e2f586f037dd9efbf9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRCnbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1DBAAk/dPxb+scGsRZmK8cgmMBqjDEh+iPWIAMTuUgOcIZZAk5I40\r\n3SXnpOWFAtyo3FzLKHAi+N1xBV6pOBisDJcTaeYh1dv5vjQsHvf+rRCisFmt\r\nVZAH6LAVIsmm210/LuyiTXndHzgzJvbibqIntLYUwgiXvNyv6jI7QypJCv32\r\nCtyiVD+Yxya/7TO4tpaqRHMQVyq5Pvz2Zfk++izNEfv2D7YyQHkn3MPenGQP\r\nmIc0VtrCru/cKLTHzIXlY+ITD2Sh6RGcvI8zTocDD/msFRv+vArj2E1lnCBw\r\nm2+OzAlcWbL8T7bEJY1HjhnloOb7/ReZf3Xc1T2RifpeI1c1EziTOisZiuLL\r\n2axq0/LxDFFsxhRDmwKLvkKiI/RNRS9dwwY4qolGN8qGycl2LIx+5OW48423\r\nyH8UtYBNz0PzgGV67trrVfRkZLpLTIIgrQYqDTVSyZPW/Pt/36AswE8nMCx5\r\ngHJunQk1M/KHPaUb/xesqZ59himSE0lzsIG0rGFYcgOl4CMCHLwKABCjPbV6\r\nd1sb5FZYoG7KAjdXQ1gTh+eoTXUtjXj+kNzpzMQ3Ew7/UTEyvAwekkhGQ5wq\r\nsvn2BE1TWBomJBKsFyHFq1veCX71SC80oW0VTzHfJycgrrnHlwfqMK/Fml16\r\nQ5VgxDtH321kcWZMqotvTAlb8Oytv+ueXRM=\r\n=2GpQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCw+ApNCa8s+S7ef1n26Gpxcm7kXPEj9XYHxpqcJrxxeAIgHWmwVkp1Kh8Z5tBy6qLTVAuIq96g2SGH+MrMPvPLNWc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0_1648634331728_0.7819683910257176"},"_hasShrinkwrap":false},"1.91.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"a649d350a8f9919ce5957f6a40573f82af94259d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-vpANDBk1LLPIdJGLkuOUcvvRek4IJjWTaxkUkOF3+n2lT3L5gyenotdKBsDPJcpL76c8SQURAFIf6CPFg+nBRA==","shasum":"918201c9c419a111e8c686a4a88561d9af77fcf0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0.tgz","fileCount":916,"unpackedSize":2538142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRCs3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGHxAAoM8cb5jXlwbs6q+B9s3r3rCFPACJC9D00x1xuAeqmmeH5YFF\r\naIZdE3BUDoXJZBjxAcss3WGIIix92AppYqcIZ2OFZpsEUjLJMVBR2z6l4qVV\r\nc99g+q9a9xPrAb8FRbcd5I1KGmh8EFG9Yx4DXgQEZ7WXUMf5b3mOANS/ylI3\r\nbeE8A7OO3VPoOdlIopxK6RHVptqLislO8L0Uif3+MudlIPy3mLmV1Be1umwT\r\nKX+asJ3J4HN+8/nHVbax11GaUdcawT8DVwaEfXT6WVeyCriC7akBtYs7dMb0\r\nJBxIlQf5OXk7DwGAOPHGEPx1gy56Tr1uDPr+gsthcjTDOiIXO68MkPvG1Ebn\r\nQpLMZZ6yUEnxfh2eTJeHRcWR4PNvfhbR299Vuq/T8li+ku8onQ1L5ACAOdoL\r\nZbU6/xTM810ZedfLsvbQwEx4ZcupyE49SffZXwfDP4+LrYvf+yGuFMWs/tR1\r\nOsSmo1MRkLJ0/rT88OOnuxkMRB5Q3UohFDRtGSem/HJ0dCiP10L6fnuBukV+\r\nrd11dQgfVLmV6j8UFUjmqe2wUwbfgGWvNqspUxCF6EKwGqwjHln/K1Yq13W8\r\nf2WIRzzrudE8GGVm8boobXzAJXD80D0gqjiNYiZZKunMAnPAeWtr6hoCPO2v\r\nqsRzA9faK5sw6CJeYdytFwQQKpFrPeMR1AA=\r\n=c7Ua\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqoRRDaaPlna7dPErcW7NQjUG0Oc1SEaKXnoA7WYcjzAIhALH0uVdlWoYorJ6y6JG/m3vZX5mSAJqpwOKDgSmSB5/g"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0_1648634679752_0.6944372691271603"},"_hasShrinkwrap":false},"1.91.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"22116069902a725a93870063673aa0bc4da66b7c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-xrTnGaW1evk9TQXKVa3O9QxaXBX0roPYJ1bEbJJdwWDFZ3P/tuoze92LkejIw/edxamkFDAzPV9D24VC1GHaFg==","shasum":"fec086b836846eed3ed958052e0de7dfc7bc58b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0.tgz","fileCount":916,"unpackedSize":2530452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRDJMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr7w/+KU/6nBPSYnjRB++ET6OuLbeFsX1jLzRLhd87mICeO2kw3jWk\r\nlVdlPacxHr01P2GAxSqDNHC3xa/rIHjQJBuYm0qNeZxW5ZzTIDjUkmKnX/XW\r\nNEhDC5Nkc+JpFLQ+u1FvNRA9jqAo0DQ9/w3mxc5DIdk0TIuyjDmb0hQyPW30\r\nZO7m2yOcNZz2J4GNZpRQg4GSUuNkF3J6CJKAqFC23mJSymmDc8TmBZvc8Li3\r\nw3eFndp6ZXFzvCQTdPQrDN5K7/dhh5M5br0ZWPJSu/hlXuqac1cf3E673qqG\r\ntkX8Of47ihT+8uaTaXbczTnOn5SzkPacUO46s+f+N5HxW5Za1NW5t0JqeSU6\r\nFbCGwGFmtKuV+6wR/ozb6MdE0Hjl9fWNbXryr96q8nojSN5sqDniGrPYrb3/\r\nGllBpaQXk8HniQSLAz+vYH+aPEKOVhmU3tYnq10W2etPu3QoUjIvTWnAWSSh\r\nCrHPMOk67KRZVTAATr2MYWoBHV6zFE5gNxGaCMFLWtjq7vpwkoo/NNxJuawi\r\nMTkq57UM5lFgT2xDpuWARvHVDJ81oLjFx3XoGj+vN3/Ts92QGXidTdWhM4oa\r\nx9qdkSHWgsSIzYlfxl70gmo5dU+uy8JBBu8LTG1L/Xqqgcka3pFdJn8vrGPQ\r\npBBQli8T7YEvydym9je+77nXUcUeN+fTvvs=\r\n=3xle\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkmqnCQdzMDY1Zf+g8w0nw+BU9AmjLNz1gprEqDYgDtAIhAIxgaF2gvwQsY3E9FafT1GcrrZH29Tx4L/QQS3HIxt8W"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0_1648636491838_0.2021700997784157"},"_hasShrinkwrap":false},"1.91.0-canary.1170.177a82779bbbe302c495876abda9ac7965144166.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1170.177a82779bbbe302c495876abda9ac7965144166.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1170.177a82779bbbe302c495876abda9ac7965144166.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"177a82779bbbe302c495876abda9ac7965144166","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1170.177a82779bbbe302c495876abda9ac7965144166.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-MGx5vs98JkzCOwZCFV+c0yJuPqr2RmZgbYU5Y2Orw7SotK/xJKNbXX79Ap9HouqpYN+MpiH96Brili38Z90wIw==","shasum":"8c4f6656549411b2bca2601bce4c8f6b62647a8f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1170.177a82779bbbe302c495876abda9ac7965144166.0.tgz","fileCount":916,"unpackedSize":2538032,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3919g6nlS5IuZdJDtZEfgZSIH7EkqykU8YYiARhEscAiEAzJ8YTrJD+x2RQCTc0K271NTCvMU+OzAWuwiIpLETlRU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiREOzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolaw/+MGDEhTPn1rBQtC3YsXg4YrmQABclmqf2KIkshgt5MiWhM7gZ\r\nO1cy9zlfdRM51GuvD6yZfiRDtkfvaxq2J2ddd5vqhFSPM0oREKDMPEsL7C4a\r\nn9LPLwvB7ozTUX9ONu7ES26RUDSdr1JVrTSF4kxVkYIcJ3vF+qyNkF/XgKA/\r\n7VC2Pmwis0/wv9zTmr1ye0BcdhK4Pn/7Wp16BT3ovGpV1IjlzEyil59rJ3pU\r\nwK3R6kJN7AbIDYYgZQwGMBnazZWKucPYCmTOiK3E26/XodV++bg+VFInqsr5\r\nZ1w40Fj3AO2rdP9khlYadjWJIx2m5/3WDJ3yPAl1Zl6FOcMpBUK0LOEjn0H7\r\ng5cGLjYGNvu8tUV2/WgHRoXPXvELwQYp8uNCBWYtFkMpD+FRcGJkvuETwj2D\r\ni6zCuUXx8UxweBEuUiS5KYbtCTiAJgud7yOTVkEl9eHBcW9CoYSjWZMTdvl2\r\n0T2e1oxw4k1NxPxKt/xgsLodpa2lBMbn+ZBk++ITa57bZ2Iu5zoGe0ouBcw0\r\nXEDkMC+vQjKVXBmTEwRBfSr4R8s8NUoKfxnok1yYvsJStaDmeZSwkQmxAsZZ\r\nL+nUXn5sFfNhaV+a6rRFou4Yr7OkqjZMMvREK8uCoCqRA/Jxn3VdNJku7oSL\r\nqqvGXAVOKXL8geTd3YqQVmUTotbjVSoqcJw=\r\n=UkhK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1170.177a82779bbbe302c495876abda9ac7965144166.0_1648640947022_0.2750918034754197"},"_hasShrinkwrap":false},"1.91.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-2o8gbA4E5IMcbFUuTn03KoiJYnqH6OwAtBMDrB1LYVMfyGW6T25CId4TvywC5R/L4uccAw+npxoYGgGzZdlTIQ==","shasum":"2c6e6a6e4ab76a61346e2f2fc79165d7fc8e0e51","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUmULOZlylo72+sI+sAiaD+1tbGQoLmluRCnY6KE6S+AiAupwPDrW+wq019seUksJ0jqGfwfYEdepdOONxRtaWIqA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiREnOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV4A//ZZR4dkGjSye5Y9/p20h0GlaR2hrUnvwiIV33r9AHUcceWUM/\r\nUyVRXCXPf+JBMygKcu8gj9neGvXa5FMCQNGkuiHPA5fmvSIVb31WC3WovQvo\r\n1yK/7wE3qtQMMsAtl0w0oUdQs3NJ0MEDVgp2Tu2A/E8CvrPb6oSFtkE/8QeF\r\nQeEyWIHw/xwYyaXHPE7PgVRPzi7aWl/NtGJk/m8ViAaKc9uQoGeMjwWbuVru\r\n1uvgIHRY1SG+8ka6XDiinF0hJZIbkXK9NcAMgWomtyjOxtTHZN8d5s1YkgN1\r\n6r40OFfw8+upmhpFZb5qECF2x3zDaZC5s4MrhYSqn+FepPwqW1QFdv/bjtXv\r\nmSjT4X8fl+4X3sMvppYXk0IgF+ddf+TTgaNs7dyP7umsP26+Lia/BNoQQjWt\r\npzX1BEJ96SpeYAT6KEOF5+AmL3+UaLCaz+fB7Du0/G+oeffIibUjRPbbuwqp\r\n6rHYG4dx14vrB0veL+V+osOHM4aNCEWutAoII905CUaI0tED99b/pQ+PwgPT\r\nQvxA5fMrNFh1R891Mulj20djrAIp5sXyF8K/1uWapqkzKonz0VH+ncf1bbqT\r\no4ZJfCZgKvlIU7tQD3uOFIoeIm30MdjhjE+eDX7URrLKYLkaKYFr6U3tvkYJ\r\ny7VEgsg7rPq5610tjA7+GJgZkd+kXZHllKc=\r\n=qa+1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0_1648642510593_0.3953714807020223"},"_hasShrinkwrap":false},"1.91.0-canary.1162.c62d7ca41e6c2a0ee4b12f349f43cf3844f84090.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1162.c62d7ca41e6c2a0ee4b12f349f43cf3844f84090.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1162.c62d7ca41e6c2a0ee4b12f349f43cf3844f84090.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c62d7ca41e6c2a0ee4b12f349f43cf3844f84090","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1162.c62d7ca41e6c2a0ee4b12f349f43cf3844f84090.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-5/mUSg7BTuCEeFTrmLAyjVJ85tRvm1+c7reo7T0orb8g/1bnbPmy4HPAaCHVWLXiiNAk5VV4nxFTiaKH/tVHiQ==","shasum":"eec52f99351549d24ec353b710ec331d74f9b16a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1162.c62d7ca41e6c2a0ee4b12f349f43cf3844f84090.0.tgz","fileCount":916,"unpackedSize":2538032,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhds10KrqAYC6kQV2tMQgXBSWDbMPYWNpXGnnYIswcWAiA7OzFYVpyWjOGVJCb73X8Ukz1YEdcevEKR0EfSKbfPog=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRFltACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLoA/9EMkenGdphH3+h5+37cOqml8qywS1mWeERB/T/tPB5SrE3Ekk\r\n07bsbFsPRGdbCwuufhIBPMYefDTr0B+O/p7G+mlYHWdLoZMM0KK1kY2UUkDo\r\nG1gTXAbUPYbz2wVOR0eRXAPyYmsnMRDbRrNjIHEmiPygC3d2ssE2CjThaFxx\r\nunq/zJMnlj56GlGeWTRcZe0Z49WlXYOPnZVUQieoTdxZ8SuL6oKvYwwNBIc4\r\nSLMpBauSN3RG7r0oJBtee3SMaWFjOyebV+zX8+Hu5sx0FDLVFJBkngpFKjSh\r\n3lRThYJzzZdtBzJwPN/8Sn1P63XhEn/RjkmzJxWFkuhH/d6nFSaKX3cGcko3\r\nzG7+6SqNnczFSJL43qAypTk2Zn+J0CxvkCkz0qDerMnjCTtwylf0k7XykAbF\r\n27DVcDcZkZ7u1bXCWQeJApxvkQqr/eJSIuDs+m5YI+F3Tj5DVDC98Blu/nlY\r\n0FirAGUAFJiXnLju0QF1jCaY/Z9SGpAidfKVsZKm5PWgUzX7UkgHm9liaYfe\r\n6QapI5c+FusacWmmv8f6L6cTnHhke2NsWjeXYmHrJWPEaoeLuoo/tksR6n28\r\nqr0bgEv3qnZuodX7bptApfl1zLnNZwqYA+/dAUmK8aGg7FzTyIS/d1j6/5df\r\nHMEKizYT/VIV24WYYvGAl/bur4sUyufHt2Q=\r\n=ziGq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1162.c62d7ca41e6c2a0ee4b12f349f43cf3844f84090.0_1648646509169_0.4845542786835695"},"_hasShrinkwrap":false},"1.91.0-canary.1164.c60e8646b04b94770ca88eb290dca7040245a66e.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1164.c60e8646b04b94770ca88eb290dca7040245a66e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1164.c60e8646b04b94770ca88eb290dca7040245a66e.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c60e8646b04b94770ca88eb290dca7040245a66e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1164.c60e8646b04b94770ca88eb290dca7040245a66e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-kji5To1jd7h930yt/7APmg7MGHrz+f4cEnGtIbwK2ShxW2CIRIuzgER7x0oO7i0tmXYc8lZ/IPzGF8eoFWkEng==","shasum":"bee2fd013d125b5417ffff9f6350cc316f0ff1f9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1164.c60e8646b04b94770ca88eb290dca7040245a66e.0.tgz","fileCount":916,"unpackedSize":2538032,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbvf2Cti9F1Ek8aj4c5rRhEyNl8F0+fxw4bms5f3XrJAiEA/cP+UNIezvtKnyaJ/As4mWkRSZtdYd9pSrUthOmctdI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRFr5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpafhAAimbBEVS6dH2d/M+1YN1kjWsDfbvUepL+zXTqWN2PTsPqlUJD\r\noWF/O2Ltct5cgPZ18/hAFmqbSF9Lls1WeBooAYkpRATiag3JUlR+Q6GnlNlr\r\nFNi9nlz0on2e5otEW7VsE3cZbIxYtxIb+n7JTcf455TvdLQJV1UsMTlklSZx\r\nijDBBjBEgMfNcj4yRu9qpnMX1ER159R2nmpSNT7zUk9U6UiWVbGmoC8gTLIv\r\n0H5bcdkT6826YgUUPuF2njeuejEDIV5Y55g4WBHyJJlSLhcVaqE4zK/esG8T\r\nXhyiurv9dcgvVOrUhV5KCn2uux7IGweYNNmsmqDnv5Mp/cMxVP7PnyX4CScZ\r\nL5kyCHqpo1imPtKqPQqEBbu20c2aFZDZd4Gzo1Rd+equInMnM/VHwadUxUUy\r\niTMVKW1nqvwcdGovGVzF1EAQ80hjYd/w5/iiX7cyojXOzfOwR2GvaJWOKKC3\r\n9X7uy2jOMcfXx8fjcfY7Ms6Cu7iUcR0L6RiL5dbLY84cRSOuZlp+JQh02WzD\r\nvnuj9EZAiZlrC6T4jvjTkN0zs97y5n5ZNgCZRUgM6yg6KDLP0ULraj+NwAv7\r\n7sGzKsAizJamLZK4ivxWKnqNXIM0+F6mevqYbNsyWeH0C76kbUM7VGEBwMmw\r\nVmFyLbSJP5kG6gj1N4Ehw0+5HEz6YdiIHLM=\r\n=bHnf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1164.c60e8646b04b94770ca88eb290dca7040245a66e.0_1648646905189_0.6382175987224992"},"_hasShrinkwrap":false},"1.91.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"26b4f8339e7e22a7e6b5332c9657aba70c3db435","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-SjWKELT3pTszpyLmwjNV8bxjREssEuRbbemeusTUzln1Ez5KFLYkwy2rlEuzbW91TRfNKOVp7KsQ2phhUD2qMQ==","shasum":"fa0b93d4ab57a266608a59e75ae72c059d541c96","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz3zKx8UpBUevgX5Qtvpvd0UXBkrsNFibl3Dgwa+YXkgIgM7zk0rWJzeYPB5ZSfNYWXluLDtmF7c84WQUjmwX5FA8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRF5aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd1w//XayZNRKeqy8SC8hnMUU2e3NHW/I37cYJDhEms5yc29f++S00\r\n2re6ZI/H1sR9sd7SwXCjYSdExbx6jcZipBv3EMbuRYigo6mKxJu+fgzlwgeh\r\nOncJaueXjR6dtOvBByO2dQLca/NpqaMeCLyE3G3F3Xn2TjN2UHs8T25ssKGd\r\nfC4zLHaaA6jFv5P1cxLd1jzHbeA3x/df89AT2lN7cZIQlZHSrAvmqAUcza0X\r\nkgMDY/2MVfWidEf/wtVu/+c11xqkvWI22Ze8I6Qtg6R+9p4ZaWNarsBW7Tjf\r\npaOpWuFY3IWxp1FxxkRAyGlOJ6GC9LNSnAjrZYDfU32AgSIaCupyt0pWG+il\r\nTuwBfogTa7Ie7f07jNTxiH38HMqMmhd8/ryxh75UH7ve79OB7JEuGnoyoBhP\r\nX5r7YAtjLdnEpJGwvh3sV4gkQEFt6KJ2M6HpeQVB8KV6DPcnapySVT8+St0A\r\nfvhnuP77i7OVx0sIi/LKStsJZDY17hI9lO78vWcasw3EExe1DEWVMa+Sho9q\r\nm7EiznnViDFZ/oTXSr8EVOhyiyIT+N6mP6S4Zk6Z9Yoqoi6wSA+TS/YvqCpQ\r\nX8Vzm8r/MU3X9xH0QX48RwFiBajBFneOgEq2zqSS36Zvd0h1oM9XiVknWRwF\r\n5eClInwXUvAQ875iBiGa6J8SWX/XGJnbhEA=\r\n=xxqX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0_1648647769905_0.8882140663860434"},"_hasShrinkwrap":false},"1.91.0-canary.1165.d4da253130216c8f89cac689f54584ab3f763a43.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1165.d4da253130216c8f89cac689f54584ab3f763a43.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.53.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1165.d4da253130216c8f89cac689f54584ab3f763a43.0","@sberdevices/plasma-sb-utils":"0.52.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"d4da253130216c8f89cac689f54584ab3f763a43","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1165.d4da253130216c8f89cac689f54584ab3f763a43.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-DOGBMQ6Nt442baGSfHHIK0fT3iGzdFOCiglEiz+0f0DbKiANsNVGiJjyIQyFZ7uO6jUStrgI75mD6gxdWH2iIg==","shasum":"4ac44ebe8e655834c992f27f1bb3f104bfdb1919","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1165.d4da253130216c8f89cac689f54584ab3f763a43.0.tgz","fileCount":916,"unpackedSize":2538032,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdmYQVL7Nn8Y4GrlkKqJeQ5HkTDtefRGCcBiLKjvNBDAiBtM7ANcPgfKNxh5Fa7GfNy9UcuKMEXt1zaxR9ve2ejMQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRGDzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosJw/8C7oOkRNrrO5UFjccyfmLE6JCBpfFCOphmGiod6xUCL9HpOYW\r\n3KtRDtLBWjl5PgJCDIoouyxvmZTpvNsqZTb8HwDZ9o1t1u+IqSEBLL6RjKxi\r\nvZdw+tQp5JosMmx7KKkUL53jargZxIHipAOfe9136tNt7IiLcDDtWANSVUbM\r\nbj3Y1kSrBYjojAchggih0bCQjQSMMonXVXLGMa76U0zEV/CCtsTgr2TGfr1t\r\nnxjxqlgWNuMvglZ8Y9N2nzQ2aWmLvPmDW0Hna/0vttgeq8tb6BzrHg5oQuxC\r\nzPj41w6QMdaPrBze75V9uQHVit/NSRzr9OlJnBM3MT4QvF4bYvOUqSl/53z0\r\nPyaTYW/Zcgm6GWTX499e1gUFus25hB6PwSpBTQnSHXlCN8/Ajd01kfuMY3pC\r\nc+bQ7jW27GXFtKQIo3rPt3D+N+F3Zb6cLtzezKQ2DSnh7dHaT2ac0X7yA+no\r\nTc3GiYV8ji+vHg6cqX9ZUx8AYmrbSYhuufG6ddWw18onc5Ak7ols25/9N8u+\r\n8uanzHNiptbnCitjygTYp3Uh6ZV3TynR+1h5Uv5e7k3NDVmLwywYzuSpHRnl\r\nS0erCBv6ItxjaueAQ6w2bFelbOwYFlMBXn32in5QJUDKQ8k5LmClSEsDI3N5\r\n24oeMF2qn+cmONxSf/02ELZ9z3762ecsbkc=\r\n=RYyy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1165.d4da253130216c8f89cac689f54584ab3f763a43.0_1648648434843_0.5576612307376303"},"_hasShrinkwrap":false},"1.91.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c8a9769ac3ba802855047187ae2093455402c373","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-6V5+lary9KapHv/REZGXdc7qNW2vltNu1vZQ02UylvtyTdDDQsKhAX6MN4SSKYlH/EmBFzWx/hvBoEGPt5rvbg==","shasum":"de652a01413a1c4572b97eabfde257b098f78382","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGEwM9LFL9hgO+DUTpdU0kQgZ8l2bp5+13p0lL1BLAEAIgKc/o6cD+TLF0h5YJ24pqVg23AaXRnz76FypnD43LCWU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRG7QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqclxAAnLaF0c+7nRp++EVcmuf+eZ5FvmGBpjnqGZlHtnPeSps0h/Ey\r\nps0S+1xYXZ1XT3mC6EDdbDYRjV3egRTV1GC61CdknUTsGSt1YZ2ZVB852/aC\r\noO3GiiCLv8F0/T9ye/CAYYXU7qavUgtBqN/m7rISmg3wROiHLnffRRBJqciB\r\njo1k+VUVrHg5TVyNgh1iflvGM/Ox4MBIsLuIjARLUnDvWlKwwafeDVCUEzZ6\r\nDs5hKZt9FLOw1StHCGxOcS/pabRn8DWN2dNjSTyVpMCYxCgz9u6j5gyYAJSA\r\nziUHWPnyE5AQ2ucYqOThDjo8YdZMMuSNbxa7ucD64itjS2fDX8vq+91owPOx\r\nlWz66bSMdtpvOUs3oExNWQC716+vyssoMqyx9hbRzj0c8qm1R/Z7mO1AgrOx\r\nqsxY33XiEN3F56pgG527T2cyDqDdtxhzFcS/kxmdFehp3mkrR2wfUYwpaQU1\r\nQusbqxbd/P5f1EzrdcZkH+I1wuRz1if8C9ZtYjd1UcbtYTRTlh3913IMdWrg\r\nsQFTWFEaxAq5Y1eU2G+RwqYUKQFC7BkRG1H1ymwfi2pcbqa28Q5oukcpR9Yz\r\n4+IRs7dlA31RWOxDrRpVJMXsC5coPVqEzVrUftPdcM//Eg/itF9AIQTVsFUc\r\nE6WVL0bIDdYkwp0SkSytmly/xUyLbhIIoQY=\r\n=t0nw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0_1648651983984_0.9680852015129258"},"_hasShrinkwrap":false},"1.91.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"abc20ec7819c821f9f78fdc4c9adb2a04df07499","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-JSS+08gvNoLB6QMDcW1EgBkTaVXpdAllC/AVXaIncSLhzcdaQRjN7haOJ84poxvF1ceXmGqTZZBQRI9zqrFnmQ==","shasum":"16584a69bdd41a68c327756d08efdc5cf201a8b6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgFjcaUH0VAudCcz8fhlZJga9JbAj2qq9Qr9Nto+/KFAiEA+OYv1zxXVamrhuRU7LeQ+rw1cYNa5hAQTMc3DWtODkg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRIBTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Ow/+OZb49gnF5nzh5dNFsiCcKMMqQyTyOFYz2DHmE3G07N0r1Gzb\r\nDlLfRi8EzqQVyXJru+37Hq2sgMAjmX1so7PNDcRwvG+KQe+cTgnrieTf5HUf\r\n4oxZyHiwo3dSI03BNem+dnK254KLcAJT2m2Ke8Vzcd/c5+RffHL44psRzdzb\r\n4aNT80iw+k08UGSOWaanNX5gT9Y2wJHvLnfdkz5STXtOti4JP+EcxWXdThFd\r\n+Vi2/izZaRLlkoykr4whyk9y9GaG7RLJVy2+gcV5Ushk+QYY6fS14QuNldM8\r\nNhk7OfYH0sewOx0wxa0I3NdA24Rgl3ngQumIUqyHryPl3pdTng0lC2/aRj0M\r\npQy5CA7L+8ofBcKmnS5GWPqGjoz95Rde38CpLiCLX3hCAlZV33Rvf5vg8KTB\r\nctldA84riuOf12O/Qg24fEm3EURiag3MYI3r8RCwdRLgem8Hbh+mE0MXrEOP\r\nK6JXmnoxdmXitSOPZYxHESwVUjTnQkvrOFO2jvWUKYlN9CPWKoyQ9ubtmQSA\r\nZdoe9HTgBlo8FrudqLRunul2NoRNWJqBKznMbJ8LZKvpJsxMAJKaZ6zdbpXf\r\n1lcFMu7QQlc/bDTHpjzYdXujsJbrZu4zQDBTMqE+aGtD/ytnI2ggcRec2/o/\r\njH8W2htU5bmCfW47EGNUUWdtDRdjVttAyZI=\r\n=5xbm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0_1648656467598_0.11140081414299785"},"_hasShrinkwrap":false},"1.91.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"6f4103142ce2b41a18060d7cd94481ff62a0ae71","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-1DXjhIZ18iSM4KpmUV7UT3n1+IR2ilCSF/lMKEHnVps9yb37sGVI5lIDcHBSH21wf6XXq3OMOfDGrfw9G2fgJg==","shasum":"f7d0d916a1d77d4e26de4b702eba20f623b6bb01","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9lC4QjV698juy2IDUEmtpq0y7Muc47KC0Scsy9K4+pQIgWb6HRUs8rB+orwNI9j/o+ijWMeIZlZUr4tOI0W6aaaM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRUM4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg1A//TkEosTZMK8bjLKLDcvRsQN0N61BQhhROVZf7MRdrVWXDrLWc\r\njVcwKl8mrtxbA7HSMuY0rdCLBz2XMydqMq0GyjOp44/6hvuq7E3HUkq+uY8S\r\n56PbLwXaalm+E5HiHH/R6fZc2YswAmXg+L7nQkzQzY/HInXyRbwiT/HDJYi7\r\nR8qvciG8F0rnqwBjKvEUWg4fKSvJTHYOIPDMDIVYf67foxn9ylo/chac3SpO\r\nzS9UFA3dtyl/kdA1E7gKKYDE5mPHxx0mwDdf7b3oh7x1HboFw6M/orbuKOxO\r\nnx4YWgH7TGWg1PCbS3NgBKhh1YMn0TNgFXuJkPxruYktyJH+54lsYTJFCXuA\r\nX0P/9jCn5I8JoaV8yfxYDJUFqJvwUnZkABe387Lirk/i7+iSE6bryPkp7g7E\r\necfVtPW59Li59tqmzYzZo/F/CRoR6qzUlJ+9XsvIRyRsSH7hEUX5L9H1/fil\r\nQxwMdcNmVcIV5Xf0ygsWj7HvOm6FF3KEi2eVCWjQE1jMEMOC3lU6RRw3NLWZ\r\nleFE7QulaOHWC9XGk3aSSax8QHVjsD7/SPP/jz3P5NgdHAuf2XnGIWxVejle\r\nXtcM9vrq+rCEWbPCsIUsQ9Dtphmlte8HrvkHIHPGnf/XoB5MPUydLHWfyQE/\r\nHDtE/8IVMnS4ETD5mSByOXDtc6WTZJtjBeY=\r\n=/4YX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0_1648706360128_0.0746185527539509"},"_hasShrinkwrap":false},"1.91.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4f38c57a727015468d82cab9a1ed908fc5a4a652","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-asYMwNu3kgFafkH59tiCVOvJP97Obvyc+TaGVNysXIDl0u1WK+xFg36H4wGSxH3OTdEioBb7HXkmFMzTovyUOA==","shasum":"8533a56fee1af4a66eb201947e349aea8bea30db","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDFs7Zze9JQx2oooZ1Vz1QcoNyRbvrCE2vipPxW4Sv8gIhAOJKgFH8Df1JwhnwuiftF4e2ZZ/0J0FUezOoJZXKB9rK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRUhqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKtA//TG02iPMBgNsYZ6ztkRK+WfXw6vHCT2LayHhnV57nHXRlAlFS\r\np9RCw7RwkEvSER9Xp/voiiZvDwEU2tH0bY8KWvtnTStBGn9+OFNNAYsDCsPp\r\nT0iaF6DoFzGU5Wur18dRUGn4rFRgeQtni/uUXvRw8NyPMOEUeapkert7yeEw\r\nIoJfgDBdyHI6NFWHTHz8ADrodeVSaOalSx1AaSq2doGoR9DiWX2+XOLyBJGf\r\nrcWvj8xU3XBIV0gteJWuG/nM198/dLfCb5c+6hNsOXrg8Pc8h/HN1GPHzRvM\r\n12bnhFqHtr1Vo7oa6Zul93Hpb5uP1t3iG8MdlS143IqGgk+yrGgJ+SSJnBSI\r\nYJfpB65T4G3h/UB1/hTNpnKbr1RtA1TollHs7aLukEjvsmhXba/np91qpAHw\r\n1iSTV44Rh85eWWISZqLmO83+sJilVw426Z2VQT2YGGJxYuV1sjKVLSY+sreu\r\nlRPlohL9yUvZACluPU2NC2csVCVNBnUHhxlM6audE2qHXAWqyoI0nuyKWdoz\r\nmIMKpv1a4wtW7FeUN9q+PDQuH3ax+yBoFAdTawOLhTxHUMn11tJz2kUwmIyL\r\nmfXJGFwz+RWFyTYm4PIRafLZacFnGJ1TukW3BfQtGz9EYTToddxsI2WWl2vA\r\ng7/LC3rzKWzNw/DYuhA1888s5l/IIgY4UHg=\r\n=ENJt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0_1648707690402_0.47389584886037417"},"_hasShrinkwrap":false},"1.91.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8470c7d21e8e322032c69068e74e78fffae11dfc","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-kRX392GtY3/JATJMSddVYk8BcgsPVja52hbQEsEkTCuHqH9PcKfCpmE4NMDwptBxyWIgsKXeFOFImzst1a9Sbg==","shasum":"e14d8b55142fc4d1e384afb42a68e89f49942b33","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbvs4GbXo3zPXcAdQ74zNQcRvC3KsRKfX+jFQ57jIT6QIhAJlixThS2PZvpa7qJnKKT+lg9811akrfgB2VPILnRUGX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRUk4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Dw//TUwMDPbTfAetmvJKgRcMEjwSF3ILvvSIygzdBPvlCXhEibmP\r\nBC9/TpbJVzzEQosaxwAY7i3+fKcrJXbzRspJwGutHaXqKirHUS6xp6YDKB4O\r\n7sxEC0TAdjGJxYheST39LCtkwOW7Trgz3K5dHTO6imJFVGfhya8qr0QD1Sz5\r\nDExKGBjiAcnmRj5ifkuolCXGZba4gVMLOQM9zY8fpAuUZGOJiUbyiU+HmlPT\r\nzXH97YOHsR3V1CL54c75KXDONOSxe7Xn52oFeeOFfMJUkZnwOH7ZGTZa637w\r\nK1gi2UAPPwtY19/JMEalV96RaxK4m2O/X7jtRBWxBfpBcludJyRZX1Mdqvoz\r\nBVREyFT5Ja/EyNTYPn+VfyCBQA7hlGfWNgjfqR9eipRYCfP2gcTO8BSKcHzp\r\nM5YRptDlcYjfaytsB0jZ+CWjjzBGqdRPIHUcB67mVAixyyV44H2bOKzs4w9I\r\n90FRuBXHwTxpp69pRnJPOaaFLpCgHLG+JgjETi8k87JNutM79+uk05vOreao\r\nvQ3oHz8pZTiuD5z9cqvyn8GHN8JvQG1xIE89sbijtkHylcp2Myki50NU6uQu\r\nYj3DeAm+pftGOu0sl8X7RtsF2pK+GSEwZDP9nG7C4CDRqbuv6FzhIfmafF0O\r\n3vwdCogF8VKEK+YskdotfptW06jFhI70FRc=\r\n=sGt5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0_1648707896586_0.27336115767993596"},"_hasShrinkwrap":false},"1.91.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"199cf322653db55230437fbba7e45fc5262b4964","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-PQweVosYLCj47GjfW59v7rgQYVDEtyV3stjjY9abGbECz3kXMRBHZaqJGIVp9AOdM5PeTPkVvYUIvSnCBHhBLA==","shasum":"3b0cb768b1001d95c5876b7d3e68fa086d3a3798","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgCrlqmXNw6ShyFqgzaLrZsfkUlI+7yD1WOqdEW6+PqwIhAL41PIUwd6c8RU8BAIcDPg4Mkqc1ayKY1rh+Xo3DOhGq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRU7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3nA/9GRuvVe/THPMcaSNkibkv8Z4LcLTioGbNsr4xgtQftETgWJlD\r\n9qF8yxSnJk0yiaNmwR96ERNngnRNjqYmbll8M96tyo2j7e1X+fYkQqiTSosl\r\nClkglNGbUTisEiIRGQ/GnaiLPr+6F6YKit1p+d8yq2kq5zLDvvgAHYtOM0v+\r\nve1/1bap7GX5I0PYXi23Yl3hkd0ZTAfwMf7FABRM33Zp6x4lpNGmNvEE675l\r\n7RHx3uf9j4xu/vBpLZeksyarCPmgthi3pjYhLdHHJtvIEV5+71EojsePDCBu\r\nFcfwvnbjJLM6oCEQWUmD5m7q1jJqBPSvh8BPmHirWTU6Y1jhlufsL0AzYrFD\r\nM6lzmo5yehx8VgB3J8wSMP1vC4rsLAItE2vMQb3JLXCeE/GjKkfYXjwpXh7Q\r\nlZVRh0/Fn4j0grlsjENGxz4QmwijQKNY+7k0QADYEaLZXzrwWIodO8zdtWMv\r\nuOvDInkxY//ihrcT8yx2GqDgv0RG4PepvEdSH0n2RoX5UMCxppiPvq/hxaa2\r\nbq1UhVFv+aQhjCMCUlGErv63muJMr3x5N7ok2JU9lR6u5oxpGSysGy+Qn3ku\r\nlFOkYsNJgpZXjIgIOkT7LTor+EQiRWQkRtbBp+Sr3Gp5VTd5wK5vN/ibwcN2\r\nnbC+S0jOSWNuBhSjkRG5LWWHz9JpdXs6ypQ=\r\n=7/Vb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0_1648709322872_0.8355900964783403"},"_hasShrinkwrap":false},"1.91.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-O8F9lPcpDfLgYDhhedhU+arEOY9IamOmZFO+3l94pLCvgLwW8/YuiE21RGZfuww3ezzLxGjq3MNFdXa8pIPE2w==","shasum":"953442da7ef1e10a4b0acd5b15b7d663ec8b157c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDRLk7EtBv0GuD+gQnvpHxXD997EJExQzzNSr/ag+DrAiEA/u6qZ6bg6iZEnHkT3LQijoWJnpmxJsr0hyvM/xKSlRA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRV2/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKow//ZBE0SXZnHCSwjIjx0KXbMb3mWCbLCRtPszYTvK5vll+/EFGD\r\nZz1FwgzGV5oM8RcaZVUDMV7JQoH7wvMtrFIvMksdgOnFF1JAC+A7s7MSqwZ9\r\nz6mGhBnanJ7DaF34PqtFMeYzPYxRFVrY/6hUpAwzgYrn4V/ZdCqcWQpRNCZp\r\narBER6dLckpAUaO2bsfgtjI2F6u5rVCNdr3vGktUYuMJmtysh/rbEVlUVYCh\r\nhEeKMUjy7ungrHlbulnHdSwwo69vYVC3JrS+Nf2QhREu2wo5OaPokp6wr2x/\r\nNh4zEE6HwRXvZ0BcYRWj3lnEe+M7Ny+zHLoR4Rb4n5gukJRZ2wR7zAkF9blT\r\n64dJWUYjN1z9kG/v25CpDS397EClY6ZZbKgvN8/56WjoSzlftoZmKayl7iu9\r\nc3X/dfAPUjw/2oURiphFEnPo30e+eKullrj1OT96FLcZ39mXpSGuBU7FFaOY\r\n0QW5TOh3pYPeS8tTC03iCNUYUMtMmp+nTVk3nZi9fzYogIE8ip6IS5VCppTG\r\nJrHj7qwDBHY5Jf7s3vT4sJiz7y6BojVoQIHr8dApRC/rk7XjA+egCtIbx/Cl\r\n5ytsyiZYYz4ad6iD6DQRmsudxzB1XTmJqlY85vcM9zL2cY3UQ/cBibiv0qMY\r\nqbm5hdcpmoDXLzASVXRU7KA8XDODuSHj/jo=\r\n=3rt1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0_1648713151271_0.8683863858839578"},"_hasShrinkwrap":false},"1.91.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"659669180272930120b9719a78cac22c6b0b0ab1","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Ts/jLTnpIpFh7cqKxXeZ5z0IfG2CyATbsrxPqWu/YcBjI4Txy849vvAoEfAWD9IZNxs+dmXte7un+4IyJ1FxkA==","shasum":"7d8e6f1521c696414cdf3dd9b92ec1408a00d825","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMSarc1UmJZrpsd2Sq+aFg3nxw3ei1T76oCGbNkFG6TAiEAzhqV/OUnHi9UrSzpk/OaiJj84qOMxTr+54QUGjNed+A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRXpcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfRBAAoROev+7rAzAPmBVEuDpWZjpYB2wBy7QtmT3xa+pEO/M7l3Ll\r\nc946Z2z1gvpyO1ncyt9wraSnCKkRYjIJ0OKsbAGodGD7hB0v1WbUXhCr1QRn\r\nDQBOiN8Y3Rpt1R71/xEIKlYN4pUPFcmuodkPFfi5xp6dJUqnOahKVDnAaFMj\r\nvj9Dpe5ok8tNJCRzLq0dpM7tIsLlDankawTaCxjs26ZYhK3NV4KXwWuFpZW7\r\noZy3BWIOu603WQg1+/ILfVYK0QPtxz/Akr7/ujU5Ne1DgfkKPFfOSJOA7hQh\r\nG6Oa9Aqgzcv1pQn/LYJw5MFfhRoyQCtELYyoUUT2KBXNCre1h7qlENAElGfr\r\n0zAw+8xHwjxY8A4LxwJvXhp6D9QLxQVekt3S/61RugP0x8VWVvSBpHNcS1dj\r\nSyctBPA7zkuPiXMWEvMSAY+nyLqFChv6xBgqfiW70RGcu+MAoMkO6l409eeT\r\nozh3WG4dCkKRjNc/rPMRN9s++58ziINTmnY/+kF2BQrkvZu/UXqeWNVivki9\r\nFRcvkXp5Ak3o1IS6lvmKLlPFgQfPPqp6WHIuRxZr+Ga05ALmfHulryWAa1Mq\r\nnEVJjlfk0//BpWM1yja7xpb/FrtKMB7FAv4VMgi0cSqu95+xZA7kOpQlLOs1\r\nfN+BnORdL09xXMIY1J6UvCyIA9xHHS/CA7Q=\r\n=rMt/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0_1648720475937_0.1279425279737032"},"_hasShrinkwrap":false},"1.91.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"4e625143d636e3ca257301e986a981eeb71de952","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-UiK2IcqEIHUUYhDA1PSIqAoxlz/3cKDgDIOu5dH0G60LxK39Sumny1PiY/G7ydFOP1xENB7Tn83ZdlLHOYTu3w==","shasum":"b90f2e9baadca851955a2a28837d7c98c9338dfa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDopAs0WiqyTMb144xfo4Q37iq75STvWGQZBdB6fSGMLAIgcmTR07hquXvbqiAgn1XXsOHNxVgTMvucOiyf6Z0237Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRXueACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWpw/+IjiKypXbQzE3DKw7e3hVQK1Jd+/3qFK1Ainv9gHIttKPsMuR\r\nwl1RR9agHxmUscuGZ1tiagEmsF/NyKVCS+Y4qtTeNYRQIvQKmkJ9sqjq8M4X\r\npNmBLc+A3wWq0/hBV4Wz/iR/agGI0Fsv5kNG/vHfKAnIiTWZ7e6Kx3cE7RCj\r\nWT0vCnxD9HEIVpdZ1oub1Z6p2a4Pa/uTfbFL44ixKKDmXmkoqqcyBnmD8afH\r\nc6GOvjvAaMXnXFtiQHozHamJQPNx+YnKto2uHoVvsC7XFfo/LtJY9TCB/J4d\r\nPe4NPNn21WaQcKL/8Y0F3fFtEP+ZQYWZ5VMg6czGoka/mMM35I4Q8sjwRr3a\r\nrphL/Ea7tkOt7ub4mtRk+LT4cDNBJQ9V+Lx9kgXn7Io286W7Vtc8lYrhDCTN\r\nwK8FKbp2Bij8E/TtJ1wu65S4af2PJZA7L3Ija3sc4IUTS1pb0w06ETDsJKB0\r\nvywJqL/E0dJld+VHR0wCRs9x9L9lNDvArK70zPgSla56KiTxIMK5s2Hcg46W\r\nvpVxAaH8l252t7YERlmof8T8+h0SSoN3bpKU3H9tXbiMqt987vUa4yt6lOZc\r\ndPTA1C8w4juqy5iVKqWFh1LiD4tNh39HNUL9GQfdPTv5NP+Nbeza7S9NPF7f\r\nuWHtDikSmV3wVA0RstLvDgtFlB0+svdga8U=\r\n=N3Mc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0_1648720798077_0.1346588445212935"},"_hasShrinkwrap":false},"1.91.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"76499e2774c10b4f13790d0f8b20cf561597f266","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-7eZvJvjdSnmhDYHtcQo7UUVCttNcmn0EQ7Iach4iY6PV0p5mxeZ3fgfwKSv8++2LODnZBry2trqrMFZDnp7ntw==","shasum":"a2e604090f52e4c547d24a9d96cc84ac39b8ad9b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0.tgz","fileCount":944,"unpackedSize":2624033,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0tWDbIwLjpnJ2DaXX3eBnCDJ6kTrB5u7mqYy3FUU19AiBfwdJSs9/KrygwRoeT+owzkO9JS4dCwbTcOsxipS3hmA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRZDLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLzA//cN2RqFYPhaHBN2Oi3yWZEIZ3Sa25HY/xUxJmIobFk2woUuGn\r\nUIOsccyqm0Zu7VqTmNJAJJMvxgZH/o9ItudThQIWuqf3mV+lLRMkkSmSs9Zo\r\nw8vXhsoe6mDnzRlVtMaOO5U98S+GWtIjeMfoGN02ZIpnWHXJxQGCzLUkBnOk\r\nxu/ocOkZwGVdeRea0aoSs8nO2xkEkVBSUBJcBAgYyrsTjyAzbCrLB3nATiMS\r\nfLoVI+QwCmOXK5MDPYhN3sxcdqNccZ4eowP2QrIlIli1zbbm4JgGEHJNH+QH\r\nMYvnjA1P9ff2UD5mqgXm6nsyWD+Sa1KlV65hcS0HvYFCeP/OwQqT7+gJGNqS\r\nS4aGYHDmwpT3/YpkBBHmG3rYanBIj8unmpqQOaHuh4LJej04+yV5FtzJbkYL\r\nlt4vHXRVK3AS/PP3TZcrXSVia7kXUFEzzPXljwtlLVjr4tKzInuYAfByf+Pb\r\ntK7xnyAvHQfHGzwfn5XCMwRZdYXZinH4uS5fcTZlxOje6/lQNXmCUx7tVt42\r\ne5o16hNL5RYZs5eGSLQqG2WFPHiRMGO/Pzp9MZaCXt4lFTkOSzjw0605A8jN\r\noV4j7Psjz8DbEtigehang6I5+ccvc38U6QZRvH6E92TjuRuvtZ5aBeXsPcgU\r\nhyIPtaiNzQfD/lnHKvdEyB2qq51fen/fFms=\r\n=zluH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0_1648726219117_0.3309083997240707"},"_hasShrinkwrap":false},"1.91.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f43c383798a253e672797bc5fed52b764ae1e17f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-gTc8TJNCZWuQI35pLcXmWKiikDFzQH4Hde1GF6FYP/z6fYl+VTrMB8l/5HG5MjDNEZGRaawS83ijRKyTLOA+1g==","shasum":"973a6015ee76e8f06be5dd5a08a7eefb449c42ce","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZ78sS5gRr7hbUpXYk5QsXAs8WCF95wc0RaLmcFBRL0AiEAkXHO7i1Op3HU5iCt0L/kzAVX8B6Si3Js5I91mT6tEgY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRZ4UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXkg/8DPRzMNpXfijK7hESmddfLBJdWmIFwin1lK5xPfLL9KCpB+S1\r\n/QDuJ5insH+7Vwm+/IgJJwp8ieX3t+nk5XbSW+tdd05kxdRS1CbRZPL2S255\r\nkbZTOLkjgEbV0nPD35e7oijrKv1mcMh3T7rbDO1bM6YBtAuI8YCcV3j/Hbba\r\npIREFwNt12TfDwLjDPbMXcrODvkP9dZbBjFO/QIi5e0NzbN8UpzxE3zQplkF\r\nwiA8vACmYXCMqjdLmpF7JvbjNIh4r3sozK2oJz0PdIQUa2RX7rc+nDahL6Do\r\nw4IOlF/vGjs1S4lFmpIonvFMYFqPS4hUs78LLBfMdrcEARUAsa7ORX/7OMbV\r\nPKlz8M4VZMcAxb17bold4O7bPZXMMC6pPJWUW+FjpfsejpIALuq0G3oSrILZ\r\nnoelX+gD+XWsEemJdrYvtcjrrwjQ/pZI0fwq9szT8s6Gcaz+dEfZ8qEct3zZ\r\nxuK92v20xZkDNQzVhMZtUMjRmkhB5FMMB8xEa4gUjgPli6O4QqTN58ILCPvP\r\nn/OtFBE4VqURnViV33cNKis6wH61P4OpDdreUbidVQeQ/iWtlBVfYPDHsvNE\r\ny3ro/J6VDrvLs8fjANfA9GagiIfGtutKJJNP/SpYw47/i/9n1VaxVI+xwet/\r\nssvUnjn/qxRsIOr4R9ugKIklVvOUGJ8POz0=\r\n=Xb6O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0_1648729620294_0.11465770027397637"},"_hasShrinkwrap":false},"1.91.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8b41d5efd51bf27bc73ffa3dccfd55301515a2e9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-zG5IfqUiWLeLneu+WvRLYquIFjl8vvWQqfzawbTiCvpUpB8KaTt8y2Qxa7+igV4ezs/uvGZkEu3GXmw9uVgXoQ==","shasum":"4437ae0f0fb81c94fe18daaaadc2d54773d035bc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0.tgz","fileCount":944,"unpackedSize":2624033,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHZY+twxl/L5+qvj4CT5JEqZ6ruO00t5hwPD4bYVEGSQIgSs2rkiHuOKXjiKTnmnW+yB9670EL+nHNeQcGvkCBaIU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRawCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGIA/+KShdA9UApZrcxSKP19bFGnIfCtGv/6Axg0ZXu/Jv6pdXHkfA\r\nHh8z7gW3B8TAssJKPdHLPo/WIrjU2lnF+WeKm5R+faBtp/OwXKiJs3hSgjUa\r\nJR0KA1Ynw28sO/Tr6KkWq2hGGhNl08MfSULTnNg1MzH5cxMeHPIGnh9CGlqB\r\ng426zSns7eCTtEzDHF2lpFuTdGIgBg8gQHviPrh7pkqDBkfjntEy7+Kn9crA\r\nQ7NA1lvpfqFoEEX+IBtyvXgtft2gb4lB6vtf+TrN3KNzAXJ1P6uef8I7Q5lr\r\nNcHX0lhJZWtJU5FTTfRHKU15PvgprMt4w41ea6hQD9vG2hShODsviwg+E6PD\r\n3RwT1d9zqpvH/eWbTScgVBexJXhE6OO7u9QDaR5WncE5pdEI/MtUwZgE7w0U\r\narHOQeO5iaKNaBYB/JStLKks9Xl3i9iQl7p5TARL0wUSeOIcZfhzODI8Kigs\r\nBJybqetru4RUQwbkq//loItBx6zlb4LMlm3zaMCh4krMdhOeJuGhWWD8UTH9\r\nKd7HnzewQNTUv7l7YuF+CgJxX8uyttL5FeWEpOvyt3bECAJOg5RgMNJ8RFkH\r\nhE/IuDo0VBWK/dUOLReHgJ/kRH3A46PbwnAU6qWE8l71WLaQ0IW3Yhk0Pyf6\r\nw90VESjH37xYdh2UpOSbqyYvbnriijNjSfo=\r\n=SI+y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0_1648733186328_0.1285635489684176"},"_hasShrinkwrap":false},"1.91.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0f25b8958ff7d8bdf2c0a9a17395ab4416482594","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-zfKfJ+jflYYJR0GX3pqEnEi9HW9rq/KUKzRX/VN1zvQ1eK1SegrlnbDv3BSafscIGtkjtcvqvTZ1D3HMkNQxsQ==","shasum":"0bfcd8a73c5b6cecece25b3b4cd4348a81026f6c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiEIq5QPitIHV+m010z7XJXDfuzgT/dHRHhvDqljASSQIhAJZQiimW7AmfXG2GrqNJuHwrrB9gdaxRs//l/0Kp54Hj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRayAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmtw/+Nvqmco2m+GQSkXwFA3bK9vEgiQ0vszA9jwygjNSj7nW9aG/h\r\nrXgVA9JfvW1BgWtOIr82yQL92lGA40Lbi7Gqfy3wrQyoUEt0DYOalWQIJtcU\r\nTTylcBie1lA27/M+i2Ux9zRIDmKXi4v+MLwsAPKIJx/C+DkIFE4CxNSz+1uS\r\naV4aP5h8IBI28Zla7UQvyFwYQFG5NbvlQXTB5UkgZgAyAqSVXUpQYS1bAhJy\r\nQDTxmOWni8juUbovn82K/Zz1lnOermQCeuuVsa4gvZf1+56xhhPQ8Gva8LoN\r\nPwM0kHHHrxKWUKl/qtVnhTMpNp+tPA5HLY+KrQ99Ef99QzPs34vQT6LFfh2J\r\nEK58bzz4PSpCaBfGjzslFkgTwwAotJNCsaHapn3/27X4ioec60+IJuNwbdA0\r\nZdNai8CVvJHCDcmwzfw9Ioop9Qzkb2nSmEfZUmtSmw6twxEe44h9g5I7HjOg\r\nope422hzCMdyc78MJS/zscwWFPW3BrqSNaLT/ARQUpOR9JzhrWB3vkuYuxJN\r\nID78GTDMK2NDVXgXIS2S5Up7Ui0RiD06QlVQpaL5TOsBwO9tKd8TpV+woQwV\r\nqu2W4Hzpnswxp+7/DwibC/MqjcPByxMoJci9OmukOW2o8EkQAW1Wzhc0M7GT\r\n4tsT2sfUnCwUk5A2ISkFUbEfBylrgZ+plBY=\r\n=hDak\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0_1648733312243_0.4094545028857255"},"_hasShrinkwrap":false},"1.91.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0","@sberdevices/plasma-sb-utils":"0.53.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c4c6406f0883c686525e890a28057299a5ed5c5f","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-keViFTPFVvsgJh58dwAJZpXa5NUEs4HlUQzZluDS6ycJCIEAitSZ2c5EjUjWlsHBdXq5lhhDtjMvffrjQDsDqQ==","shasum":"92d33978821be5c21aa3808ad0293caa9e6353fe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0.tgz","fileCount":916,"unpackedSize":2530452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAudmbCEdWBWCo2QaX3Zgc5C63aGVsKojRNG+EkueqAKAiEAkqDGImIXLIf/h8/+vSI6vgMUhQfuDzcUcSmVhuCWuRI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRb1DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6TQ//cGR3Gt7k7auktZJ2BE9PVDIzZBtVP/f/3P+WrVElFqcAEg5d\r\n68IzKVpzXknKt+KdQK45W89j3F5OR1zTgBYBDbJtSS8RR7SBIIY8OAkEbAKd\r\nYbQgdWEsWJ/k5N9o62uG0MAY+zHE9H1DUfrK7IUyzkmqM+ECmq0715Um7Apn\r\n0bTWGOBKZyakJo3mdUVdMAfTTTlp1VnYH3uHNhOSztLrAbSGO52yo/rtwprd\r\nSGCJ7XL9f34PQsH7bWEhISjJnJKDiS4lGeF5UD6GBnmo9nOMMB0RuZG61brt\r\nOw5Xp/D2z/vsgVQyRn6IkUqJnLEojw2EAsBnU/4WAXwDOZ2bmDy2LsPAhQ5X\r\nWnQXr74/ZajjCbontp1CwQdPHveM3hJLhYv5AcuLmOMljU78lOvpmd2VggHw\r\nK7rhHhxzfFMywG4d/1NtYfT0xPDuA3vNEmWDsbO2KIBOAiPQbE1GXIlONIZZ\r\nqvfsk1/FX2LGhAuxBl2K2hCACAJ4E4L8CbEpGxruS7QtKCWwWsKRfgYbFft5\r\n/Tm+eld7J7YlutLZN8CkxQfFOaS+3wvegbExHUOVkPo8ihDwtxw7soY0FZ9i\r\nR2FtXjd8RTqTxPeHkitj199g0geXjYFd49FZIxZihYKV10nOuivoSMi3o6t8\r\n5Bk7DR+Y9LyCvqjdPe7i8+HyLTkcZAcrcxw=\r\n=++O2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0_1648737603093_0.6843212557330416"},"_hasShrinkwrap":false},"1.91.0":{"name":"@sberdevices/plasma-ui","version":"1.91.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0","@sberdevices/plasma-sb-utils":"0.53.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"2e06c93248ff75f84d007a8ca814a918bb3365aa","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.91.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Xlsc0dUryicZWC1WLFt8H3QQ3yA3nKKFFPG0pKDh1MN2oiI/Q6qzvjqI4Visueaqn84bQMo/+Bsp9cQjp1XtOg==","shasum":"a6140f31ed9414ae8f20248397057f05c2e8f269","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.91.0.tgz","fileCount":916,"unpackedSize":2530739,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOvdwv7xQzL2+iF6m57IqyILVlSSRs/UbZx1H/Tq4MKQIhANJWpw6N5c4jK7iqOxMMwGwavEK4omi6c58pq/By0qLP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRcDqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmVxAAoCdxP5kzzUVlZNktFeGpjds1dupphosVHDbbQ3fFhxSpPnSz\r\nO8vwKJy0z/wRMwaHyp/Z+m77O8arEZZ/Ckngmu99bqk5jVZAK4X0gzU+g6YS\r\n+Hs7CUuV35XWkpfFD79XsMfL8Hwm0deE9i+AgDu06CcVQSpXgxJUOHVfRrbW\r\nSQgc8E2fauUwPR07WX5TjYnzI+GeTwVTC9lVLPp8YN2iVUfFj2GYniIN2Vyu\r\nEwAMUhT2zcS3lM1x+i83XtS5iwJprwWswCXFqvsjA1UETw6yLPjkvE/FkxdK\r\n0H/4kfFeq8JcQ07LmZkJpg8HyKmeQJAkm74yupMyV5IpsDhx+q5TWQLBWnSD\r\n+Y4m+ZFnmXlkgL4x2ZWQZ4ygvCj7XFm5mPlcEejx560kCmEVwD3VhVMY/lbd\r\nK1wLibw+CmfzHaEAu2gK5Apkri0H1Zx/pu404FpSnERx28OAnK42iiIElB7C\r\n889AusQZS4egjAYKFuWlzBlTgkTOZtWrE9c1yHXKFizq20C9aAmDaEWJCC46\r\nURJbTNYy7JTVvBrwgyAL0hiDZRC+tfUOtI0IgSYMfihRBqV4+/sacwx5MlRp\r\nB7hzEoYyo+qrMvry/RKJ9TCD/ykw+02whJGmRC2ycrDdsx8M9MFPyp2fai3X\r\n21JHkAZgfwv0wkVm//Wq/kbbi5OmBYr8YX8=\r\n=11pv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.91.0_1648738538276_0.8031146561552063"},"_hasShrinkwrap":false},"1.92.0-canary.1144.8963c689b317e5c9e70ac69f51d9d27d0323c437.0":{"name":"@sberdevices/plasma-ui","version":"1.92.0-canary.1144.8963c689b317e5c9e70ac69f51d9d27d0323c437.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0","@sberdevices/plasma-sb-utils":"0.53.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8963c689b317e5c9e70ac69f51d9d27d0323c437","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.92.0-canary.1144.8963c689b317e5c9e70ac69f51d9d27d0323c437.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-WdYixf85uLZwuOOEfRI+bo9yQ5KXEWI0+2TS658pyUWgHpeQNNOwRRbTWIoP41Byquo700ruBKFgqIiMTvrOoA==","shasum":"f62aca11d78850290a1cabea72fca73bd5f07625","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.92.0-canary.1144.8963c689b317e5c9e70ac69f51d9d27d0323c437.0.tgz","fileCount":944,"unpackedSize":2624375,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGz0mYHufo5Y2cO2VdyksXVuqEdc43e1u/ftSMHxOAEHAiEAyDtoB4mdXsCDpKLQWbBEVXdi9sDFiGVWOiq8PMqQazs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRq8TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM3g/7Bm6wrA8GGw+3XJJQYU3W3OuOopqaaUNc+xqd93SxtUGKKn4k\r\nWU5Noj6rhI2o4oIZeZ5fwS796+qq/SJztqG0uSNpJGusy8IaHFoIEhU7w09D\r\nyqN82ArS0zkDbspiKkD334rQsGnGwATp8I3VFByNqLN6LvwOJ+wRFUVtMESm\r\nVJ4uPybf0c9DZXSbJBXDiwR5hPkpTDjumsWbX0Z9w9tZyo84tvJQsCQeJU37\r\nPBUl97mFU6iubg4f7X5OBXY08PKyrWHA3KQKWaMT1duL3XhAGAh7p1NKGutD\r\nQcTbZXham0L825HRXW9BoLYHXXgJcYvjqm0acj9Z0A0EmJOGWoKicjoteVpH\r\nxgBYQ6MoMf4ALNM3w0UkopK6fuexpfWKi52PgDQ7I9HY3yzgZs8PDbe5WErx\r\n5l8SAJoM0iCxqv0wwsEIGEIK0DOgazc1YBi1mvTsvNAhDd08ktvIxFHKFN7p\r\nNHt0WowefGFYdYjtCBPZeHfloiK/yWMM4Xqdx7p8JK64bNTVOz9aRPPrdjd8\r\n37dIM+IUmqkxgVs7S4DU0N6iogRtT5omQIxnXopnBCRpEUXrv5vX7k/Sad9u\r\nXfcwGiy9+U/uS2OWoSRMWxkWb+PRaPnj1uhujelqAACvBs2h3vXAGEgAxvWU\r\n6HWFCayf87Qp1zBpqdDr3UEebMBu4aykJ34=\r\n=4NRM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.92.0-canary.1144.8963c689b317e5c9e70ac69f51d9d27d0323c437.0_1648799507671_0.06222490483658283"},"_hasShrinkwrap":false},"1.92.0-canary.1144.8a3ae97c105272fa2545db3acaa6ca5066f37f54.0":{"name":"@sberdevices/plasma-ui","version":"1.92.0-canary.1144.8a3ae97c105272fa2545db3acaa6ca5066f37f54.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0","@sberdevices/plasma-sb-utils":"0.53.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8a3ae97c105272fa2545db3acaa6ca5066f37f54","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.92.0-canary.1144.8a3ae97c105272fa2545db3acaa6ca5066f37f54.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-JNNcfOOQWgeluEhtizqoNbWLG0pbFQbWvuPefi7szmg4qebRaXJLJiZQSDmVb10vlo5oUQEyRcn6ymBlRzNg4Q==","shasum":"bdeac58564b2f6706cadb9a8f7dc49789edfcb5d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.92.0-canary.1144.8a3ae97c105272fa2545db3acaa6ca5066f37f54.0.tgz","fileCount":944,"unpackedSize":2624375,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0e7o6yVcDryrAtKgykAn87tS90/hapaj6a8j/epWTPQIgFnNck6KGLdFRALEQhrZcPEHurA+axUf0Lrj+VPjPN/c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRuj8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu0g/9E7czsn3u7vTfswUvMxjjoImnSN0BpxSbq69BWvGZWXiq8KPk\r\nBtZhPbfRa3Tl7zk7BRB7N3rqyFxaV5O0G2kuCuOeTG++EhBffi7rPlxTH6c9\r\nMHWpuL0TB6ohZ3b2fLCI8Ppu99WkpYBU2Ig6Dky8OOf68oqBIgUZLCF9tljR\r\nNrLRmJ9eN4rg5xOIw0VcaJKJAFsZo0qCcPFxQe8c8ca2VruD5/2aIJzfCDMX\r\nTxjlnMA4Z5JvO731Ci0nAYWOOGfV3MM/vrDpOWD9YxzwfnwBxRE8EjS1cYFn\r\nBvoThTVUBTIXgZKanEgGUwugYJJcFnxJV5ELCKU3Hx4MHozULL8Ec+3+N5L1\r\nYzgWaeZxzZg2o4yKyMV2EI0GUV8CRAOrK0HeQ0xGqQlmPp4vGTU5D7AZ7p5H\r\n9LFv/DtZcGYmaxVWV6+ITfuGV/64uhjZanr518OWZ92Ol8Pl+NUvjWue/Qzm\r\nFuK0XA+DGON5EtZZS5+l60eWKn9goqtPRUvcOKAWOSxLWiw5RBlbIzdS/9Bi\r\ncWwTHH1XxQb4J6h56CbEjMIRij/ohf2HL4qdF2Iwutgb9pWj5C64HGIXBQ7T\r\nsobjA/dmk76SaU871AByPgLoD7rcQDltgf5zWf9rFcMgzzjbD9mfSTviG9BL\r\nnCe9nVrzdJd1DlpeBD0qVJF+yCWNkvByBdA=\r\n=uGyt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.92.0-canary.1144.8a3ae97c105272fa2545db3acaa6ca5066f37f54.0_1648814332264_0.17866817571280857"},"_hasShrinkwrap":false},"1.92.0":{"name":"@sberdevices/plasma-ui","version":"1.92.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0","@sberdevices/plasma-sb-utils":"0.53.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b5f80074d56d90805d0d7ef5fc516b9c1fc52986","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.92.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-8otU5skEPnliJlr18M1zsTC2PCR8wsUwgFaJqfIkSeEKadSXSZ0egqZsYHXy9erip6uxXuhvQvDi57mU0GW1kQ==","shasum":"e36f2c0d0d25d3122db0112b188c9470879817bd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.92.0.tgz","fileCount":944,"unpackedSize":2624915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr0zlNbhdchrb1NW343xJCu/v0KTjtbltfIlon6lpZiwIhAMfmoTZ7WOqvELwL297gGE94/P178P2biRHOVLfLYz+L"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRx5kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiPw//YsLmmu+FJH5rFEtIAaPMTU1LSSfWVD4c20GXet8XLsistiDl\r\n7pK4jmJIWWkM7UGXgMPjbmy6rxv7husAJPbOI3bJUXf8H7Dlv5RLzQ3OaM8H\r\n/jG6iwkUNRxv/tbmT8DHUh3lMcB8LLqPyIswCOkjXOj/B8izFdCY16qgSNpo\r\nqNjKGPpwqBwxKFUEYdlh4dZsXil89dzalM/0RAjVKOiZw3+HrQwZ0AkfJAT7\r\nX/xapxKJeYFY+DoU320887BXHpFLz7EfHI3wLaXKbzrm6MCIpbcaPTIcdasW\r\nxW1OVXKLyLprAGbUG4TIFx4YBIDOOM3zpw2SNZpVe5FcnTdZIM+ii3exqCVQ\r\nNCse/yDS5pot1mHPxUa97jzlvkag6W+8OdoVxxfsVbKtW1KmWfIkz+/eOk06\r\nnGP96sVFP7t0mcwWgmISAExWenwv3b2D7FWxpmXs7YuDRrtb4rWaQarU736x\r\n7IriawYZlfcUj9X2BdGjSf153aKAoo5Yq8ml6SrP5qf7vmXx9t0uohBcbyEp\r\n/p50OY0N0wiN7BVl+0zPdshwevpfTvvLdtRcNomoVZjGWUAnvw/tBdSOmvkD\r\nnL7JiBmAr4s3J+ghLbsMx/MQtHoQFpKsBCkLy9zbjvQGEPXItHS8GySsSC+n\r\nOv6TZCaR+ASN/89BFnJpcF8SMfxpOTBSqHA=\r\n=mZi7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.92.0_1648828004340_0.3859789600791419"},"_hasShrinkwrap":false},"1.93.0-canary.1162.9ea49994d9c6079cdd61774c32eecdad3267c78b.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1162.9ea49994d9c6079cdd61774c32eecdad3267c78b.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.74.0-canary.1162.9ea49994d9c6079cdd61774c32eecdad3267c78b.0","@sberdevices/plasma-sb-utils":"0.53.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"9ea49994d9c6079cdd61774c32eecdad3267c78b","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1162.9ea49994d9c6079cdd61774c32eecdad3267c78b.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-h0bsk3VLPK7W+tBxebHgvbf83cyBeUXn5YUQolGMLIyq0zIBf+DDVI/DtCaokMHfXE/9lMTmHOtjCeckpI3iXA==","shasum":"1b56bcf0fdbb4351de9a98bb93551057bb46cc8c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1162.9ea49994d9c6079cdd61774c32eecdad3267c78b.0.tgz","fileCount":944,"unpackedSize":2625025,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCifu13+vWfHMBwZbWvufiJpSnmvco2pZ2CLrmTrkjTgAIgOxEgIirb4Qr0kxGfug/XY5Z82WVsBtsAdTNxFmYgccA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrjQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJyhAAopq94pvar8/x2Yj9TqgEt3W5KZNnFPkM28YDo9tYyYpNZ3YF\r\nHnVa07EykEWszQ+pKMzea817JyfrKNCT4F18tgdltTqvqoSTba8KRIlbEDnW\r\nXmH7NeEeb0dTirwXRU/AUTJtOhFYNBR7d9fcWEi4mSxIN1rf1GWk+iA5u47J\r\nZI+LcDbh2A4UXl3n++5FcbskJWSLDY/R7E3PZ4nstcj68GYWPo3K2zhXxSkJ\r\nHATWu4KAOdJsw6w3iOv1b8XwGis4Qs8TjejEd8U/bqjpWD80H8lIs4uvzNtt\r\nlfIVF7c1ijlxKvRdtVorfTfHB9vy4uq2hxmQ7JvVH5N47rQGZSXXs0uXTviM\r\ndjWytOEJY5xK+IvorITeV3H1l6RwMIOvmGaEI23KCkNNjgRBZxzDK8IS6hmt\r\nbr0kWG7SXo95SlDG6jlio8KlaxtWoQtKwGVLk09Ec8AxB1irQa/qs7uZeTAc\r\n/OOWSKtD1JBMCMHaShJOxQyn9jWp+VyC3Zl7WOwkmMpjQFvaSxTKTUmIorDS\r\ngnB9WA3jPn13OJ49ZtqQZY79e/pbqdoPAWw1WD7TTR+PdABLp3lvkz4K/2Jy\r\nhUdoirPb97bgc+IjDtYGpK6Z7QsGUnAlxl/k9ipm5trdPZTjAaQHpTvw2xg+\r\nNMm97MdM6EutaclaCV9wtrJsMFZnjP2GSYA=\r\n=Dku1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1162.9ea49994d9c6079cdd61774c32eecdad3267c78b.0_1649064143891_0.2772037781571284"},"_hasShrinkwrap":false},"1.93.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.74.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0","@sberdevices/plasma-sb-utils":"0.54.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"13b2b2f351158a953d8827fcffe744e474ceedfd","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-BzLhp5J/4UMm9C/sEo8h+dpdo7D2vZAd5/ZIr/szbmYclO7wx8ciDdm9YxCpImpQLg67CCpDUZoe+qakuW+oDA==","shasum":"3ed19772922e86c037a07655e4577c46a174c17b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0.tgz","fileCount":944,"unpackedSize":2626900,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjQs7PerjIbCfkyw5xvNnxV+zR6Iw2JxTjhVWVWB1AWAiAhwtv5bCJJoTH5Ee5rhKmNuwyYSJpgNgl/v4Umd/GgBQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTXxoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpdw/9H/KzgSHoBM2Hbp29Vojt8U/Q2XePimzgFMdlzTfT6mQSNVEH\r\n9zp9tMGA1RN5MPmR8CpYPVLJPxEd6fi+AZuaEGgFpRYS9bJehGr6Bq53TszH\r\nTrD0CIst/QDDToHngjzJ6rMY1580iKb1ipfWhQjADuGx4sO1DbjO2EF9ww+H\r\nu62quahCnmwtpeW62pYZwrYhnc2Tw4xKi0pjN+PMMd3Wyc0Rv07c37lgTnTX\r\nZ87pHjvo0y/2j9FpVrXeJ1iGA9eZqbgymYhEBJuyiA3wnH2wgxcSGbGDYz1z\r\n//xZzBmiuZZGFxmVd3ipdsGiOrVeneUFnpjYa+VoW/09ywseMNyCmHY0UZki\r\nDSD0qR3OlA6SdGsFV1TNYqoTjqvxtzjnav0CDghf2E395sTBB02OSehT4n/4\r\nKNMkcwyc06h4xP48wCN24IoMqUh6mZVZuKqkTmfJZOJoQftoAiRFsQ2M6s1M\r\n2DFHVYbdtAcLGm5TIMTktK8iY7jorGMH8xsqAAFzb/cfBc40DlrbZSeA30Eh\r\nn/Cv8rVU7H9Sr1ka0pwO7YbaLBih+cqdGSuN9fz5d8jhJVHJKo3LnXjzYLX6\r\ngKvzWOcMmbDkoMhl1PHAQI4h4G8y3d8Gji7/HCWbCu7Pz6z0XvZHsP8epkGV\r\nOBe+D7TrPXzwvRErwtlZ5Nnt3hxSHLzPrQE=\r\n=ExeO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0_1649245287748_0.608408742382434"},"_hasShrinkwrap":false},"1.93.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","@sberdevices/plasma-icons":"1.74.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","@sberdevices/plasma-sb-utils":"0.54.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7e49272d5b635e15470b05e6d81a00241dc054af","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-fV5nCF7E9jK1BneZu0HipV2pPsnnAI0vSX5Day5vtFf5DjK5GzgpL26oHg6+bDlRwxTuRUQ0CgBOle4xSg+N2A==","shasum":"cea293edf8d575cda657459a56e1b7940820db8f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0.tgz","fileCount":944,"unpackedSize":2625337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBE590mdREzUNa7pTmsLbvJEZxDHh/UQRg4DAOOXEe65AiEA5ujeBxID6PDc2150O04MXP9QhfEcVJUvQRJsapm7xcE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTX5lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruyRAAk3bLHBjiB2BlLntawP7x8P1DREzNMuAjmjF01OhsLSNsvTmq\r\nf2YsWbBnRFGkSYstbqAAAZSqLp+87kE0IyI0XKxDl4D1IBq84YM2Cfp/ed04\r\na6Y/rUZjSnRcVCfNpn8mWEWfcDrA3l0RD15LP5AkDfC1TBkzzoRbsA+4MKpm\r\n3/KKjpXv1JNZXMKPLbZwKRs0Ag+wcFH95NwVQLeNopfopj+a7YINz5pL0Ozn\r\ndtorKJP8Czw+OQKQtEAyGruptji1ap0WItqTwKaEyAmQpzM9B2Vo0+53UZ2C\r\nekUPpU9d6KG0CyBQFnQhgN/EDEgJEVNdTXMZAosMR+RHWej7DThKrgGNBUZw\r\nYBpGHRK5OvnlLoK675e7BbXrod0MkS3/9y9yTCJ0TwVTlAkuO1IoGglDgRh4\r\n82KPItr+DtbQFhUp+rY+W0BDdk9I0mRWr7csqr8qPd1DzC4WPRYauPWjOsZ8\r\n4x9UNqBOQX7BykF6el94GoR3p+7/kmcHhy/82qaDTtHdg4taNoFyKOM9u/HD\r\n3prH7kTfmsJzCZ1ac7eQpM6kgOhxuziTEmZ3u6VkAXQAim442IeF7JRDD6qx\r\npWuo14MMgsbyhe4wBwcbo2sF/hrxWkYwdbIxUDqR3W4+7/qjgKKMPHa+3r8q\r\nZGR02uM8aE6Te0l9IFLtTroSg02E9A9kH0s=\r\n=R5TQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0_1649245797525_0.43138775942142016"},"_hasShrinkwrap":false},"1.93.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","@sberdevices/plasma-icons":"1.74.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","@sberdevices/plasma-sb-utils":"0.54.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-wnHBh2Nm3x2RHdMRFU9HbYVfndV8F2PpACjWpcTX1Q61iIQEp8XLe1nmOa4ob0rLRnct84V0Ao2NIcCgakIZ0g==","shasum":"4f290928c20a01c0741dcbaf585fd3ad3c3e0794","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0.tgz","fileCount":944,"unpackedSize":2625337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRuC3GdX7A9fL7ZUiv0t+BKUZeVJcq9xW+L3NKgR8X2wIhAL4/Lf/dn4GMJb59fYHgQOOuGzNTg/MLjDjLVsUO8kSv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTboEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCGQ//RbfoL4jIUje5ms1VKSe5izAayln1mRr6r2WK+W7KM+bZTEuO\r\nk/m3H+5Wt9evy2br0xabHS/SKokJb3ZRgx5fatbDgsZNOTpDV9VUOc7Od+VM\r\nYoaCwom8I7S4TRSid8cWBmc0CSrY0CihYhadBOD0G4BSdiocaYQBugIMjsGk\r\nfeExoL2cFwhSEJ2yUjv9Rwmllly/NZcIdvcmH6oIQoBQKuWc1Yleuxe1HOK1\r\nUATJ1ePl+kI7tUDmvS4XCQ4MA/omfdgT+TkAl5hGgmXnAsxSzQlHmpvad/I4\r\nS56hiu6cJeXGfHmZTeCRvJOZORIkz0KsTlNqun7CIlMTvjuXLxoFON5feR8h\r\nwgkWn9AWqvuSvZcPxlhjqjLwfCtRO3z0j6jtv6yQ0Oo/50k8st4J08/XJICs\r\ni5RphMNRs7kZzu2PhJlQYdX0z8/mvY6udcYzXWftrn+TVS8dGy6VSN2/Cw4U\r\nfZB/OH2Vu7bodhW95vadg00gWRmsIWUZj+Jae7bwbmxtPbbwrTbi/fQANY23\r\nHxPVI+eH8YkKja307kNk2WQ8Lqu3ldqjUvCgC5RikIG9xBUiPmkV4s8S04Uv\r\njzqZ3AebEDW+kX4t98CCO7SVGpV9rLY0AVtMN3lQLI2hrJRVzhfH04S3sCCe\r\nRPhM5VWPiFwE7Rk4XUmUZHJof8252IKeqnk=\r\n=LBje\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0_1649261060263_0.6928917439263533"},"_hasShrinkwrap":false},"1.93.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.74.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0","@sberdevices/plasma-sb-utils":"0.54.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e4cd827075c20cdbdba6b597afe65751bd66de29","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-vmvpgB2LJ9wDK6EqBiVJHSX86g1JxP2wHfEQFIB3xL2rVy3yCTUr6zoVv8GM2ni3f3xwQW6VvDXkqF8zqVn2fA==","shasum":"b5095cb8fdb7148072e0fdb95c63b69ecc05092a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0.tgz","fileCount":944,"unpackedSize":2642039,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiFcp+cyE/nUD7raEjr36vTnRJapGkQWw2QYP9azBpwAiEAt/uZzmhTqQ/TZpN5cL4XPNqY3aEMSCEck1Qpe4YeBNo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTdd0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2RA//cvqagd1YA26i+rNUUFPPMAsQ+1V727hn7zfAFqcBPFLUKMcw\r\ne5eLhYd56Piiedlzd3WPCyBr4MUYFVmEOeIcykl54MHwORHH5Povkkg/ZKr2\r\ndJ+/Bs8yvXgdZXZcQ9k7v/oUsgxbUeVRJirl/E/CslozdI1hUp2Qnc6Y2xJU\r\np7AB+4l2e5Ki/F5xdN2Rcs8QhRXxTepvptMl7DN0Aoa6W+EAOVz5luEK1A9D\r\n4Z+6KKyME+nUzaAbDPqBZX8mP6k1EkkUK0t9yBrYrfSmJKchHVMPrpmVOhJI\r\nRAn1TBqWRasZS+N/0SOLLbE8a691fPbMuobHkcGpcC8kptCRVlNwtiLlsSSI\r\nFqzyimxMPdQjG5a8H9D6hVKITN9zI3DVzTc8fEIHVQYfX7Th5jVN4JLCoLBs\r\nPaZ3fEz2ynePggBsySZ3UHh40VNhwA0UX1PFm9FBvgvEMyg9oUkJ7/2wETOa\r\nE8xk/3bPWH8fobI+uCC8ufI+8PF3lAzDhb2g6+iciQSR+xdnQpVtD8p9jyfR\r\n1mZOhYhTQokQl/t6x7ilLSAEklm9I4GhTGR9+szWu06nRz4j7enZjDuWful1\r\n28wqEi9RkqkDlgPgHuGPa/Gi1iEh5+Kt2n1MmIOXcgMtK6sMi6ytvo0v2fVq\r\nYDxNEk5tBAB3sO2OdZ8wVTy3R46VgnAcNGU=\r\n=K0yt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0_1649268595912_0.9514818311190016"},"_hasShrinkwrap":false},"1.93.0-canary.1181.8712f793b6bc6d6e1ded2e52bc1d0f289b3ea793.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1181.8712f793b6bc6d6e1ded2e52bc1d0f289b3ea793.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.54.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.73.0","@sberdevices/plasma-sb-utils":"0.53.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"8712f793b6bc6d6e1ded2e52bc1d0f289b3ea793","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1181.8712f793b6bc6d6e1ded2e52bc1d0f289b3ea793.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-O5TIgxFsE6wHv5Q+HKJWXJmv2CwZMgabfr8DqAOzhAWhzc2TkrRhERJ+Kb/dB/DtiRCbLiti6EVShpmXfm9U4Q==","shasum":"ec0f5dbe5fe4c16937410366c72a306e84753498","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1181.8712f793b6bc6d6e1ded2e52bc1d0f289b3ea793.0.tgz","fileCount":944,"unpackedSize":2624970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTdBlzCIg9bafjK923HFViUHQXwfzBBrKKjAnYskmtigIgDUQeUfKYk2o59dCrcYV9WBvY44LlIoMrDJHf4KuSB3I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTp+SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYlQ//R2pc5aR81A0uROVBWKw5u4LQ/Hwqfr32S80Uja9LOsC9QVvz\r\noqlGcu1aoVC0Imx9C2e4TS/xz0DZ5Dxw11paYlij9LSjpc/65SDu+lL/+FgL\r\nkOKi+lhmEYTRQXIr+i7hC61A+xt3MDeSSAogLUbYLQfM+1wbNTtP9dx5FokL\r\nBLxTvGp8F5CWY0uF77c5BLcT8Jn8VTastMGyl4O+nstq8SV5/kcwPBGOJuk8\r\nykTvD0Rtk8DJsXP6v4H5QnClECeH+Ra6jiFZslTDuQhcgT6cwMfyRb0cA7du\r\nCi2chMlWG1jywj7gWlpKpnD/1oRbMcXy9mzeHfyt8Vm/QFibwUEWZxGyfqxC\r\nLbY3gz6odgB52ylcla6kWYG59zJ761dWX8Zk97D8cdO9ddhiJbMgI1oLBd6B\r\nJCBCMarB8GR54dkm/qGvTw0HHKjvxaQqfo3NKbFDrBlZXQCdC5VKI8pdgzBT\r\nIjDDUUzVi0BMhg8q0qReqvQUQ18ZdPGjlU4PU63kTUIzUCkVJrExuStXNSNt\r\nqXqynnd8c+4GWphlrJTTWTDlnxNgtl8t6x0BRoEyWPMBDKRb632I2O5ju9Mh\r\nVNpDDEclQDoCjTmsLSZ9ClcXZUUW8CXFFxL1zFlaXvPK7uXQSzlBxzgO0qM5\r\nJUJ2aD+eBts8JSABFJmEPNGhq0c0GH40daA=\r\n=I+kn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1181.8712f793b6bc6d6e1ded2e52bc1d0f289b3ea793.0_1649319826641_0.3267287053181227"},"_hasShrinkwrap":false},"1.93.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.74.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0","@sberdevices/plasma-sb-utils":"0.54.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-xERX1j3ocK5Il7RB8xqT2ijnpkYq6EIqEnqgYBr7BR/7RcOwNcSgtSFhNYlAND7ZxO7+TFcsBCUxwXvMVgq98A==","shasum":"827add099a5131ada13f7a886c7be734a3edadd8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0.tgz","fileCount":944,"unpackedSize":2637973,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLGqaK7dmUxLYWUu8tlxIZVYN4Uu1yJMoC9csvQww50AiEA1QNi7bW2Ahs8FNpJPnIXd1PE4/0vbT9KZGpaOHIuhe8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTqu9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSnw/+ONK/TC/NKRmjwBw/gou7lm7w7sOF0BLJNGi27mMxbKFXzr5M\r\n2BRpvtDA07GYlWsBepXSeQwqAciYMEzTBq/NufXc323P1slnDTcaPCAXJlG+\r\nBzoa1wiHj9K+zUvUa61hpXnwDx7B2bF3vFeRK16QETf6Ss3aioAzfdxC+4DO\r\naEhVwTEghaZRBZkm8r5n5ZLzFGdoOQoHxdiYyN0N6XRR+8G9nw5p9nur5crO\r\nqS9YdqaKHwuJvoxVeQEMEHbxVu9QELEe4FqOu7oIk2EYCdL+L7O2hlK3IH08\r\n9MpR8Xf/BBB0Auxdk3rGD/MB5Fdo9v1rWrJa3WUxLUKRYCWvWxEiDFERgdrh\r\nj9Qyem3jRA+C2kiigxnrgDulurkU0cBdqae+Lk/tUw0e9a+ESP8siZ9ENK3L\r\nVSnBV2rf6OFZJPnriCxyn8YrHIFcf7h3rpfMkIff9M8qqj6NPeoxf/1dYG2k\r\nSjD6lo+j585IWM0Ya0VP+4yEbo08BLd+GopMA3/pXNwH4LHW7g/qnVWJtuQx\r\nRIAIGyh8lGEvQyPD02qroNbe5Oj1Da4iV97s4M0Uzx+P/SpecWsi5D/aJubk\r\nsVgV5Tp5HA+A5at2BfgrxU482KWsi4DntxxDis9KzrXsKZBXN+xUrBU2+vhR\r\nW7azDrCtc6eEGTRKJaYDwrCWBcVWScH8D3w=\r\n=4sqs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0_1649322941274_0.8365227145431915"},"_hasShrinkwrap":false},"1.93.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","@sberdevices/plasma-icons":"1.74.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","@sberdevices/plasma-sb-utils":"0.54.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","@sberdevices/plasma-tokens":"1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"21e811f12d17b0a558889b91bb32973ffc7cf4c8","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-zhekV/gtcJsQJW7YS27dvzqdo2oENZonwjQ2JQ0mf5FsWhTKHwqBRG2T49mS47mbUoUHUuYh1ELe9vw6Hn8bjw==","shasum":"142a45465b8e1c5d35e37c42ad6a73c514b354c5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0.tgz","fileCount":944,"unpackedSize":2625337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSq/glkD6Cg8pvb8UIcYzZHP9PV2zb+J7iLctw6Ify3gIhANkDmEkhBSZbrHGtzZEbAKd90oPZ4SUjQVlCK5M1CYv3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTtq0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcnQ//XnEZi/RzZ3IJLf4BDLlzhK0TSSFfwBKtata7I91UgzC5Fmxp\r\nP7dkpRiO5RhoBFzEkQB2TAguhapMPNOhy7I/MJtKjtP6WkAvX9s1+FfLxfkJ\r\nzLY/qrEL8DE+1UPUKHJhGk+jxKGWxmdT1jbD1aBPS+4P687E4QTVZty51cRy\r\n87FEz8f5KYd/FtZtyo3rIMSyx5I4cjW8FjoMMYwIDCJrO0XcmioCJ2MKP84N\r\n3E/AV5yKD1BygY821nZyyk8JXL24Z/3EvlYMYJ5Di/zPTRlOB5BuQB5J2KMv\r\n4FN3T/M+G6TtHh2/LS5RIAJxDyzJH99gTC3fPJks9jzJKco7Xcx8+OMUhyAi\r\nPUGRSvQ0RetkodT6R4ETbDMYXqNQibUjdUOqUIwMVBgM4+k3swQ/I+T010ni\r\nNrnaJyAJg/VwF2bmCvJwGWx9gqEt5J9Regjm/PhooqkjKhcR7LyUkuTP9l7i\r\nuwgKmAbysdFNFZfpUOLkhF4O+iCkh7FefD5PNC57To9qr6wP7dSnTq9aWBni\r\nupiPzzTKNRyeoQSG/Is4sYMnTg61/OoAyiOgB/DHBeMO1dIVYVhwhkU73KOE\r\nfdxotf4Xc2DRCODxYrJYpstbInqjRKgUC4lk0AIhuPlcREcZBzQcSSWIDe83\r\ngbGcA9ncnoMlCV/pwgI4cqKEphe20UAInyE=\r\n=8wJx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0_1649334964359_0.5415194031128325"},"_hasShrinkwrap":false},"1.93.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.8.0","@sberdevices/plasma-icons":"1.74.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0","@sberdevices/plasma-sb-utils":"0.54.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0","@sberdevices/plasma-tokens":"1.16.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"0ee57db2dda2d89a21bfe1441b2c443ddb82a265","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-R47wVwWKhtYx9HPHwMJiqXE+VNQTWpht0SaWovE6MnSJFtPdjVL6F3h5K8JeE2IGjXO0+4w6qox1ErwYmy7qHQ==","shasum":"312b44173af09700e711996c2115302a9d37fd2e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0.tgz","fileCount":944,"unpackedSize":2637977,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp6MJ2UYoaouDROSaFlmixIjYWItTiSfUypGTPApxoXgIhAKc85DFM8tXbveA7kXzMt4Ron8zjXwVEwCYbZ14zPKJF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTt+sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogHQ/+NyWD+R5MLrJQK3nbLziU1QK8Z0B+KCsjeENWDlbGyWvhK+MW\r\nXzUPx4c21n0RE34puzhxkZ2EmUn0SkTcYxGK8gTAw30R12775xmftfX8RWTb\r\nn+yWZhgb3inprtnkCMbcmTdVdVvXm+peUG8dQvaSlJKtl9ousrfQ/IGHr9ZP\r\ncAYuXOvZnoAneGbIAA7NrZfgVB5x0mQ/U+S+Ske0Hj6nccS4Q6jNmlfUHpcH\r\nHdc5oblMobToYykeJgHw2qa2fET30Moa6GKHsF96l1POsK7/KpgThjMNQ8hp\r\npMPK7sa3EA3pRI2YMNuZ/lNu+YPFidW+OTcFUL9/c5RDJlXoPfyx8huj8xN4\r\noBlvmy9sPFwKVGpUeRkJKOElchHxlIU2Zcjv6cAmMfuaiwHhio9TXSJ9gMpg\r\nCyhrci+X6/AS6/M16d843iFwa7XpikJko4tAni37s0QcKPZWZ6J32yzXR7FC\r\n5rqam6/NWo8/hT1F9zYFkGjZJusGGGZqWyfSL1XhJLH6J8rRFyj4mlYuK1F2\r\ncCDGXQkh7URbyWXv1KA/dJgFvf5r9GhGllzbePPEJnFzS3xcFLPWL7uAUnb6\r\n2C7w4ClAvDOqSlWur25q9mgMupLRN7f0ZCHA0KEjgAwVx9Ld837922zeTgAZ\r\nLqDCpHLBQCgXvS2tIMNbsgVYVecvZ2zJXy4=\r\n=nsZC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0_1649336236126_0.4266276608660151"},"_hasShrinkwrap":false},"1.93.0":{"name":"@sberdevices/plasma-ui","version":"1.93.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.74.0","@sberdevices/plasma-sb-utils":"0.54.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c835d72f98579851743bbfee8daf9f44706c7ac0","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.93.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-c39STNANmAM019KgRWFpg5hVbMHs7IWIDrKDClX9C8dyz4JeYhDC2s0HtNA+j0HUR5VaD9jxceQ5bI8NgSDl8g==","shasum":"0120aa017a4643d5314eae783ec62b6c0ab0dd28","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.93.0.tgz","fileCount":944,"unpackedSize":2625292,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcb6dInOXMDCsAtmqjeSkkSPAkTyi+zafQqwjQFSiCHAiBiP8pCJ/gh7pMt/jY4bece7NwntxR1RQVhrNqt9Ve95w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTuUeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOAg/8DFBLv8PEqF6S3vmn88gc/TU91hGYNfeoAPDk647aPGfu3AgI\r\n5ZR05kvzVgEuZN/CgYnB4aS/vjj0oosYRyb0fxMtOb39OUTSsSrJF/IBvkGF\r\nfgo6nP4rE4q5JWTdVjh7Egt/YVSfJTfUqFKlPl6nNXQ19d6KqfJXflrI7Wlx\r\nQPjhACyZwGUnGChFQUv+dCRymLAODpqveG7GLwVfZdJjdz1t/oCGRVf+HESs\r\n7pt7HlW5yYjW8yRsn7bZyo84vHbtlVLGhT5/k88ZOp149YiOG5kIQU91dAze\r\nrkasnqWn/K/6EojG+YtO61MTONq8/HnejLKC+QpkDcjXXa0u+PQg+qKD/upU\r\nZtUa3j8XKVg0O3FjuTHzL61EE6/05xk/HKWlIEYZR9D2WNq+BZeMY71IUPuV\r\n7KS6e6gdTPi4LVpsll1Ue0WKmYdoNsY33wSrTbROCq2R6ebQQAQRBM8frCJl\r\nou7SydlpazLouKZ4daBaUzGwWgMW8lVcm9QKbyf5vlbZj4vu7/dltK87bDUy\r\nHwrxARHm8/pFsbE4e1rgSg1KuScAyOy0KRcoSfJ3l5u/qNdJY+nAqpMD8aiJ\r\nTwe5Fn/QijIj7kIgc+Pd+1DnumEzwIUAC9du59OhFKvon6YgRlUgZ4JOQnoP\r\nl8yYR6gi+SQa1w2z8NtqXuq4kNPxxYIHmxc=\r\n=FFlm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.93.0_1649337630455_0.4837265846573262"},"_hasShrinkwrap":false},"1.94.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0":{"name":"@sberdevices/plasma-ui","version":"1.94.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0","@sberdevices/plasma-sb-utils":"0.55.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f57808ac0b8eab9f5c3168364c93923ce4646f8c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.94.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-/X6tf/DjZqQI4noUmkn1+RLDWKMLoepayF8z0sIwlwPc4pG4VDrFtIkLbwUmkgjTgtGsqSPzTdDjInJ3XJOcAw==","shasum":"6d4fee30140fdabf7f541111f0c12a1743ec0b39","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.94.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0.tgz","fileCount":944,"unpackedSize":2625512,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1qBnqjQnUB1hO0F6tv0tpkZyaFM5bnU4m1/fDH01eTQIgRNkB7fiy+qhjvDUtEXi0miSf6KAUI3ql++HrZfvCFhA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTvr2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRIhAAmidhY++Ip1f3DpyBXSsUssOgHx17p/YTBLerawhXIjzkrLXp\r\nOjcgdSUxJK+HFj9W07sI0UPkYKhvM3aqoMpsJGRnAmMu0zVJS17NcqQCW6NE\r\nB4ssoAnkZKc859Bv53KKHRTEZQao0SpQvk63xBHaNlC9aavngzLJqk4O9/sW\r\naZw9x66CxKFH8UIKwIVTmUWJxE1t4deaN8d/3/WDLK24dWWUE0VlTeMCKu+p\r\nlMfJT774BEmpoe1sbgQV+u/++vsVvMSSIquR5qLj6Aa80kNbemuwr2LWeGsg\r\nu7vXfoT6+pOXuxy9PKO+WqTLmXMYYQ3VwgaWLFXgL00itK4tqzpnHRJGZlg/\r\nw83wI3XfqVkRIHU3n0uYmyB4pdOVKf1YdUxD37aH/OLJWUx3eBe57mE9ede2\r\n6O5qPG/hgLcozrXNS7UFI8yw5104iCIAVCvQ5qt4uOW5Rx28CHQaR9ZRNOoO\r\n2mfu8uGdUpFGo7+mSWH7LKFtJmzDH6rJA+1Y8DHI/VLVxPUnZlJwI0vBttlZ\r\nIew7HYKYZr9k40qGxYFqhTy5l6l4x9IORzMLw1HcNt+eODO1QD/njfZ4/xT9\r\nwj2ukEtaSLRBKMr/wmO4B3TgzhSFbH7F8GrdYWbRXf6gLebV1vp5ICJUFqzw\r\nWYXKRZisSjy5cXD0bELi55yLuJYNRsCyXGo=\r\n=ION8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.94.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0_1649343222269_0.36292751068699225"},"_hasShrinkwrap":false},"1.94.0-canary.1181.97ab37ed19d78de85eb6c6037f236f87d4261533.0":{"name":"@sberdevices/plasma-ui","version":"1.94.0-canary.1181.97ab37ed19d78de85eb6c6037f236f87d4261533.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.74.0","@sberdevices/plasma-sb-utils":"0.54.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"97ab37ed19d78de85eb6c6037f236f87d4261533","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.94.0-canary.1181.97ab37ed19d78de85eb6c6037f236f87d4261533.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-O9vIGp0PF2AoT2lQFTbuxsSDaIt6L0FMA5kjHEMepu1lSyS5tt6nOSGfigieUFFEoxAH3No/KGzLjdIHQaQwIg==","shasum":"bf3954d74a00ddf377a646465a860141584b1452","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.94.0-canary.1181.97ab37ed19d78de85eb6c6037f236f87d4261533.0.tgz","fileCount":944,"unpackedSize":2625347,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX2SFHIYnJpUEqOAC4exlJkpDxacAPBJV7RbrhcIzTiQIgRDSJ2GuskI3AZ0klutMSvWYFHlD6nsgzwBQzaK0cKzk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUAVhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO1A/9ElljT6DRsnDH5JQiisgevJ4cRTwPUEEVuSAJbp4GlBlN6AND\r\nRPU7rD4wAtfvmLVUeYQPv/UUiBk5u2u67Js4eXrpF0eEtRGwT8hrNK578MRd\r\n1W7fLdPsT8cMLmNzbWPOpWRX/lFOk/quiBQ9Tg9HpWbmjLqb3TzhZ3S+4dHM\r\nGK5gVYSHcAS5mAdmfE4ktojT78HrjXzyM00er7XOd5Ymq6vEKy2t/iRq2hae\r\nF6a2a6BqHkqwQNUKDakPxPOMSTViZhXzYDiyX8ZgaAiO0y282Bi4qG2Qqb4e\r\nm3rBAxHaCVv4rvFqKzroGjbtX4/dy8iy3E9lZFPsW0ly41B/QIWa3+WlPixe\r\nE5Wy7iDMC5pXKMJI+ZSAr0yrV6lpWX/q06srd9sjRpxPrvTEOjNIEIATadSN\r\nlJFtjcTUixCrAWvswY98wYgikssj85nUVCwSJvoclloMQ5p5xXXP3s7NLNuf\r\nXr2NBa07CbwTYPnnjKOwsfZO13iHAD8VSQCIbiY3TNrHafUdHT8Micy+Vug0\r\nAlqvJ/Ic6RgXM9ReNYIFXpxVvvMTnc/roWxJdHZbJQ0KapUxMjw4tEDsV3aK\r\n8fJHOZX4deiMYR3qDhyCZCfrjvRScGmDMfML7M2fuXoU/CzF07Obr2EvgnA4\r\nTN9k3ZTT9QqdmgUAODRRFv3o2jlHnfUmiHw=\r\n=51oK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.94.0-canary.1181.97ab37ed19d78de85eb6c6037f236f87d4261533.0_1649411425508_0.2949880323466838"},"_hasShrinkwrap":false},"1.94.0":{"name":"@sberdevices/plasma-ui","version":"1.94.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.55.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.74.0","@sberdevices/plasma-sb-utils":"0.54.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"07edce32665a2f796c7b741b00281f36e126458b","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.94.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-6rTHX1rbORLFVGFZIsSx4HvVHnNmbbUeFrzqPseMfAU0sLT1QJpJZOuWLkJcqvE3PLn9GFRjAwPDhW5wQQEH3Q==","shasum":"624fb46dcb8311b6d892eb4fbba731d3df3eb3a2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.94.0.tgz","fileCount":944,"unpackedSize":2625783,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGrlR3Wb3J9/Fj+KqDVVRikx852fz8ubC73q4DlSVIswIhAMCFwKyztH572+zVdpeWqzhuclPbxEy4GBZ5U1jA4AGK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUBdiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3ZhAAogeozAK1DNO8ZMI3Sjhs8QNczYdkWed+nx7Z09UfpvEDycnG\r\nDn66MgA8mRorLUJwnXEBRhtj4Ed6RlHFQ0nt6IsV0+uXMBzT1qeKDRtMjAFD\r\noYFmuDLxElvKnrOrcxQNsrq1jWaJbHdXCHnuOrFHFnTbeVrV1+Rl4qcccXVX\r\nqroZoQH51AcjZKSfUZiSL4VtllS+nBFdj1ktQbdOZAQdv4UvH/fSjLlaS1CR\r\noIb93D5/DpMOh4EAkNt3dZqdqsBfja31toAvpyYhfCnk5IkCvBaBQqUOeXuZ\r\nxpCwOz9BNGkVyERykduntVmG/MfodG4YUdONsJd4hrQnmN+47DP+oG6gqida\r\ngD+yw3uSWnhAAXVleQQjyaCN8SkCRdOSzZmfdweSbmGzKZ9l/lhgCaJs0+uy\r\nqVkeNNz5OTN8+8Zm7b1w6zF2b86TNtoXPkGm4XoF41OIfQXAelqtd/5fFX7C\r\nxB5e/t23HiZv4/AACh8hIP+HAEzaOyJE1JeGN3s30kwlKz+q5kec4wg6wqos\r\nhQ/SnT8EKzguJ25RRsEjxy3++FOlCRdcSe5dIiBc00XNLbaOhSjdeqp+4KbM\r\ndklv8N48q2hGEak+WG42LUvMT4g+I6eE0ZmckhfoSknfNFH2gZciTXnGKSLc\r\npFZE3J2oiqyEGBmXVUIy6AGF0VQUVeSvZQo=\r\n=FNUt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.94.0_1649416034003_0.9879448214244164"},"_hasShrinkwrap":false},"1.95.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0":{"name":"@sberdevices/plasma-ui","version":"1.95.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0","@sberdevices/plasma-sb-utils":"0.55.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c221296c0cf5e727baf52feea108fba3bf3fca45","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-HxVSyv1SDC3fwg/m2adZWnJhSq/67EC5sY7iu4RO8gQueAgX4BTafid1ETePLQ/aZUV0bIHIFVhR8xtM76Ffsg==","shasum":"748ccaa66a154249127627c2414facc635495b0e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0.tgz","fileCount":944,"unpackedSize":2626713,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD31+ziUps4o4hQzr10i41nWmbdF8D4+vjHilxq1PVtNAIhAKCLh84aaJB6s219m/PRTi7mmsXgJXhOhbhQQpL2GJNF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVBPOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZTQ//e/4QhLpd7NroFcPdP6eD3Y31OKLKGh9FAKaVF1pVlslQ3RCj\r\nSdUTfOoX4XZknWVIkrPwdSak+dAUbK2VOP+lnPuKT42F/TrmE1bwwoLdJIYJ\r\n8MNIJNUm+ljjK1nwkPzshYmIn9Hj8cQV0WVBXwG9U7zi66MYqwxyr4T7Zu+7\r\nhs3yq+k1VQ16evHCVzFMLba0+lHrx9Y/is9ttYbrPVsyanh8+beFp222HeXs\r\nQEVpGPfJejRcMWZjFu/Hcp8sYRwrX0aQcFxpd1twzzqlQ2Hj3MDN89+7Mf0b\r\n7/2Kbch/sv+RE86B6iOTc0Mrj4Ir6bJIag6i0YfcsYOR0RA9Ow7j7fr5pPjj\r\nqYl4TTBzsaRmNxv/rqVXBnjqlEN4elu7UuuPox7l12euUQsaXItJ2ax/Xw+u\r\nhDbq9XbNEhRxQo4oJLg44Dnz4d6b+3qzuPNErAqU1TsKsprwSdTRky+aQD7U\r\nafW9pmJpeL//UblfMAYqrJJ0qEabMoYVtIbbY4mPNIborZCn71ygZIOfUqS9\r\nNjycaJ4JGkCFiZ0gwmCfoqHPFZrAQmjkPP0Tp4eqZXf2BOsUZk/d/w3shj5s\r\nhs8QXOO9K3ySgMiilCTQ/86t1etO3dWMqSc7K1KxcFDyxvTGDWKNtrnvEhl3\r\nTNO2YZ/p7xv4otmFeoal7xpWR032cOQd6F4=\r\n=pXxY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0_1649677262027_0.40588158843489164"},"_hasShrinkwrap":false},"1.95.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0":{"name":"@sberdevices/plasma-ui","version":"1.95.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0","@sberdevices/plasma-sb-utils":"0.55.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c49c9853139608f981b87d790346b86ff2db1425","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-PpVndjin3CBRLWjOKY+XIB6/Pb1TRjnO6CPUx88i/5tGUrYKXXLJ0PxYMV/jn0rI7vWCcLFnbb/kFr8Wn4f4Rg==","shasum":"fbcc6471f40e9279c25fb057fb2346e6ee302caf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0.tgz","fileCount":944,"unpackedSize":2626663,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO5bs9ca0qpTpmhINrJaovObIaQ7Ys7Xn2Jw80K3StMwIhAJqhjyI+prSyLg1bXLFfb437KSuUoArTqlhlMcGj3ROT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVSS3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwPQ/9EpMNBwY5MkalpkLWARFji2NAXCdnUbaXgY/V7BHyJv134JQh\r\nlU2HI3TMykc/3ykB3Mykz8lfR7PeTU0A7ANizqH+xNjuKeIiHZT2Xwij09gm\r\naQq8ftDGmthGhHOP+2JYVsw36f1oaXA8QW3EiW308VZSvUSOu2uX8bVdnnAy\r\nTysrjXAyZrsmI3RaVX7/llTG9iSwq7POSIu1juStA4UR7YCI4Zr7giHPYoh+\r\ni3EVRmkwA1vVnLwP/6tyDTybSYgPXYoyRpHIchu33c2qYKOQ+oHHJ7ieI5bU\r\ncDlKnJzbJpugbVhh/N5H/KOO2ac/25cARB3oW+VhqE4Kae7fwOgfQdsAstuj\r\nd9tOcwPtBQVXaVqodhhOlElFnXZr8+7pABE62cEo2C4+8TvmyOp8IR1wFryt\r\n+3ll8YhamqqathA9/CmGjof9sPB6I1aOnBU5qy338VPFZnyn5wjypbZMSCCd\r\nIq1THinDZofK6AAXY1EHt1fXkhQF0rcXNUVEB3jRv8xObbHvGsQ7u7dEpNg+\r\nRPOdsK8R5doFYhhtI6xmJ21nADfqmU0DDRz9XhaPITJPmi2NLaJ0Stb7TOFB\r\nPFuYVkUxdw3CT+Q4uFWtPJ6YErkq68RxLmPpIoSbxfQC4GjimDDL45B8PCNN\r\nVtO8I0KdKzCanRsnJe8T1sjUc1VR7MCrLmA=\r\n=8xNs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0_1649747127411_0.7997687836902116"},"_hasShrinkwrap":false},"1.95.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0":{"name":"@sberdevices/plasma-ui","version":"1.95.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0","@sberdevices/plasma-sb-utils":"0.55.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"5efcc7d7f9e2526d222828be46b19844e1f11d8e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-jB/CN2autToDXNVlDkBqv7ejyOfPWtmKnv69uOCVEgA5QuySL7s6NKaqc9vuArf2+M3zXguUWZgKaWFqBAkWHw==","shasum":"611509e6e2cfa9d42a8855479ada2e1336216a0f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0.tgz","fileCount":944,"unpackedSize":2626663,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAuscvY9HysBZcWjEQtcdzcKi7BxNhM+xybxYZAE6GEQAiEAlP43CfKRH+agjIHN5pc7QFJ+mqLIGBFJnZpzDUcrynY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVTSLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpoxw//W+AOlKIXUblHZ7jlgAFUO4oOq1BMFrfYntBwlsc5drYmsQxE\r\nTYwVbPH2p9Zsy6OE5uTimV37O+3hkgWUmIr19lp9pB/yC8fnGKnEG3eOSNvN\r\np2VxXooPp1jMH/v0mPlVOhQeBbn1ZPANq8FMaxc4cfupm41gtrtKKLBEIWuV\r\nQIGEu5Je3AwOdMwG+EPssDam6ujzsxKWlfWzGlMW9qLBgqbeBRULVxypUtwt\r\npfW3IVTA6RPhePbMvlImUl0VZhUdNegglx4Fy81HystsyLyF9KlzGzQ4dcb4\r\nBzpIg42i/CqfUbUG2vQC1eXcnCud8XYkUpOfxh8ov4Qz+ZzqYKRB9dNtLMg+\r\nZ8I5lhI4h0fu28exNqdolErnmOKbMPhkZLBz1AnX4aujggtRWp44xvR8XGWw\r\n5LRSlRrffFHEoj9MqQGg6L4lqC98ZTlPafBrb63/CVONtnmZ7RsuxyTEhQKY\r\nHLG6ypIV/tiP2kV8US0XR2LBtQml24stxQ3sFSXMt5gsJhAwG18mjxQKHXl4\r\nK1pDXePaNcod+TIAN2eBwSybZpM9H28MRwsLuwwNpzZdErtzJTnBAmvQ3FSv\r\nbrhzdhnTbIeiPFZCgwDvgLXwjzmkZiPs0vOpm6RK/Z6fpcbiOF9tlTIVjyEL\r\ngtg/iyJ/6srfEmW3kEaERJPRd0UpAMF4UUg=\r\n=O88l\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0_1649751178809_0.32156330441484293"},"_hasShrinkwrap":false},"1.95.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0":{"name":"@sberdevices/plasma-ui","version":"1.95.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0","@sberdevices/plasma-sb-utils":"0.55.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"75a56f997eb9b536003917b87d80708b2f2a20a9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-jKvh1EBO0NKQetve9q00ViYCysLbhBvM8/X7Bj3qk8mXSZjWRrn+mtl4jPYrj7aWyPBiJZ/wLpsyD+mLcv9/Tw==","shasum":"248e63e52aef2a8bef0ea3e0fabee73f3a0c5ccd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0.tgz","fileCount":944,"unpackedSize":2639206,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLXcDpPuJZnlnf1nUJ/0Y1+uunaT6pv/la9Fmu50bWXAiEA9AC99GfKYH7pVHCGs5EVXp7UgVys9M/gJS9pTQFMG+c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVX8bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6WQ//QZCgfSiuta8qy3I6Y4LBRsGhLNiYRtWta7DWhqjHJxmVZu9l\r\nx2WHF4c9oHVdOWKF5dG76Vvh06DJrVyiG2Bz/gWxi3CsMwqQlMoCO7JYYtKf\r\nzLq31VvmcRrC/8n8yu8vyf0806PzzyuEHMprkxJ8tF+RDuLUvE2KtpXM8PJ+\r\ny6n2Gu0TAYam2GozGrvzQUfVPnx7/3CjiyPpjrNxF6qPreuVLxwksKoWHeRc\r\nzNIVqoioDPY3i61fWi11ZYYQE7j+5nBc1F4cCFO9Cms4xix+v+SvY1Na2CsP\r\nkiJ5xenMrhMLAExLQ0BnNW2wYWvgAV7i41FwIwh1cl8OIYkqzE4wKjGibSi7\r\ndO5qCw42fm7VxFVY3cTAGlZukUQL6Eoq0KMcgEl9beRRqYDzjFRmMFcsI14i\r\nLPZ4zA1ftnHonvOrbymBK6oNtPK4ifDiIyHnl1SCmmvKOL3sd0D4QJ3aw+S5\r\nI8j6qNvEJmEbYiokvVp3bFeALlcQy0GbGjtjt9bxVkXzwlw2nJU4BlNZiZgu\r\n7vbAvhdhqVZHnjx2R/2clyi+MxkzgNAcln/4bD5EvBg6Ss1G8IkJOr4pI3jj\r\na/0Qqts+MbL7DBLJ1XpASyPkgtiyySlhk5C4JBghxYALHrdJp6tahsfJ4FsG\r\nOir5R/HVxti9fCc9LA+lMd9PaOr3SlkSFw0=\r\n=2/VL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0_1649770267275_0.7718695212295934"},"_hasShrinkwrap":false},"1.95.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0":{"name":"@sberdevices/plasma-ui","version":"1.95.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0","@sberdevices/plasma-sb-utils":"0.55.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"203c3a966d3cbaed65d7aea553f6a42d76bdf145","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-6Y8Ak36/lSL9/29G5yy73zeDyuBCfy6fUyNpipZX1nAVRv3DYmxawi163sPbCoydAKeMl3RHutcEf6q8uTxxmA==","shasum":"c047c89c6c7a2c657a55dea718ee54f38757e184","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0.tgz","fileCount":944,"unpackedSize":2639028,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQZ8mdEkKLQUuxGqA6yaRon2f47NpGM9L5tUaYZbyY/AiEAsDlyuBVtuC9sQHD9jstpGZ7wPP/A3xXF2+G8ngdIbQk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVdjDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFbA//UxOM4dzMb6Y7a3H+oDYiWMPHfPYfBeCjZJpf660Gw2cF4yOS\r\nMpfbR9zC1oWAgw7sG6NlzsO5OehNQl1OCDvopWL4miYlHKgnKjq5IbOk349T\r\nHC3ny1y+LAD3pSz+2B2TRr1r53GHGn1QSe+yYU8Y1AN4jyszf/PEKJM8eXME\r\nzJzlXMGCWBFH5DSZ2AEVXclfcaprHHSuIsVKPxcTy11a8KoA6g3I7/CMaKwW\r\neiX7SakHfB5Y6ahm7pIIVh0UKLmsFtfuDwbfcu1/Wb9pqtSbIxVOpQ2+IGj+\r\nx7JnfzKrl0ZtOMILgFw/UBneaekRyoK790jwbBrHkfgw2G3T7wF7Q7FfplSj\r\nUFuiJJNo9fUlqmr7CZIkHpEg+NkRKn6ER+URSuFZStBPc9katA5naSvTL6Du\r\npExPK3MFObupc9wVbUMnBa+qBTNWEWV7ydAF+VCQloXSF6shU5wEUrsndaMK\r\nRmmsCNjeELw0NJdbOkqcrKxUqy8uj5zt0Y5HuwvPJInblAo+gQhLiTg4i8Y1\r\ncbhdGbQcBeQtvSsZhfLPiUjySgXdLZJEdtor0/Oy8xiAbCCXEJyhd/RAjHBb\r\n/h4/GJEes7k65st3YhdlwV+yBZe1CtYhQxXo13Yi96Xc7Dqizz+L1AEqEhZV\r\n+gVc4FdlFLwjBYOb9+Cxv3biVFnzs9kqKe0=\r\n=Aar2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0_1649793219117_0.3165240995607417"},"_hasShrinkwrap":false},"1.95.0":{"name":"@sberdevices/plasma-ui","version":"1.95.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0","@sberdevices/plasma-sb-utils":"0.55.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"92253634c5e99b1d2a86ef989b8bf9d858f4cfe1","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-w3gEVYSpPMzFwQ1nvsHT/1EpcFkOayDlzn7+I18ae/7nEmzHEQHRI94awq1V9ZnRlfpEG/qE1iuM+fqlUZu9Aw==","shasum":"5b077a2a318c8e907c680ea3bb4bf646f66d7e09","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.0.tgz","fileCount":944,"unpackedSize":2639498,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHxHVOI23/kx6bZ+e6z7qryfUGb7kOjhyt/PB6z3L4YoCIQDI/Y60nzCmSUmYF8mOVxKmFbRA0sk2hXk9l9jj/pH5Pw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVedlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ5w/7BJ1MkQ3dUcsuM5SR+bOxpvhPF5wGKkFWmoq39xuHk75w37ne\r\nzUKQR7Va8zQ27vhgPgEVztr2KhaDiKcpvjxv453TLceuJ/hC2N0Lsd41XQQ5\r\nWB0foQ6ggoxvoF7gG5M/e6YttBLyCQeBcVPnahudfQCKpvJtErXYePZ9ux+I\r\nxV3JVTTciXACNjeubnDUltLh+93ag2ZG957dLjJnPFP1t0ilT3w1e5yk36zq\r\n0EDknXW4M+M0crX1ABmzK7vBKFwCHqsmNS+lvRS47KlEINn3gF8QY2k8IEZE\r\n+OuMeJJ+L5AS1eVn9N/wcfVyK+fpzNgwk9/a/CS7jJCN4uYYyo68LedycH9l\r\n9nMaqwMi+85f5O50MlVUlzKLKPXXZXy0qbgaGkRYUzTzHh7NwU2wexjvw0zP\r\nFmS4hI8c6KMTAY3XK8HvMqsuF4xz2oeK5T1gHiSL+6zyaxSj52QCF2ppvczZ\r\nT58RybosS9S4a4GwoXw662OJf+H6PJENtEbttNrMSKoarRiMgyQuZbK/ZTAl\r\nsJHJqWl7UE+8dm10bqSVk5ATxwP5rQwKBWtlao4S2eqNivesGH84DVL8z2In\r\n3mquVreIQUXs0jzA8OtaDhnmRDAK4S9rJarqTzVq78BhXJc2qfOOrFOPgev0\r\n8v9c1sHuRItv7OzLXeCa2lzCIsPEAxsd05s=\r\n=UaVV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.0_1649796965199_0.5370960918335415"},"_hasShrinkwrap":false},"1.95.1-canary.4.b73b2fcde301505fad7d1fcd268469f6abfa02a2.0":{"name":"@sberdevices/plasma-ui","version":"1.95.1-canary.4.b73b2fcde301505fad7d1fcd268469f6abfa02a2.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.0","@sberdevices/plasma-sb-utils":"0.55.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b73b2fcde301505fad7d1fcd268469f6abfa02a2","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.1-canary.4.b73b2fcde301505fad7d1fcd268469f6abfa02a2.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-Y+pR4xY2ut1W99LC4t44VvkoLeIhuOSyXceu1jpRLwG8bsZXmo3eqB6lC6PEW22xGZmj6f/0orXNCp4HpdZCfQ==","shasum":"943ef1c1dd3f466e76000986179ee8893e9f8d52","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.1-canary.4.b73b2fcde301505fad7d1fcd268469f6abfa02a2.0.tgz","fileCount":944,"unpackedSize":2653771,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPrW8A0aBOgaCuJkbEo+wf7UOv2qnKxrGyVdJeyeDyUAiATRFAskJmyO8CT+8hWyfXXtTHq7KBO7BimGy+z/Dhvew=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV7NLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyKRAAgxV6mEN0EBHyg3UBrLlzaCykmzRSEvohqbQ801Zhis0sBoDR\r\npD3Ufgu5altefqVniePRyY9Sq9zDz2c/l9nbZQjm3j8+eDgUIkRp4VczxA2L\r\nwNxAWglwivj4fg1nF5jdh2VNGqh2+pFSDU2ElgVxqzv+hNDEBeHSC/HL03VI\r\np20YpQnQX6J+0nqd3Bbb0mqDyhUR+TBx2x9LQP+oO0EWUWXI7dkKdG35Y/hc\r\nO/+5gHDvK5rnn2z3X2VZeM4wTjbSBpK230RvHwTmRGgjmM22QBpmaeHLGluh\r\nrOcFVcIdjDLHIh5sva3RXNMaaH8PQv5HMb6dJEXtkyJGJgQtHDmz3nD2RN1k\r\nJku7dJkn79irUUy4rgNnH+6MylnRgYJvqZOhavDOsxn3hKVRhdzI2lr9Ecqe\r\nmSWmMPzk+9zip8OZ8U2Byf5j1+PV0wUSnaWnMbyc2Cfec2Bbi9AGxhNdjPhW\r\nW18SxE7X5uHIrBFglTnHZ1dCMtLm3YpXAK5Macx9N3+3rg7T+JQO8t9qg6Fh\r\nXpqB7b2OQaO1ET6EZE0yOSJdvk8MzAUsNHIId4D6BN6RJpoEAGXZDMx/L8IO\r\nWys/Gy05WuEVu6E2MKlMEHBu+kURfKSD3qPLWJXaDcP8QCjk0i8Mvbg9GSwa\r\nfpS2wtaT9p/pLcFGBAk5W/DziqHnKn5b1v8=\r\n=04SS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.1-canary.4.b73b2fcde301505fad7d1fcd268469f6abfa02a2.0_1649914699549_0.09411663251181324"},"_hasShrinkwrap":false},"1.96.0-canary.5.692437e99520469b781ae5031fd517683933334d.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.5.692437e99520469b781ae5031fd517683933334d.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.5.692437e99520469b781ae5031fd517683933334d.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.5.692437e99520469b781ae5031fd517683933334d.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.5.692437e99520469b781ae5031fd517683933334d.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"692437e99520469b781ae5031fd517683933334d","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.5.692437e99520469b781ae5031fd517683933334d.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-sY2LTLWv5NHTh7YJqdprGvEIbyDu0e09hhONix/TP/m5N8PT5wm3mukx3rJfNUZWCrh/1eT4VvM1tR3G6gQPnQ==","shasum":"9aada55873088d026a9506584b08d6cdf9a09e3b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.5.692437e99520469b781ae5031fd517683933334d.0.tgz","fileCount":944,"unpackedSize":2640366,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwMXU+YTD0nIGVU6g2UU5HuPw9p/KvNUZ7A2Aw0zY2/AIgP5MAYtjSawdTkjcM/Hwtyn06TZmQxh/17JWgWR0OBR0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV8f2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqecQ//Qz+hnIXR12Odxjz2+gP5k9dQ/hpSv8kRVdJsetA7HlBciK8z\r\nyKzdjccbIyTf8LKIJ0P2zbWDx+tf1u+/oimZ2YkmtDe54rid/8CQBlnTfYX3\r\n7OVStXqZy8Rj663FwamU9wpvf05KW82b2LNPmchfmffZKT30LJ+2HTQUbvFn\r\nhkrgpdZHgLBjKYMxbjhKmiaXNnSUhusgU+NE5c2u6bt1RoXeDg2Lcp3nL1c7\r\nfCnHu1kCH0kPYRN5ps5VsnbcjZUnn93vM7DpTJiLpmwhasAiBdjZMwD7kaKQ\r\njzXb7NLcMVOf6Q39R56ZlhhllORE+hvs/o3GCSDaCQ+17Q6ZkgqINKZbiiEm\r\nGx1ILzFXqdcbVgR34No52E4xGFOFSvxjg13uYpZ2qKJYF0zdNIB3KRvPvQkp\r\n2UqfJFyEG7WM8ka8ayVSIkoPtWL+RAAuQgNENBb3dzDqCjOYVLG9kwI6279q\r\nSQXif5qWyRGLauhBWQCzCQ6xsgCJMPqX+6/xNTWEkM/fKEEKNe9UM71V2vjd\r\nQsRNGfTaBLFKPBSiFiZUVinbMCPLb5Y3MYREO2BnuHcL3anVv21cBiSEAX6v\r\nzGh1GWRynfmxs0SuH6s32lQo38RUftsm2tyM9HQBlFd7aCD9NoZdIVRmoguE\r\nfjlivJySOVUEj2PLg1kdNTtdcd5AHytgDEM=\r\n=hNvn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.5.692437e99520469b781ae5031fd517683933334d.0_1649919990161_0.592033669948113"},"_hasShrinkwrap":false},"1.96.0-canary.6.c6f2936c44734a6e7bebcfe362c2692736e22c4c.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.6.c6f2936c44734a6e7bebcfe362c2692736e22c4c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.6.c6f2936c44734a6e7bebcfe362c2692736e22c4c.0","@sberdevices/plasma-sb-utils":"0.55.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"c6f2936c44734a6e7bebcfe362c2692736e22c4c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.6.c6f2936c44734a6e7bebcfe362c2692736e22c4c.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-T6li/EW7byugEoh+l04Z0SCPngttUdHpLFA+poIMUvXOcxepDQzXarNoYGbXNkfjjvkgDNDM8kOoXiZXhsw1eA==","shasum":"4be192a615a33da1792a5bff0844c8870d048960","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.6.c6f2936c44734a6e7bebcfe362c2692736e22c4c.0.tgz","fileCount":944,"unpackedSize":2639602,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIcR63DgAJ9c+HlWM+fAURCsfNSjpRO28P3yJdq6uNwAiB4dIdDGSLuYrHVxqM3Li1P2V3wT2BRQvvWbh7+CXmlbQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV8twACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOyhAAoY+Bnzzx50cgmxPrf5no4Qe5Ne1FZTXtZLi/Y6Rx9uttQs3H\r\nFsEEX2LcWgOtCS98CX/UOvu6yxKT49fWzFrQQtKKZ30RPLBYKiMowpmUUdSt\r\nUJRJbodbfS3PUoXFqytaVqEGZJT4Jlx1V19tQOMUtcsiQGfAUW0yKSingoeX\r\nTu8ICh0KP7zR5KGAT1thZQE2Exr88iIESpieoSu0y2C5H4H3EcWqZ/3ZclSi\r\nZWJg5i6VVv7xdWXi3cercjLTk7h4voMyC6tOcQLVEw9d75EzPzP7FbJJFx5A\r\nLsHJUS9zhGJKehHRP2A9SDzhyfzz7vUhbo/kkymJMp9uyIoPOTiVFP9luSze\r\nQkr7wESxVBDmEzRdyYBC7A3WQRcw0LlbjrwFoDnNRwleVl6UuZsDVQX8OdX/\r\nycXlVvsV2HKRqmWYBqB10gSssaHz3IyUUoFjYgdAlmRnboSlKYnnPFpnEW+0\r\nizGl1JXQlqcuDjhJ9C7Qs+kzU+qin8CYF1c+cCfBHjw40ju6Utd5ACXxbGiW\r\nBIs+2mgaoayGkCpVs4HTTQv6rMQymegbPyFUxm5Lho8XLOerAVDO81GILj1d\r\nkZWEuLq3lKmZGXgb4uGVqugq/86MCNIwTt5Cpd862M7x9BnGBnR+i6XjkVNs\r\nb+ItvErTT4TcKL5vAM9Soyp4K61/mOHo5LI=\r\n=H5PF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.6.c6f2936c44734a6e7bebcfe362c2692736e22c4c.0_1649920880195_0.7154104267050292"},"_hasShrinkwrap":false},"1.96.0-canary.7.091e446321f786d153db5e9e005712813ddfecc7.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.7.091e446321f786d153db5e9e005712813ddfecc7.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.7.091e446321f786d153db5e9e005712813ddfecc7.0","@sberdevices/plasma-sb-utils":"0.55.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"091e446321f786d153db5e9e005712813ddfecc7","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.7.091e446321f786d153db5e9e005712813ddfecc7.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-YbK/zRhyMmZnTmfIsIp6pVlDKdCfRoqG1rK4qgwLDlqQGq9PIkZD1hN5OruY9ct7IBfZ20bH6Dl2PR5CqVP2wA==","shasum":"9e4b8d074331c4c04aaef8c4a9d94c3ca5004408","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.7.091e446321f786d153db5e9e005712813ddfecc7.0.tgz","fileCount":944,"unpackedSize":2639602,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCIBDAPm015ril8TPzU9jdn4TVITqO3ngG5uOCe66usAiEA0iIe5Y0BalMUTpL3vPhmetjdlmLxJvI833GaHViK2xw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV8upACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnmRAAmG9zQdv9VQiUAapwBex/fi/jSXE2AlTnBxH6NKYjOeNfcbuk\r\nbx1QB3oYYVoZqtx3PRHPhEP3q+IwKP7b+dmsN0zhgsZE3rQ7qC7KU9ov5BIc\r\n4HxZ3Unr+uSOu66u+qxNcs9ZkF58YV/PXZVncpetRZm0XzZMGS5Xqudtv9LY\r\nOPuGcGazTOlTWbqjQyTRVihEbdTt42bSR53Gyw3H3lHL4HTfBer7XMjAAR0p\r\nFJXgV0JX13RLidLsXe5CVVuG/Q06UFFFaSIx0nY7aElIZhopsuryDAKrVzVW\r\nfl36Y2hFyApeyhBZAK0nN7yNqZJsxD3L+1cfmn5tnUd1mWE2dGcXoYzvCdv+\r\nFA0hhmnLrH4U/q423vW4KXeKdp0+9GRtCUD5CgIbhGtY1UXRBmoXgfwiVgvw\r\nATLo80svDxLhMlHQJy2vbJHH0/VrGUovjzi1DVM8G8rcKUr8T8D1kE/VGIzC\r\nbAfsI6lqIw5+ZaudTlH51fpySMwtvtSuKqrhW46z56AVdHbtXh+eVZ4Kt+hp\r\nKh6d+jH7w2lw4ceJk8KXiSPGCEs06m7C5iFGsObsbAWyDB666ChaGFMYdxfQ\r\nBgJSsxESfQ0HNJlwX23hPlKcwBIHxY3frFtZP0gdrhMPRVBYkmthW6RPgqNo\r\nexHGC73aNrBil2ViMmQfS2Q37ZeCq2hWEKE=\r\n=amKq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.7.091e446321f786d153db5e9e005712813ddfecc7.0_1649920937495_0.3706987333777929"},"_hasShrinkwrap":false},"1.96.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-FrGoQydjmqMIoS0JRsnu0IlbV+qeBcxKMlnJfsondlAoQ/nKJNl/W84t815s/p2BfwkbBKm19LkxVSBjK+Lghw==","shasum":"1322c5866411498f3c9c1b467c2bc8196680ac93","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0.tgz","fileCount":944,"unpackedSize":2640366,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIkgTLg2hwmm1JJNtuT5EIZlJh0RTlGc6PkK1F3zTCKAIgDHGBeI44aVJZ7kvBClNsmr5QakUxTq8KqVCz252cQ1k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV/adACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCwxAAoM+HPwy87i5/lTWiTm2wyBSPZt7AuWLy+2xMb+Jg/LQbRs4o\r\nAWt4Mn/YqX4cTj3NX+upqFAZevSW99V5UlJmxa+kRjOeAgj7SgQz6t/3lwoi\r\n1/JBzPiznVseAAmqVY4e5XrfiAZSwa1Cllc89Seo6S6xsQ0BcKINVMF8oivC\r\ngrUqBYIQpD2jLHEt/WzbXAbxIFNVyfu7gTEcwO9ZILaDUGYfkJsDE+jSUneh\r\nNcZe260Ztw0644Mkj3gsaLrYp3nlt4LPEqcfUSMiA6ArWnP8tIFox7bLW+QR\r\n5H8kjUjEvHorJ76T33hw88AJQrnJRnqELJ47DVfTjwRCOCrrdg45FuyusJQU\r\nZMbvEJu07aRpBFhIeJ7UGDnptSqe6NIhLfkD6wK97u37g1L748Z9NDOpZRDU\r\ngyIEt/2iMXagf/VndODr0J1IMoUYdxE9MX0VPRPSj5PFt/ja6T4+cOTyH0Pi\r\nKzTIU/wih87Hasw6V7aaNeiYse2UE9sSi4l2LOJNWhz8wca5jJJGc+4n751i\r\nM9m8BoAVG4debE3ejn9ceJVMjBNvGqTjrrRaXprcmoAhYynKvuPy9uIMYwrL\r\nGzjU0jSiNwKMN2Mb0Dj8BVyF20h53e2j6sYRMNOdlyVtVoFiSopXejzMcP1S\r\nvZDlrtxKb8b1ki7udOzfSfJFZCwIWfn/XWM=\r\n=tys6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0_1649931933187_0.5703868450915539"},"_hasShrinkwrap":false},"1.96.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"ef162baa4185a6530417263e47870f311bd7e15c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-/jpHjbNS51RinWJsM92j6uo+rLG/SB08GISVpik0cpFHoS24iVkvopi/kqmMcJ1l6zPGD8383DbHx+TmdOXe5w==","shasum":"6551543c5efabf551d4c826de2b54b56c7a33f55","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0.tgz","fileCount":944,"unpackedSize":2640366,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjKkDC4OgwK5yh+R9cgEFJqCKz9XpRY1IfJDmaPXkafAiEAyLM0EpBevUR18pp+xpLd47hXiTlUNMka0q2RgdiMYKk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV/eOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq8A//fVLE17+DLt5g1T0PR7tUzCwSyTjLvB6aCjUKVOF1VDY7g1at\r\nLxfYA0VO6ReO0L/5NC5fndzDuCwOvWzaebYTKGzEPZ+o70prTAntvdTpaps8\r\nY1+onn76JyW9lCIB7QT3tXVRkYW/34YfVgqq8ge8WVoTuZmdKN5J+u04pGCP\r\nEeqgAoaGccxvvYx9mzsaeo23WhlK9iszLL2qBs4LLYjykRifG4qlocJCsiz2\r\n/QD043suJCdxGDzVILSVrV5vEsLdPgJesq/IScWUtyTezDzCHZyST8JMdW9M\r\n5Pbg5dQaUnpoE7LQXqagrjKZAqwuWHbycIiDiqSOt3LNOXUPJMMrmaNT4ZyY\r\nN18oSgQlyRWhwHMis3QMx2LyqiaujoBFoiX3R+4ExxturY99RfyXiRha34gz\r\nyk2FQBCHeK54SS012hkbSSrc4appOpFpJ3P+Bao/G4A6O+g+Lo37vGcfAw0g\r\nSDmeaxsLhpp9g+RPFFoPjxc6kXaoZ2sPq66LoTaPz6fLRK/dy8Au0ub2fYJ2\r\nsbFHJXItHp5z/tonjnfcNmcWBC9H5UWFG+cCUw3O8aHZuIGDWkriKyf6uAEn\r\nUuq9b2MywHwwWlwIE2pD5wHlNShuipBgkH//UNrrJrohd7E9FsIQm/SesRlt\r\nzNJYA0E9EnjbSBR3RzfykjFKvbQjYJzy4X4=\r\n=ldnD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0_1649932173827_0.8449186960177641"},"_hasShrinkwrap":false},"1.96.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b4d82db0674a6a12de68e8c14af983536886b14c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-rhs/k++2AXTkL57i9SZlHMUw8e0OfKz3WtraRkgVBz3bEaOxHR6kRT6POfZJd82O1OzaF5OZU+SFoo0HW5z28g==","shasum":"5f5689799e6597c71cac278f388e6925b63955b5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0.tgz","fileCount":944,"unpackedSize":2640370,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqlU4TCva463z4JrtxC3V/Ghvlw1gwF0gYzV2u2riJmwIgUxY6y55d6qyJ9TindWv1GiOTW7P+5otSkeIfw3fJcFg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV/koACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovEw//evE5DuZ21Rs9Y3Y1Hhxnw1A1HGRBWDP5TFce1UbMxKwuYSXn\r\nKpraxyA32R4m4yG2PsUxgq1nDVJ7muvuQGqyhFwB2pBv9udg4ZiY+bTXmmbP\r\nFeHkrSsqx9yF972qXBj+yd7DalRzeJSAAYrV1h8d8kXj7WcJNrFdn+LMK0yH\r\nMZPddMLTwZQRmgXUw7YbYcXBJ7QfmdAgBilPQzB8cY/40Oj/y3vOStGIAczY\r\nXNfjTHnaIN0oXWbigerhP/HChO1N1A0l8BVsYl9p4Vfvl3cYukq3hNp57bhW\r\na4Cq3U8czEi8vKCgs40qOjFdeBvWAktzV/hAzpGvDxK3v/TqsUzlT6Snb+n4\r\nrVcLrkBN7Eu359aViQQJ18eUGCoB8+bjjNMcCkTcCf2tieg3k16oRzSN2ekL\r\nrXERGbxfSE7CJpGHCWucHYKvsiki/po9JgQ2tKM0DTFMS7ggIRR4dF2ddgJ3\r\nM6qjILkqyQUbSk6z/YeFa9ss0EXMaolWl0NvOorlx/QU14quwg8e8nW5K4Bx\r\n6jEHdBW3ngMzB6NUguGuK/T04ARnSrsJl0cW/xVCgC6W7SmnlgCufbloAl8L\r\nSAHNGNVE5cBqipzF99KckKKDDsMmQOYNg8bkFeFdWeZJ8EDWCd8dFvWlAUol\r\njOj2lqYvjb26FEBAPsr8Je7RG845Na856qc=\r\n=f8oz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0_1649932583694_0.5445541738431268"},"_hasShrinkwrap":false},"1.96.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"30ac0a068f587516965eae0128233b63649d87d0","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-iik+uynFrCcKiPtBsZR2g0WJAame6yFYuhQDMGXEyQKADC0xaBHRa7GrCWQhTZAlVFD45g3ewTkq1gNMpQikLg==","shasum":"2febf0949da1079a40f160c8cfdfe1b7f60ff627","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0.tgz","fileCount":944,"unpackedSize":2640370,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj4JfkGs24KTEPLmgmjqDI7B6pi1HONYrtnxplpf6LSwIgQdXoFADglK3sIpaTbc5e62AdbcU01VSmJCx1GjNJGMs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWAHzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH7A/9HYbcme9SucNLsN0J6FcpmLtdD5ybgwkPHbKl37Xyj0OdGA+B\r\ng5pxfi51lLwWgPZVEKZ1rlWzbB0F7MZZmjoojbWieliefFEf6Q5sDOS4KLj3\r\nTB5xSGU+cqspCrIga8Ya8Rigje8HBImkLQmyHF5eUEMtb86+feuzsMU2ByA+\r\ns7qUktkVVlc3uGMqYifeEWkOLuf4KN1NasDymQxx/eqg8IXpljIbPi96/Au/\r\nB8dF1ZBULYi7GZnxt8dLBY1jXdAYMZMb9mvpspn6Df8u6n/SNBdtTsRIkbe5\r\nX25A+afCDCuQ8Hway3rTigrCD0t9DSsbBTT0WXiqyAWXxFZxfjhnCDXyhbZN\r\nOCzYl9cVR8Dw4RyekaMcAZ9xL0+yRVjoW6Z4iHM327mSfZsuZkzABJUihiuS\r\n4Yhwv7A3BZRc1auUxizV/QeB7B862ZOckuAkmzEUyYngPxDyq5BWxYzhDIAg\r\nqImPeIiQF8fmpZzJ9flI0x4veNsnY7bF91I8x3hClEJ7ozGaTvZdRIm8DLGH\r\nun1DRaPjf3nQAleLj7sWj5whAEcxkd4g0g5PVa0Awu1LUV2m3/JW2sPXQjJw\r\nueCgS76VZZG5dYmWniG2GOjzCPR8ps+7z8k81NE/jFWnKuSWL8kRqJIpHpYq\r\n+qBsFDg32ZxfyMuUOYnTZWv5jwfeNolw0N4=\r\n=qG0h\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0_1649934834906_0.8928368717062842"},"_hasShrinkwrap":false},"1.96.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"3390e86b0a06428fb87cf1c95e1ed20afbd9f73e","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-nmKb2dtWRaT2zpSFGRunfJH5buTweM3Ft0ehqo2xZaVOTDvjJzGf2yIguRm+iYjKe8cwW+N/zMke3yPeXqRKfw==","shasum":"22d494c60e7da76e119541aa0ced0bc65f565838","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0.tgz","fileCount":944,"unpackedSize":2640370,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWI0b/6pUG4Li9ND4VGxbv8aIOtfEH9XE4egSoiyH5nAiEAn6kAUkX5z6TXAZU6YJwdBYBHKBeD/NsrO6HjbKoTvhg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWAIGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmor2Q//fZn6BXeaGWDAaMCEUO0IwiPI4sByK3E1utaVNiOpP5IZtEct\r\nAynM+cTxL8XRA8kAbtT23I25ZOGfqFE3Ue+gCKy2KlVZkWAAJhTHjWrfjyOR\r\n5Uqakt3llURTNzz4JFL3k1EWVW3qw5UOqiwGknNvBTAtcLkjIQCqdLqXAo9q\r\nP8SWjRwIuu4Pt+2nkwJZR8nEAuz24o5lhycFjUst8lcck0NumtP7MxQt04Yh\r\ndvBN94HxiY9QF6bK0QNHUWI4SeSudj00VY2Zj76exQwOL6oDs8xpCT5Yffza\r\nmlEXd2N0wqKpWh4+/pqYVOEf/lSGpwobDMUqA/EzdXl7Xj651I7KUvEcZkQO\r\nO/aqd36wZGuTvs79Lnkn7aQvcDgVDDHBqush4zaUMWbor2GiwTPPQT79ftHX\r\nRsuvJkVas9a1AI/40qZ3d8BrMfPjhh9i57bYwZ5RrF2+pwPVBlJHQ0D/8rWm\r\nU6V5c7BIb7a6ABiFAJj8dxoEdPZfS8JN8ndCpxZIuKUALY0yM6ysTLhcgcO5\r\nIYeWDbsX6pGhqaoMJiGPI3ri9gV+SXR9ZsVfZY2OB+q8u1rtWGMnLRZyj5c3\r\nZoATo6MimSLQ9+sHxgmi7oUTGfO8AQUibi0bXbYu4gWYNxlFyEu2tXbymAMN\r\nS2MP1glB//1l/BJ5BXntUah5YUKeqpHaprU=\r\n=av83\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0_1649934854703_0.9408626825790614"},"_hasShrinkwrap":false},"1.96.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"061c9102f5d0cc02bb662296ae2f9d288275a375","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-/Bvbq1dbRKMIkzVtc+/vjOBJwiYVdKuOUwQ+UBZFdPrtW5dMUiy9HqhMa72WA9MWXto1DyhZg8ibXTxEPNATDQ==","shasum":"7dea5ca1f04c1144efb75533b9dc863e412bfe58","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0.tgz","fileCount":944,"unpackedSize":2640370,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE438/Xe5IdI3StSnytcwAdH58EKIPndvoQP9fJ/+O5/AiBMipHFkwYWFEwh3NTdHX1d7z6oBFpHqK4/x1X1vzrsDA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWAKdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt7xAAiYBhmBMw0Eciy8cp3GvdqBY19S9Cz1b+NNC+gJTGiXQDOXty\r\nuYpzEwl2LHDPuUL95Eyj8ic7JGfyb1hFdIjL0i9dLOJp3XW8k1yLuaLTDm/n\r\nYyJektgSW1NNfUMLia0xGufFHpdEmVCLYaYh6wzqLr4VNnhHgDSlfFq81ejB\r\nPBEjQHwHHhRuXgt0gUxF2Y1RfVJapwv+dUh5+Pd+82f36zbZwAq/krJ2C6J9\r\n91+VtoKx4ybcrLk5HUKULgkzEUp4/WwZdSGxpGyBRAx+tOaeTCx0HVlbsTU5\r\nZf/AMc1mN7+W7xKKcglX5kowHLigq/BV1jv9x/b7fbj+a5Xuc+5dhYduVft/\r\n7eCfqbesrQbJKeG/TRmytnp5dtaq5WJf99UwBqJFEWqBpn+jXu4zMK2t/Vu0\r\n9VZaDuL+wo2fJVu42g5wbEXDLZEOgFaSssDeVtX8OKZwvEf1jp3fWmJgL5Jk\r\n2Q4NMnz81wBcabVWfr52IkuxvJq3LB5ghLftcU+QI6++4QdP3ayNz61CcFiX\r\njnCuVscQoC3g3fpRpHvJoHIszvvwmvc9kwyberrrsaCymoOEH/t8+nhV43/8\r\nY1JPuAQAt1Dy8kKBXFAra+i2B9KDpYvUa8xB04qiphtWeIxa3dGC5OboiJGo\r\nMqNSSCKK2qfDj5B+1G4pThLfgixfWAw7LCs=\r\n=+B2I\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0_1649935005327_0.14902127632944606"},"_hasShrinkwrap":false},"1.95.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0":{"name":"@sberdevices/plasma-ui","version":"1.95.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0","@sberdevices/plasma-sb-utils":"0.55.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"7a01883985e24a3d95a382c254228d5d25e84674","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-tSVNM33oYQHJjOFUkAs85WpLtbSNWFeDYjvF41OGZJ35nu5mvSqSG9lEc8Gk1XnykuL4dLZJSMSeCBBAq5L8gA==","shasum":"90bc565202e267d46c52804ae338bf9c723c0a68","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0.tgz","fileCount":944,"unpackedSize":2655195,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1mKcor/M752mXZONkNUMGJxvTY5oCSrN/6ao2qf27yAiEAjgbATRbaPL4DKicNh2r5jk8cdT+H09bg+VwOCU01KHw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWQy3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNYA/+Pxx3Es08prekz1HjpdiMmo0uHwnGEENaF8SPJVpHaZXU9JMX\r\nqDeLL0ag6VHL/kvvQC7xFrhNYXr73iutP2bKJizQ8KrSNRR1iPVt+BF3/J5r\r\nK9qv+14cU4/ij/+tqDMtE53gMRafiepVHIzQYIvByHGjrB/7W7d3OZNqcbo6\r\nlOl/vunv/cRKeCoG9CXt4Qt/GdeuWUDKZw16CgOw/9UQVNjquFMx6OHGA/gF\r\ndkxWG9870Gjpoy3mk00Hy74RQe7FHFiDOz70ip2LkoI3ReZd08Q2MFSz3Vlv\r\nB8uqNYjfdiol7ZlkpgHXbTcU4J+leUW6eVj56XbG/PXYuUf3DWeTfPpO7XVS\r\nBT/+r20uV76+W7TR4W3PSc76qKrbEpXPufTecClizW4JHR7zPAKQong8p0ib\r\n3y05QYjY7KQqFuOS+529kRLYn6TBlJ+l+yEttsGFpP+R9VoEaNOrSNeLDcSv\r\n9MqWkXNTwN7MSBatEbS1qHjwD8WHZJDQoipD+0HcBWPHJbwDSnjMEiL0iVIx\r\n7DHz44n2B6lFXfQ8JD/gcCyAXcMZpUMpuCS7OEoQhyWt4j27CXVchxbG+iev\r\n2I5S2EnQIVZWiqMZ4FrzJVJQJ2sVkY0oh6jcvSZlspRisJO4a/SmXu/xL+ki\r\nDmdf/mz86nDCl6Qzr5X27hKAiY0v/dEkZlg=\r\n=RQfr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0_1650003127462_0.47984768856774807"},"_hasShrinkwrap":false},"1.96.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"51f420c57b58961ba11194bf4c9d1d85fe05cded","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-JJXwSqAIc1aGa9jiUnEr8XrOVAG2lLH64uPMqBPRpH0WwlUZgudnZYP+iQaimheckuE3r9Z/AYQY14l+bwA9+g==","shasum":"e1608ac1315b7b8b74486d3838b45ecd02e7d262","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0.tgz","fileCount":944,"unpackedSize":2640370,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErn1SqqUpsGnGSsHZEm1Tt3+ORaFIESaHVhwrjM8ExVAiAEhtZOzASKUYGQ7CBbP92CgD0yK+FJ7UU9qIyz9AbTDQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSrTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+Rg/5Af6iPIZHqeslFtYhCdSLkqCmWgXOF1dorxp6HBQdlKi0mMwI\r\naOK6UbVZBUy9crhgWCu8KVpZYplmYmqEX+w7Xu36QTAuTv6ENFHKfkMgCBh0\r\nQB5fSJCr/W/iICiDRzsDKrS3n+BmSVr7/2ZO5TvpX/bY02//x9L7NmTK+yT3\r\n9E73ac+TcZwT82O2SXnmMHASAa93Cw0FwT31QVTc5Hsugvjb+0P17MNDX/s7\r\nylE/R14plTC63I4T+n979o9ehYDhSVBHq3Lggj6L+6NkoGDNjzsBmF5QxkCf\r\nUuJ3rwnlo1no4JrdIJViBnTTCOWoEOHk6zOgjgdVStJDs2DyByhyq4TOWsHh\r\n7weLuTwX+4m3WIPT1gvAmgU9UUqv+v7YmuFr563R9UFRzgyqhNQnE2sstzCR\r\n0LpxhF81ubu3n6YD+YxbzTEj3EXNj/hyQNGP6vAzBG+hzRIT7Gi1ovyCQsrj\r\nuSQVT5aFAoxoLsx2htpblwligXE+/WjKgWGRPmMGKYpxKj3JBkSOKKijcKdf\r\nNXVG2tH6EkAjmy04KQLnO5YJzEKf2UazQAHQXbNOaifFfHkQs6cQr53SflG/\r\n3OIANwqaySzODCW2CZHpFiyKs+nujN6xrgP6dKfmb3DIy4KPU3r3LyCOFhOg\r\nrv/IGMw7N6dL7tNkQMgkfDYJtH4lrQoMrc0=\r\n=gOlR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0_1650010835617_0.18529790796591405"},"_hasShrinkwrap":false},"1.95.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0":{"name":"@sberdevices/plasma-ui","version":"1.95.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0","@sberdevices/plasma-sb-utils":"0.55.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"77a7f4be869e2e2ea84bf5a672e00d97f919f107","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-AgIuqOWurlaOImZuNCEqabBmYuMmWFbdasns0rJVluWariRp9BFTYowZ8kqAjmw83QTB0NKB6Xq06QlTxHxt8w==","shasum":"23c567891910de9aae17c12168ad89316807e690","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0.tgz","fileCount":944,"unpackedSize":2653492,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZ2fYOcr9+D6aIUP3KFXlhbG6sIU2zdJQK76FAc7pB/AiAZPEZPvdSyNLF0gaENfVQifjVoowGa8CE6jWKGYY+HDg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWU5CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofRA/+MzIM5wyki9U5SQxiaoLcsWcmTGfxIARGfRxTiC3x9LybcgQB\r\nijywJnliSGifoFUHxUndd+hYaDHavZDjv568Vt4hJFAMp2AU6j/lqSd7pdLF\r\nkvdVXSHeufqMxTV9LR/b+4xYdohzFDwrj6LYneXtOKRz58cIq48GXDKVPW0B\r\n12K7UXXQavX+06prKJONg3RnffRB6x0ZMSBxCdlkx/UT35ghfLDl/W0CgZn+\r\nABw6wwgS9rkFajx7SYMKu0jE/s1iCBGkn5d2Zd1cpoFwYTXZT0Z28sg2g21g\r\nrP9YnizVP90qCuVSks5Q38QQHet/XzOExgIvk+CfhnPs9+69VTAxK3jVZiVZ\r\nROvic/QkV6F6dQU6HbS8idtUcw8tGYXhBuvsDDCZpOsHj8lFNtLCiCFW4i+J\r\n29uKuxB3pUMYw0oRXKvBpz2HuIxh2kFs6IPcJTAevrhCs0gkK7oObFJ19OrT\r\niFlKPsiZUBacitLb/CgabFG11+te2oQGlbOJ6WWZF2/wk+CUKoAj1INSPcVE\r\nwNxxL5r5xkVX4Vt+/xzX58oT/j2ld/D8xINPo2pgaZCnOeQ90bpo5PW9mlXb\r\nxJmPMydcyv22DJIpdrCCFLbDA0nKGdk30MJgUmf/5teQ6/WV5T9OM3fHkPOI\r\niyFFaDD7tzZvspMHlTVplmM4Qy1G+W+8Fz8=\r\n=nNam\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0_1650019906654_0.12957552650317594"},"_hasShrinkwrap":false},"1.96.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0","@sberdevices/plasma-typo":"0.4.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.10.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0","@sberdevices/plasma-icons":"1.76.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"34cd9fd22a05203429c00582bbab1473f1b9559c","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-WhKQfUpUwMlU/YYbEQ//xaLQEza2NRnhA/HTLc2yegGln1QvtjxJHQqbPLsPLFB7GQFaWlzzzkdtV/DhLygNow==","shasum":"de8153db3e5d2dac87477a86bc348451d39c345d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0.tgz","fileCount":944,"unpackedSize":2640477,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsMo92hZbb19iJQYBfB/57L/l8rUdn/iNBHkGxfsf3yQIhAJddTKqVaDqa1M41ldoneKwTo3Ussh9xCxYsSZeacWny"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXRXdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7uQ/9Ge8w/eDGg5svlbOks06+DvmmNwhOs3GnICMRtdO8HwcJoYrT\r\npdDR2pXjAtmp/VgKbIp+wKneFYAVk0qrC3bO9gXQ/MD7WPuvWYgR28PTBMyU\r\nDZaFYFHolDsMgpwO3d+ZxZ/f0r4OlKpgQ2zcvEjsGx6OPUN1rlfoMQzJ1hdR\r\nHwTO6RPKOPkov96a8xuJl9NTyRnPjGikD3Xq3chcRjSYTSdWpxjiW9azRv2k\r\nc6DW23fqh9iO/Xu6/CUTOUkaBF4i2gXpKbhb7UVrijVeJ44hA/xLRocjkZ+M\r\nkhdG/btxvZyO3fG69azmlG/lpPnjU67+XJPphRRpWbcdKaB+D1yY35fyYlsS\r\n9hmi5D14HQXwNHRa1197BSRNxvy+EK+cjrv/LtAEnKiR/0Xgw/dkhqCz5SpI\r\ngFJqH/h6aneokaR/qBwjKmudJRl9VP07uz0agY8izvVBJQl4WgEqW60HOYIu\r\nyN8ZZd5CqoAW1S3MX8OfDrtXxgGGFkTM7TP1CmOwyu9V22Sm1+oNjQkOX/D0\r\nfohC6bftUOL/MQ8ZxIfyoEHXc4R4+gWwn5dt4PK4WaByEPXbROOOOYUtIN68\r\nAkNBuEiLxp7fKlgfDAGxWeMRL709K6hkZ8ln5k4ezl/7jq3NvJ+gEb8SEokJ\r\nISEX7WCINcpZYxUUa2kV5p+nnDyuAAYsvxI=\r\n=6U0S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0_1650267612720_0.9672579762904565"},"_hasShrinkwrap":false},"1.96.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0","@sberdevices/plasma-typo":"0.4.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.10.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0","@sberdevices/plasma-icons":"1.76.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-EKBmIrhLgjBXf5cby7WKh5IJFrftoP/ciapZ6d+c6ylvHhN4D8dOH4GvY/wwOXBheoll/gRRyka/6ZBdxL0Frw==","shasum":"ffd5c18c8cfffceb2bae42a66281a12f974f96c8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0.tgz","fileCount":944,"unpackedSize":2653603,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC4cqFDLMfTNvyFP1yE+3dUsPth6XndRqp5Arg3gF0OYAiEA7lzwLAJ7OEV5lllq38/mydsry5en+vXhwtSf7m6tqJg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXVBPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosNg//czFQcEX2gBrTpU+AzPz26ZkK+7YD0ji7jFCYlTisT62DIV3+\r\nMGbdWMd5yV7u2b8t4ADKalOn2pPCI6vlxawJbv/yf1GZG+F1YN9wsciOHo5J\r\nxNmNOiWC10gJ2+Z1v8q1/Mm+rFqYD5D5zQ+RAjBTtybyeGqGC1W0DeQnqmE5\r\n179nhzByprYdiBZTCApJPonssokN2SCP3xKIbGiNyPUlnQ9H3ZCQYzG98S2g\r\niUBJA6h+bLTjbgpBnH2eQhG4JIP24C/dal+b/OsHcuPES+oD8jX/GefhSOmR\r\nF7cUPcz2btWeppym0OjLbD6aMMOoDXoGIfn63lXwy+4Rkr3nEovcqt7RvBvI\r\nDT57abo00vPZmYSk1//rVw+OKf6X0kt3WNFnu2s5qrw7AEXLXoeW5vTD1YL5\r\nLDCqDpsBu/OC56LYc9gcSeMjoqtzP0DXV0i2dioHW8emeemk77wJjRB2O57W\r\nFfOD8dc9aq+92VEkuCEplDmHOo6RN0Wo+L1yOBGbN7d2BcG8qim4hafXX3io\r\nKyWrfK/Uat2KGxo8feP6ROf3tiScmoabSWgKFk3noff7FS5KxR6hFBC/nPET\r\nu43RLl6Ss5bSJSZbGdpHKrLycLZpG6J8uV5gW6IlLvhPW5ESdMSHEHj97JXO\r\nviynFRy0W+IWFlo0NBbg9FXB9Fzlo+3vGvI=\r\n=y59n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0_1650282574925_0.9633510706144459"},"_hasShrinkwrap":false},"1.95.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0":{"name":"@sberdevices/plasma-ui","version":"1.95.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.56.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.75.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0","@sberdevices/plasma-sb-utils":"0.55.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"b5bda6b1e3d58ef74ea6e269bd7b59941c103dac","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.95.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-3piMZEL8D4qc53lQd/rB1vypqpU6p7z0PHVJMFPKO1/wy8fl/6EDeEox5ZoFKriy2+/Y4OSscXGt95BjGPBoPQ==","shasum":"b99ce0ed86be017ec42ccaea951973c667bdf150","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.95.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0.tgz","fileCount":944,"unpackedSize":2654372,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwDh+9mNReceOjNlvuEn8KNLOWu7UpG35biZMAx5ngkgIgLkIEqeBaHCql3Qhl5agAL2hjLLN4KxI8loueMgoEelw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXpD1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwqg//fKYMy6cpV/zhB1UeRb+1iYFQtwXRVjE+n+V1FpDY9WR1Y+PG\r\nKDFF4JiJNTgwKJWKAjbmBRfkQLZBlQqazS44+ujiNOgozTX9LD+6JDA7XYyD\r\nYyMh5PLOLOMrGZFIWYudQdgHRLIR5tevc0h4O8cTBOCu9hOinheSwJqrXred\r\nwTn9pQE4/1a2SncPSbWZer2oyKcqyPtvMwGKHhsR2xD9WXV5xVxmTqr5v3tQ\r\nmbYPP8Tkpn3WfYcztTlj1/CIkipZR5wnxNe3g+b54hW6hyshfoGxKqtFx++O\r\nc2HjtlraTuSNkaQQxlGFn+xIjDHxN0o4iSOCfirArC2QPHUF63WXN3sXjTOz\r\n9/CdwJZi95+mFkyptUIhCK5FZmEsi/sar3dNUnlKmLIRW1pkj5IdVfV63FXu\r\nd4OeHUfxEyRvvFP8YtKgaOFJWhnhglGIclBbPs4pqVswbYTZO837a30aMDTi\r\nGve24IQM5kiWRqD0PGKu2UDLbdIC6PPxsotMK96l68cPIHJbHr26KQAZefII\r\nCNrNPLHbUvDM+Ab3WaKsrXkYo9UKUw125b+q0QSNyohCsg8wrLb4X/oemx9d\r\neSI/J06+U16nkMaKPyiI3mXB7qhflLKh+VsEMA0ri4MllzE8SmsaYbxNSXYt\r\nbe3HSgN7E5q/35WeW9jD5wS0cVBvMyqTvlk=\r\n=Fp2P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.95.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0_1650364661523_0.7675541448825669"},"_hasShrinkwrap":false},"1.96.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0":{"name":"@sberdevices/plasma-ui","version":"1.96.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0","description":"SberDevices Design System","main":"index.js","module":"es/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","dependencies":{"@sberdevices/plasma-core":"1.57.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0","@sberdevices/plasma-typo":"0.3.0","color":"3.1.2","lodash.throttle":"4.1.1","react-draggable":"4.4.3"},"peerDependencies":{"@sberdevices/plasma-icons":"^1.0.0","@sberdevices/plasma-tokens":"^1.0.0","react":">=16.13.1","react-dom":">=16.13.1","styled-components":"^5.1.1"},"devDependencies":{"@babel/cli":"7.15.4","@babel/core":"7.15.5","@babel/preset-env":"7.15.4","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@sberdevices/plasma-cy-utils":"0.9.0","@sberdevices/plasma-icons":"1.76.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0","@sberdevices/plasma-sb-utils":"0.56.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0","@sberdevices/plasma-tokens":"1.17.0","@storybook/addon-docs":"6.3.8","@storybook/addon-essentials":"6.3.8","@storybook/addons":"6.3.8","@storybook/preset-create-react-app":"3.2.0","@storybook/react":"6.3.8","@storybook/theming":"6.3.8","@testing-library/react":"12.0.0","@types/color":"3.0.2","@types/jest":"26.0.24","@types/lodash.throttle":"4.1.6","@types/node":"16.7.13","@types/react":"16.9.38","@types/react-dom":"16.9.8","@types/resize-observer-browser":"0.1.7","@types/styled-components":"5.1.0","babel-loader":"8.2.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.13.2","babel-plugin-transform-class-properties":"6.24.1","jest":"27.1.0","jest-styled-components":"7.0.5","react":"16.13.1","react-dom":"16.13.1","react-scripts":"3.4.4","sb":"6.3.8","styled-components":"5.3.1","ts-jest":"27.0.5","typescript":"3.9.10"},"publishConfig":{"access":"public"},"scripts":{"prepare":"npm run build","prebuild":"rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map","build":"npm run build:cjs && npm run build:esm","postbuild":"tsc --outDir . --emitDeclarationOnly","build:cjs":"BABEL_ENV=cjs SC_NAMESPACE=plasma-ui babel ./src --out-dir . --source-maps --extensions .ts,.tsx","build:esm":"BABEL_ENV=esm SC_NAMESPACE=plasma-ui babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx","build-storybook":"npm run storybook:build","build:storybook":"npm run storybook:build && npm run storybook:extract","prestorybook":"./sync-readme.sh","storybook":"start-storybook -s .storybook/public -p ${PORT:-6006} -c .storybook","prestorybook:build":"./sync-readme.sh","storybook:build":"build-storybook --quiet -s .storybook/public -c .storybook -o build-sb","prestorybook:build:docs":"./sync-readme.sh","storybook:build:docs":"DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs","storybook:extract":"sb extract build-sb ./build-sb/stories.json","test":"BABEL_ENV=cjs jest","test:watch":"BABEL_ENV=cjs jest --watch"},"jest":{"moduleNameMapper":{"^styled-components":"/node_modules/styled-components"}},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"sideEffects":false,"gitHead":"e64923349a770df4a9cb7dc71f4dcda3d7df4ff5","readme":"# Библиотека компонентов Plasma UI\n\nРеализация компонентов для создания смартаппов.\n\n

\n \"plasma-ui\"\n

\n\n## Использование\n\nКомпоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);\n\nИспользование данного пакета предполагает использование `react` & `react-dom`;\nИспользование `styled-components` на проект не обязательно, также как и использование `typescript`.\nНо для того чтобы комопненты работали `styled-components` необходимо установить.\n\n### Установка пакета\n\n```bash\n$ npm install --save react react-dom\n$ npm install --save styled-components\n$ npm install --save @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons\n```\n\n### Настройка\n\nПодключите цветовую схему с помощью глобальных стилей и типографическую систему с помощью `DeviceThemeProvider`:\n\n```jsx\n// GlobalStyle.tsx\nimport { createGlobalStyle } from 'styled-components';\nimport { darkSber } from '@sberdevices/plasma-tokens/themes'; // Или один из списка: darkEva, darkJoy, lightEva, lightJoy, lightSber\nimport {\n text, // Цвет текста\n background, // Цвет подложки\n gradient, // Градиент\n} from '@sberdevices/plasma-tokens';\n\nconst DocumentStyle = createGlobalStyle`\n html:root {\n min-height: 100vh;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n }\n`;\nconst ThemeStyle = createGlobalStyle(darkSber);\nexport const GlobalStyle = () => (\n <>\n \n \n \n);\n```\n\n```jsx\n// index.tsx\nimport { DeviceThemeProvider } from '@sberdevices/plasma-ui/components/Device'; // Типографика, имеющая размеры, зависимые от типа устройства\nimport { GlobalStyle } from './GlobalStyle'; // Тема оформления (цветовая схема)\nimport { App } from './App';\n\nReactDOM.render(\n \n \n \n ,\n document.getElementById('root'),\n);\n```\n\n> Подробнее о [стилях и типографике](https://github.com/sberdevices/plasma/tree/master/packages/plasma-tokens).\n\n### Использование компонентов\n\nВсе компоненты доступны из папки `components` или напрямую из пакета:\n\n```jsx\n// App.tsx\nimport { Container } from '@sberdevices/plasma-ui/components/Grid';\nimport { Button } from '@sberdevices/plasma-ui';\n\nexport const App = () => {\n return (\n \n \n \n );\n};\n```\n\nБиблиотека предоставляет вспомогательную функциональность - `utils`, `mixins`, `hocs`, доступную в соответствующих директориях.\nПример импорта:\n\n```jsx\nimport { animatedScrollToX } from '@sberdevices/plasma-ui/utils';\nimport { addFocus } from '@sberdevices/plasma-ui/mixins';\nimport { withAutoFocus } from '@sberdevices/plasma-ui/hocs';\n```\n\nПодробнее можно ознакомиться на страницах документации по [hocs](https://plasma.sberdevices.ru/current/?path=/docs/core-high-order-components--page), [mixins](https://plasma.sberdevices.ru/current/?path=/docs/core-mixins--page) и [utils](https://plasma.sberdevices.ru/current/?path=/docs/core-utils--page).\n\n## Полезные ссылки:\n\nВитрина с компонентами [Storybook](https://master--5f96ec813d800900227e3b93.chromatic.com).\n\n[Документация](https://plasma.sberdevices.ru/).\n\n[Репозиторий](https://github.com/sberdevices/plasma).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"homepage":"https://github.com/sberdevices/plasma#readme","_id":"@sberdevices/plasma-ui@1.96.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0","_nodeVersion":"12.22.12","_npmVersion":"lerna/3.22.1/node@v12.22.12+x64 (linux)","dist":{"integrity":"sha512-JkcCuXAGGrkO5wyX5BQFAY4kNlRcRQ652kllxwZJpKabaD7lo8+r1vRo73vGr8QvnoqCw0ntzpBqkB/50/l3+g==","shasum":"6a45e2680d96d48ac71ecef325b47e2d27ce0dc7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-ui/-/plasma-ui-1.96.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0.tgz","fileCount":944,"unpackedSize":2653496,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfhQMVVtl3NIcFOWHAXCrDFUtV3NWeDNg0z645edgJCAiBjUpRPCzYNo6phtlp5L72c5B+WLro9uDNMSs1Tb3cVbg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihjuAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ2hAAmPwOHa3Oem3CxY6pPAFQYP4rkie5QJKyxiqPmO7gHaMeUHL3\r\ny0y8ZLLTYl8Q+z+BMKTWIeMlzozZNuEcLoxM8QUul//NUtEoRK9RMxwzgeYC\r\nt28Qol33uPMC6vXJpfVwvNdouCRiuqnX3Ym6nRj9X5RNqbsLYKqCPOVGaA/F\r\nIPe+idSeerpGuGtwqrZmnoqGuf1fD2FdO8zrFwjPtyNipz3ww9nDtf7drRrs\r\nzXsHJ40kTTAoKur9Qak9k42S08jiF6cFl8H7EtaZjjkvEfYE8A1oH+V/rS1i\r\nE697D+2KOr0U9FwDSVTy5c2vIi+XZFGlXoXNdgp4EiqjZQS/ifo1KvsJBK82\r\n5LwZkki3KHiQpudv8lEObRWzpio/h6PxnAmQ702xBVLSWTjfykVqxbZ4qvmc\r\nkNqSJ8aq/CzG/0CRTU3YAZiMdXlN7Bezkv+U5OwGKH63aYYHdueku9FgyHWa\r\nEtPD7qDY113Xlm868e+P9UcBTlINHTJYZiO/iWkugEnjxMExyFl3y/KIPO7c\r\nAXGlAll8ywWnY6Dt/NUc678vZqK5IDlKt5Z3qMrSbHXq316lOhmgiUK54CkO\r\nBfTuJpkHakJC/udA+EBHJoYdmzyXnpWRHNLsmDEqF7FhY3is8cdETy0TNjVO\r\nGuWgUvWS2fz7erAmyN+zdhlluRDy6bSYXyo=\r\n=eeg7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-ui_1.96.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0_1652964224310_0.6736391770166823"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-02T11:33:27.667Z","0.98.0-canary.277.f6105371370bb9588ab669a6481dceb5d8f531ca.0":"2021-04-02T11:33:28.080Z","modified":"2023-01-13T10:34:38.609Z","0.98.0-canary.277.cebc2c90710b0eb2eab05339c8755e43051b8c73.0":"2021-04-02T12:07:02.892Z","0.97.4-rc.0":"2021-04-02T12:26:27.122Z","0.97.4-canary.278.aa6ff106a1953734e9665b02439f33cfba6e7353.0":"2021-04-02T13:07:21.276Z","0.98.0-rc.0":"2021-04-02T13:17:04.072Z","1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0":"2021-04-02T16:11:30.288Z","1.0.0":"2021-04-02T16:22:00.082Z","1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0":"2021-04-05T10:49:27.589Z","1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0":"2021-04-05T13:55:16.805Z","1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0":"2021-04-05T14:46:51.704Z","1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0":"2021-04-06T14:08:46.159Z","1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0":"2021-04-06T15:30:10.304Z","1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0":"2021-04-07T08:55:23.421Z","1.1.0":"2021-04-07T09:02:45.723Z","1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0":"2021-04-07T14:10:00.369Z","1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0":"2021-04-07T14:20:47.336Z","1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0":"2021-04-07T20:11:19.084Z","1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0":"2021-04-07T21:00:23.286Z","1.2.0":"2021-04-07T21:43:39.287Z","1.3.0-canary.280.fe773ec077ae6d9b652651b8722a8f4e6eecc8a2.0":"2021-04-09T09:43:26.070Z","1.2.1-canary.292.ef6a6a05f8b66c22bd27361878d9f92cdabfa64a.0":"2021-04-12T08:09:43.610Z","1.2.1-canary.292.0ba4fd979f193a583b6b108a550db6a21be5cadf.0":"2021-04-12T08:54:05.763Z","1.2.1-canary.292.e8bed3deea7afa40bc405be03c85d6af59f45799.0":"2021-04-12T08:56:42.620Z","1.2.1-canary.292.ad41d0a3d32b7319a05a3a3744b743fd1562953f.0":"2021-04-12T09:03:26.191Z","1.2.1-canary.292.bc3bf9ea5c1130fd8ff36baebc1d8cc2452a7000.0":"2021-04-12T09:45:24.459Z","1.2.1":"2021-04-12T09:54:02.506Z","1.3.0-canary.280.a7c01d565de3a724886a38327dcb87c2d35b6f27.0":"2021-04-12T10:56:32.737Z","1.3.0-canary.298.bc28eea14d4d479b9998c0767522f65c49164214.0":"2021-04-13T07:49:50.042Z","1.3.0-canary.298.cf23b5520f5ef13c4a9653c0022552e1ecbfc237.0":"2021-04-13T11:14:41.446Z","1.3.0-canary.298.5b19f23aaa7adfbe55bcc636fc4a86b296c2224b.0":"2021-04-13T12:29:44.401Z","1.3.0-canary.298.6eb0b81840c052b27b6d36904b4d8f55aabab09c.0":"2021-04-13T12:32:42.825Z","1.2.2-canary.299.505060a9c9e71cde132d3e54e7d0bb13ec2cea11.0":"2021-04-13T12:54:42.372Z","1.3.0-canary.298.c31cc2d4d8224620dd2ed08802afe95e46b62756.0":"2021-04-13T12:55:17.685Z","1.3.0-canary.298.a873cb00e80d3d10910fe42b8b2517d12d9c232c.0":"2021-04-13T13:22:07.020Z","1.3.0-canary.300.2fbc215e5a0cc59b036c59e629291be9e93384bf.0":"2021-04-13T13:23:45.449Z","1.3.0":"2021-04-13T13:31:25.425Z","1.4.0-canary.300.4e550b884a9020c26afc579fc742fbae4ebd20de.0":"2021-04-14T07:59:40.059Z","1.4.0-canary.280.0da5d7b323c4e7c8b041d445d0348a4454648912.0":"2021-04-14T09:16:02.571Z","1.3.1-canary.299.6617cfc9b46efcfd656f5362ab62e2d3d0f2c808.0":"2021-04-14T09:20:54.500Z","1.4.0-canary.300.952606fc8b31e5c512e24e21bdcf82279eb87ffe.0":"2021-04-14T10:50:31.585Z","1.4.0-canary.300.23eacac1238a4874024b87b283a261f4a9d26023.0":"2021-04-14T10:59:09.913Z","1.3.1-canary.299.b160f2daade8feb18886a64b157025d4542f79b7.0":"2021-04-14T12:30:49.871Z","1.4.0-canary.300.79006ed94873f05b5f51def60baf5aed17f3ade5.0":"2021-04-14T12:37:12.304Z","1.3.1-canary.299.64efd433d7c82399a9c4e2cb8d29d9c646b857a1.0":"2021-04-14T13:03:19.823Z","1.3.1-canary.299.12ec942743dbf0bc801fd0e060184cde7752940a.0":"2021-04-14T13:52:25.771Z","1.4.0-canary.280.898001957bef7b055ea37dff0072ade3c09bd84b.0":"2021-04-15T08:27:32.059Z","1.3.1-canary.307.5e4b223d77a7da02ddd65c25b88c9dbb4edada15.0":"2021-04-15T09:51:45.921Z","1.3.1-canary.307.cd9cef0fdee7c1dbc07c45cd8a1c24c09c85a277.0":"2021-04-15T09:52:16.677Z","1.4.0-canary.308.03dca73b74389f5d052a2e0216799cc04e55507a.0":"2021-04-15T09:58:27.176Z","1.3.1":"2021-04-15T10:15:40.970Z","1.4.0-canary.280.2e872d3e044e84bd0c16b72526847317763d3f17.0":"2021-04-15T11:05:36.418Z","1.4.0-canary.280.68d292d314a33512071186dfa72bc144a9834ee5.0":"2021-04-15T11:57:58.077Z","1.4.0-canary.308.d437fd7be94c42066d4001755c22b691b6859a92.0":"2021-04-15T12:51:23.545Z","1.4.0-canary.300.42f3497e6b2d717a30f4ab58259fe5bf558dae80.0":"2021-04-15T12:56:35.605Z","1.3.2-canary.299.54678e3ddbd5698a9f3bc413de2e5c3743026136.0":"2021-04-15T13:03:57.186Z","1.4.0":"2021-04-15T13:14:20.126Z","1.5.0-canary.308.7d3f6ca9d496197f0f8139005b22bbfa50b1fa72.0":"2021-04-15T15:44:41.349Z","1.5.0-canary.308.bc7b02eaf9e758402fe1724e3a1b78f6124c9d9a.0":"2021-04-16T08:40:07.936Z","1.5.0-canary.308.6cdc722c242c7cef1052b8c7b59231d847abe077.0":"2021-04-16T08:44:20.130Z","1.4.1-canary.312.e287348bdd9a8c12b5308ed26c4526bc65bb4aef.0":"2021-04-16T08:50:46.836Z","1.5.0-canary.308.e6d516ed6beaefee294d88c249c4e4d4f53bf47a.0":"2021-04-16T10:45:18.560Z","1.4.1-canary.311.a3d539d1597549b9b5fd4e7ed5e163d966dec0b7.0":"2021-04-16T10:57:40.618Z","1.5.0":"2021-04-16T12:46:33.092Z","1.5.1-canary.312.6208e18e3d0e2147cfdb891da53aafb676ca6f96.0":"2021-04-17T04:14:50.070Z","1.5.1":"2021-04-17T04:23:54.120Z","1.6.0-canary.300.d44b87c5bfc6e6d72b523e2d86d4a038067b201a.0":"2021-04-19T10:28:17.384Z","1.6.0-canary.300.d2a8e432c9ae1f55bc1bbeb295e54e38b757c1ae.0":"2021-04-19T11:33:07.375Z","1.5.2-canary.318.7fd1b8536f4abbd475c748cbb8ba2b0c8182f770.0":"2021-04-19T14:29:08.115Z","1.6.0-canary.317.98c4966b97dff27157395577f0feca3d65426699.0":"2021-04-20T07:18:49.741Z","1.5.2":"2021-04-20T08:24:19.658Z","1.6.0-canary.300.e208694c221b175cac06f52c390eaa4d164cc00f.0":"2021-04-20T08:27:49.110Z","1.6.0-canary.300.010a2e95cc7e68d552572c7e2d4783dda7c401c7.0":"2021-04-20T08:59:05.215Z","1.6.0-canary.300.02148409f793ec7592160521c1439416e189b460.0":"2021-04-20T09:25:29.489Z","1.5.3-canary.318.517c1dee233c6628b45a19ea16e812d29d814a69.0":"2021-04-20T11:02:04.919Z","1.5.3-canary.318.1f8c9ebde45fc0c4b2b50b0e56a2a6439a6bc31c.0":"2021-04-20T11:04:37.802Z","1.5.3-canary.318.5062609e6aa23a5c920306bb15d498a41935c1a2.0":"2021-04-20T11:20:55.081Z","1.6.0":"2021-04-20T11:49:25.341Z","1.6.1-canary.322.416d836ce5dc5dfb7470b8a8da8dc4d94bafc02a.0":"2021-04-20T13:05:33.511Z","1.6.1-canary.323.673e06a60e005b32110e87dca1a97b16ed3266f4.0":"2021-04-20T13:53:14.567Z","1.6.1":"2021-04-21T06:34:21.250Z","1.6.2-canary.322.9d1fcacfcfa26b8daab266cb9873658c223b2d94.0":"2021-04-21T08:13:44.156Z","1.6.2-canary.322.ff655b4feede0a8683268e348fa3362a3b07cff8.0":"2021-04-21T08:15:42.213Z","1.7.0-canary.317.e7bb63629c65f2475fc32a2fae16e694812d442d.0":"2021-04-21T12:53:59.214Z","1.6.2":"2021-04-21T14:04:08.779Z","1.7.0-canary.317.6eae4c7427e747092a168d87e600b55f7e918b68.0":"2021-04-23T11:08:46.145Z","1.7.0-canary.326.35ee1b2021888b4100777b23c6cd7060a1acd818.0":"2021-04-23T11:27:48.140Z","1.7.0-canary.326.1f3d56265ec0407de9b3e1ceb46baa26dc79533b.0":"2021-04-23T11:40:37.200Z","1.7.0-canary.328.35fc7482fc70e886622b20758deb3165b5e96ab8.0":"2021-04-23T14:57:47.274Z","1.7.0-canary.326.ae9c6e1ce4ad28cf8854666c42251e6bf8bfae1c.0":"2021-04-23T14:59:42.372Z","1.7.0-canary.328.ef56e7d6e667a38661b000fa484d231ead0838e8.0":"2021-04-24T09:17:37.474Z","1.7.0-canary.328.4ade00bb8b178edaa69e08f8a70822c9ee5860db.0":"2021-04-26T09:08:24.774Z","1.7.0-canary.328.a908d3b11398dff70a2043b4a5debd8ab339f247.0":"2021-04-26T09:32:00.399Z","1.7.0-canary.328.1ea4731f10c59c5f50f58dc013b999bf1a83b5fb.0":"2021-04-26T09:44:08.864Z","1.7.0-canary.330.86357035cefdc58216109e4b2fefa283c4002f50.0":"2021-04-26T13:45:15.879Z","1.7.0-canary.328.7e6605a5f939ec8e0fa7c38b8e8d832aeb1f660d.0":"2021-04-27T08:23:57.970Z","1.7.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0":"2021-04-27T08:59:16.255Z","1.6.3":"2021-04-27T10:24:22.030Z","1.7.0-canary.317.150cca2526f36b9764c447bd9f19bc1e7ca436a8.0":"2021-04-27T13:25:23.179Z","1.7.0-canary.328.65a18d98d0bfd4b12062519df244b3c42c48abb3.0":"2021-04-27T14:00:41.188Z","1.7.0":"2021-04-27T14:13:30.798Z","1.8.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0":"2021-04-28T08:38:01.051Z","1.8.0-canary.317.1dea61635e8caeb592d9eb136da780ce2fcd4704.0":"2021-04-28T10:25:13.102Z","1.8.0-canary.317.2cea00f233dbb33801d6b37dbaa774af29f15063.0":"2021-04-28T10:26:06.994Z","1.8.0-canary.317.39bb8d9ac1abecd6b9b5b877685c0f3925eeecd9.0":"2021-04-28T12:14:51.616Z","1.8.0-canary.317.a27d388d2a8bc3378224367aa478b99f689dead6.0":"2021-04-28T12:39:24.532Z","1.8.0":"2021-04-28T12:48:32.041Z","1.8.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0":"2021-04-29T11:12:48.279Z","1.8.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0":"2021-04-29T12:12:08.431Z","1.9.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0":"2021-04-29T12:16:11.247Z","1.9.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0":"2021-04-29T14:50:10.996Z","1.9.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0":"2021-04-29T15:36:55.316Z","1.9.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0":"2021-04-30T07:26:10.344Z","1.8.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0":"2021-04-30T12:07:44.598Z","1.9.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0":"2021-04-30T12:26:10.998Z","1.8.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0":"2021-04-30T12:28:22.547Z","1.8.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0":"2021-04-30T13:20:04.429Z","1.8.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0":"2021-04-30T18:15:21.956Z","1.9.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0":"2021-05-04T14:17:43.660Z","1.9.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0":"2021-05-04T15:14:54.787Z","1.9.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0":"2021-05-05T14:11:11.335Z","1.8.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0":"2021-05-06T07:31:22.744Z","1.9.0":"2021-05-06T08:08:49.164Z","1.9.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0":"2021-05-06T08:10:50.523Z","1.10.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0":"2021-05-06T08:19:28.304Z","1.9.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0":"2021-05-06T08:27:30.843Z","1.10.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0":"2021-05-06T09:02:20.901Z","1.10.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0":"2021-05-07T07:50:38.004Z","1.10.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0":"2021-05-07T11:39:01.099Z","1.10.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0":"2021-05-07T12:51:24.865Z","1.10.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0":"2021-05-07T13:29:54.796Z","1.10.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0":"2021-05-07T15:18:08.223Z","1.10.0":"2021-05-07T15:59:01.822Z","1.11.0-canary.339.5a525f402078b39eaca9f9bc0ee5a8eeb61eaa30.0":"2021-05-11T08:37:00.336Z","1.10.1-canary.338.b5550ce058eb80d30a856ae32bfcb6f29be50ea9.0":"2021-05-11T08:54:10.611Z","1.10.1-canary.349.c2837811ab88f5c3faa8963d3130c4138a075e81.0":"2021-05-11T09:33:40.830Z","1.11.0-canary.339.b61fbb1573796e1b24f0ed82ee219d18f7a58347.0":"2021-05-11T10:47:28.840Z","1.11.0":"2021-05-11T11:02:54.077Z","1.10.1-canary.338.3ed84edf649e77ecbc722fd60aa4429ee0138d81.0":"2021-05-11T11:09:49.532Z","1.11.1-canary.338.0dd483493fce1bcc1910ca01e17091718e41311d.0":"2021-05-11T11:11:28.873Z","1.11.1-canary.338.fb6bd9eef5eddb2454ed436d6c45defeb35f9f2f.0":"2021-05-11T11:13:12.800Z","1.11.1-canary.349.b1d16f2ae52817e4132c952c20e729acde25898c.0":"2021-05-11T11:56:27.469Z","1.12.0-canary.345.177107cdf02381a8c1b2bffbc1f205e03dbca791.0":"2021-05-11T18:34:22.644Z","1.12.0-canary.345.95a85b3f7a9e8f9350fe09239b0e22e943fd52dd.0":"2021-05-12T10:00:13.867Z","1.11.1-canary.349.fbd545fdf25fdf7b4cfbf7a797a89a0db7862b69.0":"2021-05-12T10:35:51.019Z","1.12.0-canary.347.8970aad6e516e29b68bdac5778296dc829214c52.0":"2021-05-12T14:51:05.101Z","1.12.0-canary.347.8a7d3b55974acb75670da92cbc6f1cd27574c837.0":"2021-05-13T07:23:29.428Z","1.12.0-canary.347.1413cd02f0eb5734c4a83abd5f725f2b0eb132ed.0":"2021-05-13T07:26:47.061Z","1.12.0":"2021-05-13T07:44:37.487Z","1.12.1-canary.338.9270f125b9dd28154c9c834059ddc45a1903ae29.0":"2021-05-13T12:22:13.738Z","1.12.1-canary.389.4ebcfc2b129ac844739540ef8df0dafd302969d4.0":"2021-05-13T16:05:58.225Z","1.13.0-canary.345.b791016d8f2a7dddb0f899b48089fc3d5cd65b60.0":"2021-05-13T20:46:07.271Z","1.12.1-canary.390.8fc198806a7d0196c2257e7e4532e57d9e8aa694.0":"2021-05-13T21:11:07.230Z","1.13.0-canary.326.83746a9ff463793f15a6bd4da5d46063b44b1a0a.0":"2021-05-14T09:46:43.518Z","1.13.0-canary.341.ea5d756c419ca6b11afc912df87d8716491ecca2.0":"2021-05-14T10:34:14.166Z","1.13.0-canary.326.abf8b53bd4c34f1cb42d5413e09226dd4d803822.0":"2021-05-14T10:42:56.561Z","1.13.0":"2021-05-14T11:57:43.198Z","1.13.1-canary.389.20a5743f4dcb094daf0da912d99e341c923db556.0":"2021-05-14T13:43:59.064Z","1.13.1-canary.389.9bea8d5887624dd294d16560437d28a599b5af41.0":"2021-05-14T13:44:49.564Z","1.14.0-canary.392.1161d8f32421b2fa2a86ded14223bca9b1e22916.0":"2021-05-14T14:44:14.291Z","1.14.0-canary.326.59a62ba7d3391da0e8602618635fe81d7f80b895.0":"2021-05-14T15:49:14.535Z","1.13.1-canary.338.c748228579e1f229faa4b6913818459824e3939d.0":"2021-05-15T08:30:35.770Z","1.14.0-canary.326.38037debb077846c0ac5e9c7df74ff399bdd743e.0":"2021-05-17T07:58:34.486Z","1.14.0":"2021-05-17T08:13:06.274Z","1.14.1-canary.390.4505d17bcb1c7106d53cd6147a365674286e243b.0":"2021-05-17T08:19:52.683Z","1.15.0-canary.389.69a5fd2a954cbb12c381552bf38e3b5b7467ab69.0":"2021-05-17T09:17:43.704Z","1.14.1-canary.390.881265e8ce9ea18778d05548637b92a4b4e1824b.0":"2021-05-17T09:19:59.350Z","1.14.1":"2021-05-17T09:30:26.231Z","1.15.0-canary.389.7a0c53f391af5eef11307a04e5aaeea0203cd21b.0":"2021-05-17T12:38:44.050Z","1.15.0-canary.389.3ffd374983a23837737a1ae8329269b7318868ab.0":"2021-05-18T11:16:32.038Z","1.14.2-canary.397.dcf495d72910c1f765e27a86bf249396b1038ca2.0":"2021-05-18T12:05:10.044Z","1.15.0-canary.392.c89859d690fd70d19f75b1ef9882136bce2883f2.0":"2021-05-18T15:23:36.811Z","1.14.2":"2021-05-18T16:39:11.407Z","1.15.0-canary.341.415ec0944bfc6b6ef3390d545e05b8e9a0adb17f.0":"2021-05-20T07:07:34.362Z","1.15.0-canary.341.dcfb1a47f60ab48e4b3580fce83d5b6716484bab.0":"2021-05-20T08:25:54.840Z","1.15.0-canary.341.c8b41726ecc0cfe888352b77a51bb7756a7ef91b.0":"2021-05-20T09:09:52.247Z","1.15.0-canary.389.33949e9d2b88418023ebb2d65c97ea95131510c3.0":"2021-05-20T09:35:55.272Z","1.15.0":"2021-05-20T10:40:33.024Z","1.15.1-canary.403.3e29f29a1fb2610546f622584becc78d3b3bde11.0":"2021-05-20T12:15:19.504Z","1.15.1":"2021-05-20T12:57:46.996Z","1.15.2-canary.338.bd840650358c7a5c132641bbfa5b82f43ce7b794.0":"2021-05-20T20:48:30.738Z","1.16.0-canary.412.0afbb316d2c166196e83ef26dfffe7a32fdd9093.0":"2021-05-26T11:53:36.486Z","1.15.2-canary.418.667487955769794721e76e57048b5c43492c3a3a.0":"2021-05-28T13:48:28.646Z","1.15.2":"2021-05-31T09:08:04.801Z","1.16.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0":"2021-05-31T13:23:05.855Z","1.16.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0":"2021-05-31T14:16:46.253Z","1.16.0":"2021-05-31T14:29:59.762Z","1.16.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0":"2021-05-31T14:46:43.056Z","1.17.0-canary.412.2fcafc66b21e79a3361e63e8ce97f88a44d1c232.0":"2021-05-31T15:11:04.534Z","1.17.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0":"2021-05-31T15:56:05.783Z","1.17.0":"2021-05-31T16:26:14.766Z","1.17.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0":"2021-05-31T16:33:30.339Z","1.18.0-canary.392.612df716979968636d2c6e8f74ab437fe8053e97.0":"2021-05-31T17:21:02.815Z","1.17.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0":"2021-05-31T17:29:58.774Z","1.17.1":"2021-05-31T17:55:00.251Z","1.18.0-canary.392.9a74a1e6f3f7a0b00e0c34ca7922d84dac1ae0b4.0":"2021-06-01T06:53:54.275Z","1.18.0-canary.392.cb38688a3ec9d39b5bd3af7007297e8336b72df5.0":"2021-06-01T07:30:55.483Z","1.17.2-canary.338.5ce29e0d74041d217b00efb2017d78da43a9de72.0":"2021-06-02T13:14:24.190Z","1.18.0-canary.398.f25f13c5973bc611fb88b5680af6b3fc6bc6c95d.0":"2021-06-07T08:16:59.803Z","1.18.0-canary.432.4f4e6411f0fbc179e4415a836ff51476c5e5feb7.0":"2021-06-07T10:35:24.616Z","1.18.0":"2021-06-07T10:54:12.547Z","1.19.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0":"2021-06-07T12:13:21.038Z","1.19.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0":"2021-06-07T18:48:44.749Z","1.19.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0":"2021-06-08T10:44:41.812Z","1.19.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0":"2021-06-08T10:54:46.700Z","1.18.1-canary.437.4731c99c865e6154c2fa1aa075f5036e34e3c8e6.0":"2021-06-08T11:42:31.803Z","1.19.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0":"2021-06-08T11:52:55.178Z","1.19.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0":"2021-06-08T12:27:57.410Z","1.18.1-canary.438.cb8c7b1b6f0742b4da8aceb3c251abc632b9b380.0":"2021-06-08T15:46:32.136Z","1.18.1-canary.438.1bc5075408bd0360947955f8bbc411d266132109.0":"2021-06-08T16:00:11.465Z","1.18.1-canary.438.8374a97f91e5f2acc743445f5a46468eba0aa2ba.0":"2021-06-08T16:06:17.874Z","1.18.1-canary.338.f5cf3c7c17067c30ac39207fb7d78534b756d444.0":"2021-06-09T06:35:42.858Z","1.18.1":"2021-06-09T06:56:43.808Z","1.19.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0":"2021-06-09T08:31:33.400Z","1.19.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0":"2021-06-09T09:14:53.809Z","1.19.0":"2021-06-09T09:32:24.066Z","1.20.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0":"2021-06-09T14:46:55.447Z","1.20.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0":"2021-06-09T15:22:42.405Z","1.20.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0":"2021-06-10T09:14:33.969Z","1.20.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0":"2021-06-10T09:34:57.509Z","1.20.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0":"2021-06-10T10:04:23.700Z","1.20.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0":"2021-06-10T11:23:54.118Z","1.20.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0":"2021-06-10T12:26:30.919Z","1.20.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0":"2021-06-10T13:11:36.018Z","1.19.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0":"2021-06-11T10:44:38.229Z","1.19.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0":"2021-06-11T12:57:09.114Z","1.20.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0":"2021-06-11T15:42:47.590Z","1.20.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0":"2021-06-14T21:30:24.743Z","1.20.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0":"2021-06-15T08:31:35.277Z","1.20.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0":"2021-06-15T12:30:19.201Z","1.20.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0":"2021-06-15T14:56:32.023Z","1.20.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0":"2021-06-16T15:59:44.595Z","1.20.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0":"2021-06-17T09:18:22.832Z","1.19.1":"2021-06-17T13:09:06.757Z","1.20.0-canary.441.b69e8eb7d4849c8ed468215581826d842e3b931b.0":"2021-06-17T18:29:55.067Z","1.20.0":"2021-06-18T07:45:35.858Z","1.21.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0":"2021-06-18T13:17:38.243Z","1.21.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0":"2021-06-18T14:49:27.114Z","1.21.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0":"2021-06-20T15:33:12.237Z","1.21.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0":"2021-06-20T16:50:16.277Z","1.21.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0":"2021-06-20T18:35:02.957Z","1.21.0-canary.438.03b410aec0af90595a35e386ff4c101f8607f547.0":"2021-06-21T14:59:02.983Z","1.20.1-canary.458.aed361c19f1e322f95a59d7ed6e022e2d5be352a.0":"2021-06-21T15:19:30.021Z","1.20.1-canary.458.a1a6ab96721e55ff98b0bbb6f3fce30b06b18492.0":"2021-06-21T15:47:56.769Z","1.21.0-canary.438.53dc6e39c70c981bfba2969dc6ed9a6a5a8efbe4.0":"2021-06-21T17:29:57.008Z","1.21.0-canary.438.df8cbe8fd28d660ee0c887c7188e69da0a33be07.0":"2021-06-21T21:50:42.908Z","1.20.1-canary.462.f1f84af7bc6a5533ea071de1fcdd3352dfb42bf6.0":"2021-06-22T07:21:42.610Z","1.21.0-canary.438.4a09b05af02c2ff91f791e5c6c287d02efc51290.0":"2021-06-22T08:43:15.447Z","1.21.0-canary.438.4627a40c937c0ff2e6a13bc4b42a40ba3c9ac7e8.0":"2021-06-22T12:35:48.415Z","1.21.0":"2021-06-22T12:46:34.195Z","1.22.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0":"2021-06-22T14:51:24.348Z","1.22.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0":"2021-06-23T08:32:47.394Z","1.21.1-canary.458.4f8297fc6a209e7a1e0a74d2358d1b9a45cb0eb0.0":"2021-06-23T08:42:00.807Z","1.22.0":"2021-06-23T08:46:00.744Z","1.21.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0":"2021-06-23T09:00:48.431Z","1.22.1-canary.458.9bd2c56123113189405f30d3daa58891527dcccf.0":"2021-06-23T09:17:08.613Z","1.22.1":"2021-06-23T09:39:45.320Z","1.22.2-canary.463.f81843f50ae409464ae6ed655ffeff74819f779d.0":"2021-06-23T10:32:56.727Z","1.22.2-canary.463.6139edb3d5d7dddc8f86639295e8cff69141539a.0":"2021-06-23T10:40:38.287Z","1.22.2-canary.463.16f652b6d1c99667f239444c6a3c074a024055e4.0":"2021-06-23T13:55:05.491Z","1.22.2-canary.463.e4e6793822b026428aea7d18e5294653e12f466b.0":"2021-06-24T13:00:58.565Z","1.22.2-canary.462.4eaa24c9fcef9f132d95d2e8991b219aa6230f80.0":"2021-06-24T18:39:26.133Z","1.22.2-canary.463.9fc124a4f6c5ea993fa2f2f3d36f29c9e79741f6.0":"2021-06-25T12:45:44.812Z","1.23.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0":"2021-06-28T09:56:19.014Z","1.23.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0":"2021-06-28T19:55:05.429Z","1.22.2-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0":"2021-06-29T09:37:00.058Z","1.22.2-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0":"2021-06-29T15:45:04.871Z","1.22.2-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0":"2021-06-29T16:07:50.022Z","1.23.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0":"2021-06-30T08:44:20.947Z","1.23.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0":"2021-06-30T08:47:30.098Z","1.23.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0":"2021-06-30T08:59:50.989Z","1.22.2-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0":"2021-06-30T10:34:35.088Z","1.22.2-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0":"2021-06-30T11:04:50.596Z","1.23.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0":"2021-06-30T15:24:16.937Z","1.23.0":"2021-07-01T07:41:20.863Z","1.23.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0":"2021-07-01T09:27:44.313Z","1.23.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0":"2021-07-01T09:51:50.215Z","1.23.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0":"2021-07-01T11:40:47.681Z","1.23.1":"2021-07-01T11:55:26.212Z","1.24.0-canary.463.1078cc49582ba7afd283dd7a942ce5f75ce6cbe3.0":"2021-07-01T20:30:06.442Z","1.24.0-canary.494.ac1d71fd66089fc6130e9d2158ec8e25fbc9c03f.0":"2021-07-02T08:21:17.988Z","1.24.0-canary.463.9a78da8ac38b059aa7393d0e0a08028c5305e2a9.0":"2021-07-02T08:38:24.724Z","1.24.0":"2021-07-02T09:13:18.644Z","1.25.0-canary.494.4f6d8b675b46e3cf5064a6647a33ea3b4d00913b.0":"2021-07-02T12:47:26.649Z","1.24.1-canary.479.e793120a088f5ed3cd88249d43776b8cb491f19e.0":"2021-07-04T18:49:55.454Z","1.24.1-canary.479.eeef161e7a4dd31669dd5935846a9266158caf28.0":"2021-07-04T21:00:58.599Z","1.25.0-canary.494.d6dda48e2033cb1baf0dd97781a7e7df416f75fd.0":"2021-07-05T09:59:22.050Z","1.25.0-canary.494.8eda6da6cb25b8b26a9693634f6ac9b940354ece.0":"2021-07-05T10:10:41.727Z","1.24.1-canary.479.7565e3782fff52203fe2d9b50b4047ffe800d419.0":"2021-07-05T11:00:15.162Z","1.25.0-canary.494.5972de52f9946c4c8d1d640ba6cd29b3faf5d42f.0":"2021-07-05T11:06:39.946Z","1.25.0-canary.494.4fdb5defd12359c33d96c2c3bb0d76c64f29cd6d.0":"2021-07-05T11:34:45.445Z","1.25.0-canary.496.685d587567246bf76e642443bcfe2ae3e25cd744.0":"2021-07-06T11:58:28.180Z","1.25.0-canary.494.c43ec37abd74fb569337064531b1225f28b31ad4.0":"2021-07-06T13:06:40.491Z","1.25.0-canary.494.cf6dd25434b0af037832d8231d43f1ccb05ae48a.0":"2021-07-06T14:03:22.414Z","1.25.0-canary.494.e52a26e86f17da4343881003a3ce46f6d41cdd3f.0":"2021-07-06T14:24:52.938Z","1.25.0-canary.494.731856e5c0bb4e4c8fa8a32be0db92c19546a51b.0":"2021-07-06T14:39:28.067Z","1.24.1-canary.479.f15071f3244a33a1325d491b83538e602458f0a7.0":"2021-07-07T14:46:00.917Z","1.24.1":"2021-07-07T14:58:01.244Z","1.25.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0":"2021-07-07T20:46:02.938Z","1.25.0-canary.516.b07ad708e640e56eea6aa18888de906cbe747165.0":"2021-07-08T07:36:01.873Z","1.25.0-canary.496.46b5bf26adce9350f2f8dcaeca473058fe7ff13e.0":"2021-07-08T09:14:30.542Z","1.25.0-canary.494.8b8966c8fb270cc539c9ea93816340ba6f197a10.0":"2021-07-08T09:28:22.368Z","1.25.0":"2021-07-08T10:26:14.443Z","1.25.1-canary.517.1c64e2bbd0e5dd4555fd585a5243605182d8b435.0":"2021-07-08T11:17:28.101Z","1.26.0-canary.494.25b9c838aae16848e5bc27ec0f376dfdf9bdc3b8.0":"2021-07-08T15:10:12.112Z","1.25.1-canary.517.1ac9da57ce17cc818833f3384b78c0e7d7f1d94c.0":"2021-07-08T15:36:20.419Z","1.26.0-canary.516.3d5bef63d6b7e924ffbda4a230759c73973f0ac0.0":"2021-07-09T07:53:02.354Z","1.26.0-canary.516.36453d84cfccc8c1fc83f465656a6d1d61217650.0":"2021-07-09T08:17:30.902Z","1.26.0-canary.494.63622c968460c696afc8d17dff52e9e221e0fac7.0":"2021-07-09T08:43:46.083Z","1.26.0-canary.516.c45779990b30835669be130c6f1b0c90e476588b.0":"2021-07-09T09:00:03.179Z","1.26.0-canary.494.d3a008d7a73bb4d9125aec9ec1d21932cbb2a095.0":"2021-07-09T09:00:27.363Z","1.26.0-canary.494.c51dd91226eecc1bad8fc54f73bf8be59c5f71c7.0":"2021-07-09T09:19:38.598Z","1.25.1-canary.517.6362184244249881b20907da6ea9cbf88f3bbd65.0":"2021-07-09T09:52:18.180Z","1.26.0":"2021-07-09T10:07:19.627Z","1.26.1-canary.527.167dd7e82c42fb8e051211a9b7ae066e195ee95b.0":"2021-07-09T10:53:37.475Z","1.26.1-canary.527.126095a1e23088555e80951d26a6e0258362d6df.0":"2021-07-09T11:55:12.984Z","1.26.1-canary.528.9111fdb37566bf1b6af1b741f470cc65fe25c29b.0":"2021-07-09T12:56:47.552Z","1.26.1-canary.527.a3c5c0eaccbbadd07018dbd6aafd36388bc23653.0":"2021-07-12T07:23:17.642Z","1.27.0-canary.496.287477f2fd4b022501090abe2f17f8590aefb120.0":"2021-07-12T08:55:03.693Z","1.27.0-canary.496.8a94b1be26dc44efc07a15e1cb6aab45edc11389.0":"2021-07-12T14:54:18.586Z","1.27.0-canary.496.743d444fd732ccddbe4f851d700a8ec06ece05cd.0":"2021-07-12T17:49:40.037Z","1.27.0":"2021-07-13T08:06:23.491Z","1.27.1-canary.527.5c60d9407455719b8f901610ef8f23db832fc4f6.0":"2021-07-13T10:30:47.986Z","1.27.1":"2021-07-13T10:59:39.551Z","1.28.0-canary.535.7eb191c755606bf30993b0f3d462d9c310d33dc9.0":"2021-07-13T11:01:01.915Z","1.27.2-canary.536.182247a6d19776b11da9cb0f56d815d4f3955971.0":"2021-07-13T11:55:35.150Z","1.27.2-canary.528.90276fe6b24b303451dc601816d90e730b065d2b.0":"2021-07-13T12:03:03.934Z","1.27.2":"2021-07-13T12:18:30.275Z","1.27.3-canary.537.d3c6eac97e072ac3b7cf39600631123850056823.0":"2021-07-13T14:13:41.132Z","1.27.3-canary.536.5e19a14db10061816f4d988131df10f89b67a2ca.0":"2021-07-14T07:59:36.946Z","1.28.0-canary.535.d6b2090d7e18a864cde16debadeadde8054a0efd.0":"2021-07-14T08:05:06.164Z","1.27.3":"2021-07-14T08:12:38.090Z","1.28.0-canary.535.39a039ea83e7dd384ab84cca5a7bf7872959298f.0":"2021-07-14T08:44:43.474Z","1.28.0":"2021-07-14T09:07:11.262Z","1.29.0-canary.542.e86662d3c5ab7e114b7f4756ae56e4dec468ee24.0":"2021-07-15T09:12:26.918Z","1.29.0":"2021-07-15T09:26:38.867Z","1.30.0-canary.545.944e14e7bf9d904abab8c6b223e46b24205df8f3.0":"2021-07-15T10:33:12.380Z","1.30.0-canary.545.87b61246843f41a23b155c12ef8295c94fd89f48.0":"2021-07-15T12:56:09.299Z","1.30.0-canary.546.fb518e5dafb90d4c20c661a996379c55728a9291.0":"2021-07-15T13:17:15.997Z","1.30.0-canary.545.e9bb56939b7b12b45f6804788d9c9cc9fb5b653a.0":"2021-07-15T13:48:44.078Z","1.30.0":"2021-07-15T14:02:50.371Z","1.30.1-canary.547.2a82ed5803fd6e209fc89d7f4fa14171df4d6bec.0":"2021-07-15T21:11:42.922Z","1.30.1":"2021-07-16T08:33:09.745Z","1.31.0-canary.551.21d8c4cac2b200f553fd59bc14b3456fb0395a90.0":"2021-07-16T11:38:34.263Z","1.30.2-canary.555.bd3fc1ff15a56897b2e0c9d492f60a5af373e879.0":"2021-07-19T08:30:17.121Z","1.31.0-canary.551.e3c9aac95f02c5dba6c7ef86bae66e80f5ab17fd.0":"2021-07-19T08:55:54.290Z","1.30.2-canary.555.846cc8bc5cce85c8b8b141a2206cc8f4023b6309.0":"2021-07-19T09:30:45.910Z","1.30.2-canary.537.950d4ce43d4034ebe795757b1068c32fd4f70ea1.0":"2021-07-19T10:55:01.408Z","1.30.2-canary.537.29f13b261dcd8df2b6d0e7d2c257b6fcd509fb73.0":"2021-07-19T10:59:11.483Z","1.30.2":"2021-07-19T11:10:18.822Z","1.30.3-canary.555.4772fe375bcd070f0b02bfaa9153d9f08083287b.0":"2021-07-20T07:18:56.942Z","1.31.0-canary.551.cc2db5649ad959a64182b64377e86c10ebe3eb9a.0":"2021-07-20T08:45:30.539Z","1.31.0-canary.551.2241cb5d95946e9a617f83396c23f07e7ca9571d.0":"2021-07-20T10:27:17.819Z","1.31.0-canary.551.26dd928274e1e17eb8466c98699fff4a40ae82ef.0":"2021-07-22T19:43:00.354Z","1.31.0-canary.563.e9ba0f805dd6f0d4f172406ad8faa1083cd8e3ac.0":"2021-07-26T13:07:48.907Z","1.31.0-canary.551.7be608480d78fc3710df4b3aaac94ffe39bd27c8.0":"2021-07-27T09:13:01.652Z","1.31.0-canary.563.b9f5e41f603d9560b0880a21f0d438330433b230.0":"2021-07-27T09:29:41.435Z","1.31.0":"2021-07-27T09:52:26.399Z","1.32.0-canary.563.2a7c0511a617da248270b0b74c50a1324f190b25.0":"2021-07-27T11:07:09.340Z","1.32.0-canary.563.65f46e0fa6591f3cf9f09c6350c75f49b955331a.0":"2021-07-27T15:23:32.504Z","1.32.0-canary.563.a6233434fdfcb07b9a9667b8ad8dd822cd3d8f14.0":"2021-07-28T12:43:50.914Z","1.31.1-canary.583.00d9ed4aeadfdd77a4b51c9d5bc97e73497bf90d.0":"2021-07-29T09:23:51.857Z","1.32.0-canary.585.a78d902378ae2c663eee5bf10be00b0a660257b6.0":"2021-07-29T14:24:37.830Z","1.31.1-canary.583.eb4eff21145e2b03ac416482dbc825e32d70678a.0":"2021-07-29T15:17:16.515Z","1.32.0-canary.584.502292a238e39ce0bc0dcdf140d40a115e624231.0":"2021-07-29T19:20:47.101Z","1.31.1":"2021-07-30T07:52:14.884Z","1.32.0-canary.584.51d5f9ff26c5f366098009c3e069d5a2f8dbe5f6.0":"2021-07-30T11:21:24.758Z","1.32.0-canary.584.0b118e3b5dee41a99e4bd9fcbd0f1f7ed179e9ba.0":"2021-07-30T11:28:12.148Z","1.32.0-canary.584.5b1cb6695fc4229c1599b4a5d8cb25961aed9227.0":"2021-07-30T11:35:20.725Z","1.32.0-canary.584.696298576ee76422732d109fa91f8e3f0a6a0d2a.0":"2021-07-30T11:54:46.373Z","1.32.0-canary.593.0bf54f87f7696f6da4dac0caf884e32c4c76ba3b.0":"2021-07-30T14:13:25.631Z","1.32.0-canary.563.cf0ab491d305c72d369b73b18e2e044bf989b278.0":"2021-08-02T07:23:50.477Z","1.32.0":"2021-08-02T07:38:05.218Z","1.33.0-canary.585.40c1e7539c6dcb3583c56e5f97675217af972083.0":"2021-08-02T08:32:24.080Z","1.33.0-canary.585.5ad5fa1969f8514fd27427915068653e0c51ecb3.0":"2021-08-02T10:21:31.818Z","1.33.0-canary.592.f3886fc5926a9ab72b69a7d4fd4ead39f20f292d.0":"2021-08-02T10:26:34.816Z","1.33.0":"2021-08-02T10:45:17.803Z","1.34.0-canary.585.fe4fb0e064c44f21335e9331e55418fce73c81a2.0":"2021-08-02T11:26:18.664Z","1.33.1-canary.607.a1ec4ad1b45bb9b81103964e2d7f898ee7442075.0":"2021-08-02T11:48:07.438Z","1.34.0-canary.607.fb5936e55a2ff8644533f07e791e7ded28a3ba49.0":"2021-08-02T13:19:02.480Z","1.34.0-canary.593.8bbbc3a37980c6250034e8b41579f09c00be2743.0":"2021-08-03T06:44:58.508Z","1.34.0-canary.593.c766727ee15eaa6a1e3cd7e5775388a4cd80fe8f.0":"2021-08-03T17:42:07.964Z","1.34.0-canary.585.d3edc528584090e578d8da6860abbaa3e8d61ea5.0":"2021-08-04T07:38:23.021Z","1.34.0-canary.585.75cc3718791e61bc038262d8ba6334c662d91c19.0":"2021-08-04T09:25:42.684Z","1.34.0-canary.585.a8fbda7518fe49b5d3787840d34ecc702d3e3760.0":"2021-08-04T09:42:02.727Z","1.34.0":"2021-08-04T10:26:33.636Z","1.35.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0":"2021-08-04T12:23:06.681Z","1.35.0-canary.593.9b9f21030ee2b4f0f01d550eff34758d7f9e7039.0":"2021-08-04T18:46:16.305Z","1.35.0-canary.584.f0a4000a5a67086ce4616158a861a84b21308777.0":"2021-08-04T19:48:32.663Z","1.34.1-canary.618.aa9916d8626bc2f47670bedca10bdb4d22abb998.0":"2021-08-05T06:35:24.449Z","1.34.1-canary.618.8d4786dac55d2030e8a70facf87b47761a6caf2d.0":"2021-08-05T08:53:31.585Z","1.35.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0":"2021-08-05T09:06:10.052Z","1.35.0-canary.584.4010de69ab31c18a513bfabf47aedf65e5a5481d.0":"2021-08-05T09:54:55.053Z","1.35.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0":"2021-08-05T10:50:48.500Z","1.35.0-canary.584.f89261984fe005731ea2fa22fb44aacec4ccfdee.0":"2021-08-05T12:15:50.320Z","1.35.0-canary.584.82cace44bbbb9d3f371b187fa0693b24aa4bffa6.0":"2021-08-05T13:21:17.387Z","1.34.1-canary.620.2f626eb72826a0d2d5ec6fd35db782ae921386ff.0":"2021-08-05T19:15:19.720Z","1.35.0-canary.593.3b200c5eba764b573126c1234c857c334be320f7.0":"2021-08-06T07:17:16.905Z","1.35.0":"2021-08-06T09:13:11.075Z","1.35.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0":"2021-08-06T10:43:17.057Z","1.35.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0":"2021-08-06T10:57:34.225Z","1.35.1":"2021-08-06T11:12:10.345Z","1.36.0-canary.607.7ecd37d1f889b724fcc453253a664a654809010d.0":"2021-08-06T12:07:26.603Z","1.36.0-canary.607.9f6027b84a2ba7ad5bd6c3515ce14edea4c69414.0":"2021-08-06T12:13:20.030Z","1.36.0":"2021-08-06T13:48:39.565Z","1.37.0-canary.627.b69481eb5d959d31b1bc6feb54c97e49a5bcd96d.0":"2021-08-09T09:54:05.964Z","1.37.0-canary.593.0bb510f34e34896937893887c6ba4047b2f17710.0":"2021-08-09T11:39:02.764Z","1.36.1-canary.618.2a9ceb78fc33459a812473bcd8c739ac2a68a413.0":"2021-08-09T13:23:33.306Z","1.36.1-canary.618.ccd69a7692700f278b6a8670a54e922dd83b6585.0":"2021-08-09T13:23:45.873Z","1.36.1-canary.618.734c6e96f5361ba27136d15ec9ffbeec802e23b2.0":"2021-08-09T13:30:38.421Z","1.36.1-canary.618.3036c399cb704a5d408f07f7eafb42371e3ad38e.0":"2021-08-09T13:35:40.109Z","1.37.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0":"2021-08-09T19:34:33.038Z","1.37.0-canary.629.3fcca3ed2de92a5301f926c32f5a7c3f4270ba13.0":"2021-08-09T19:49:08.219Z","1.37.0-canary.627.45dee6832de7942c62c9625b63e4dde665c7bf3c.0":"2021-08-09T21:50:42.704Z","1.36.1-canary.618.32e5cf75bb5c47eec7f43e5da0cda58a5d8af567.0":"2021-08-10T06:07:19.823Z","1.36.1-canary.618.12039527da5f37d3998862e0c5c2c749f5d326e1.0":"2021-08-10T06:28:31.118Z","1.37.0":"2021-08-10T09:41:25.874Z","1.38.0-canary.633.0b550f7866d3097a57bc855caa2098cf69ecc6a3.0":"2021-08-10T14:12:34.148Z","1.38.0-canary.584.8fbb837db08bad540147027998bf2da30f6e5b16.0":"2021-08-10T19:04:19.788Z","1.38.0-canary.584.50ac8e69f749caad5efbda618ab5e259002f0d46.0":"2021-08-10T19:05:21.470Z","1.37.1-canary.634.cda8a4817bc2da30bd161bcdb4bb9fd74f1e3154.0":"2021-08-11T12:45:44.042Z","1.37.1-canary.634.57e6489491d2be780168da93dc80e03d469bce74.0":"2021-08-11T13:11:53.395Z","1.38.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0":"2021-08-11T21:09:08.776Z","1.38.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0":"2021-08-12T20:26:21.238Z","1.38.0-canary.593.8b0d9c0deace80b9db09e9958fad0a4d1a30d5dd.0":"2021-08-13T12:54:43.370Z","1.38.0-canary.593.e7a351c320f68c3d4fac756ede6cd837d48fb4c2.0":"2021-08-16T08:22:39.133Z","1.38.0":"2021-08-16T11:01:34.295Z","1.38.1-canary.618.d6a0506d35ec4e29b6fc1c4fc6a6f69eb8dc29bd.0":"2021-08-17T11:13:43.372Z","1.38.1-canary.618.daf2688e9cb48c259c0b39502c4e2365d580562f.0":"2021-08-17T11:56:10.637Z","1.38.1-canary.618.cf8a2e482e08439ee85cce27b85642870221a30e.0":"2021-08-17T12:00:49.004Z","1.38.1-canary.618.4bdd90f37d94cd9db958bf6a887a9172b83ecf19.0":"2021-08-17T13:36:44.822Z","1.38.1-canary.634.86edd578271e94efad5bb931a4c581571443d6c1.0":"2021-08-18T08:15:15.140Z","1.38.1":"2021-08-18T08:25:47.417Z","1.38.1-canary.634.b2783ee26a2757171c846c4ed4a5906ed80ea48c.0":"2021-08-18T08:29:57.945Z","1.38.2-canary.634.86e2eb91f1d745a363e4411278e14b67ffd95b33.0":"2021-08-18T09:08:17.040Z","1.38.2":"2021-08-18T09:19:22.243Z","1.39.0-canary.584.4dd24b8a56b93d355c2f6dd80e7c15861888f88e.0":"2021-08-18T09:27:03.934Z","1.39.0-canary.584.30b8eb7e5f99003121635c8de591bf0764474916.0":"2021-08-18T10:13:42.444Z","1.39.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0":"2021-08-18T10:19:01.137Z","1.39.0":"2021-08-18T10:29:33.182Z","1.40.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0":"2021-08-18T11:32:20.558Z","1.40.0-canary.650.e78bdc577757a0062c6e41ecd71f7d96d700e06f.0":"2021-08-18T12:34:48.276Z","1.40.0-canary.650.c35a444d43e2f5bd642f340a4628cf3d36aadf7f.0":"2021-08-18T22:43:59.350Z","1.40.0-canary.659.9e46e2bcff93c6f3dcf445748402e4d90d420fea.0":"2021-08-19T09:40:42.955Z","1.40.0-canary.660.c0bc497a27e3e3e7dd8a7756db53fb21188d48aa.0":"2021-08-19T12:44:58.235Z","1.40.0-canary.633.04a5152caf31b5e377d118cf30459e29ea53f078.0":"2021-08-20T08:43:44.395Z","1.40.0":"2021-08-20T09:30:53.441Z","1.41.0-canary.660.9a57fd48afdb3b29b47f507e7faf02fd44b68bca.0":"2021-08-20T10:19:44.649Z","1.41.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0":"2021-08-20T12:51:36.303Z","1.41.0":"2021-08-20T13:34:30.854Z","1.42.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0":"2021-08-23T12:48:02.110Z","1.42.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0":"2021-08-23T13:42:37.726Z","1.42.0":"2021-08-23T13:49:26.639Z","1.43.0-canary.648.37dece3dbe33bbb49d684edc5f09dbd31318ad51.0":"2021-08-23T15:03:07.420Z","1.43.0-canary.648.310d192642a085c8129b8d412c0301499748f64c.0":"2021-08-24T07:28:16.128Z","1.43.0-canary.660.9b3081a1f0707d44ec7ea864709549c3814706f4.0":"2021-08-24T16:28:25.478Z","1.43.0-canary.659.1aa5bfaa74e5a113239547d399f05129bdd7ee8c.0":"2021-08-25T08:28:21.797Z","1.43.0-canary.659.547e3a7e079fbcb8d3baf2f5e3fbdf5836f7e647.0":"2021-08-25T08:35:17.772Z","1.43.0-canary.675.29ee8fbe2dbe9fe4d441128111a3b5866c3ffbad.0":"2021-08-26T14:43:31.394Z","1.43.0-canary.660.e78e6fe21d868fe1675de167f327dc5863472793.0":"2021-08-27T08:20:33.256Z","1.43.0-canary.683.6997ce517967663dd1552bdd2ca1172d5a8a86fe.0":"2021-08-27T08:31:32.230Z","1.43.0":"2021-08-27T08:46:57.604Z","1.44.0-canary.675.ebeb0763cf7fac55e36b258a3058582a6c073e13.0":"2021-08-27T09:20:14.135Z","1.44.0-canary.659.b7408b8126aea4d811c07717954b9da79b0deaf6.0":"2021-08-27T10:11:03.070Z","1.44.0":"2021-08-27T11:19:10.815Z","1.45.0-canary.676.1c605998356aedd9c0f7b83302d3cbb11fab47d6.0":"2021-08-27T12:44:13.360Z","1.45.0-canary.676.a58bc4f3b4459659bb6c452535b3a0a11f2a826c.0":"2021-08-27T13:18:03.238Z","1.45.0-canary.683.ea07b2236e3b3d896cf2949af13d5c2815cae282.0":"2021-08-27T21:28:31.338Z","1.45.0-canary.683.6cf0ee9da6be359171b77aa703955fa539d6bd20.0":"2021-08-30T07:39:41.159Z","1.45.0-canary.687.1f7111e6df6948b61a9191f5f3e125d3d12397f1.0":"2021-08-30T08:21:31.141Z","1.45.0-canary.676.02c1ebb0acb8395d6af56240819c9c490182da60.0":"2021-08-31T10:12:50.324Z","1.44.1-canary.647.f1ec1f66b1ded1d9c32aff30eeec7100b35d6d61.0":"2021-08-31T12:29:52.006Z","1.44.1-canary.693.bb6175dd26a02bbdcb875baa523ad78df04c8c98.0":"2021-08-31T13:20:32.154Z","1.44.1-canary.693.ebc55690d1176326e477aecb8720cb5b1ebc4173.0":"2021-08-31T13:21:39.029Z","1.44.1-canary.693.6ef005876432aa2f8fc569626e71d6a4c7e56379.0":"2021-08-31T13:26:06.195Z","1.44.1":"2021-08-31T13:56:22.732Z","1.45.0-canary.676.5cdef352e681636d3e1baaa415bc55ecc013603d.0":"2021-08-31T15:45:50.312Z","1.44.2-canary.698.dc203fc245ab13e50a502bcf1285ee319e2410c2.0":"2021-09-01T06:25:38.587Z","1.45.0-canary.683.68e24f8cb7d88ec7f8445b0e7f70693e6fd07956.0":"2021-09-01T08:08:01.004Z","1.45.0-canary.687.9c8c5aeaa36821b49ffede8e24cbebea6ead1e49.0":"2021-09-01T08:08:26.039Z","1.45.0-canary.687.607142e275fdaa154edeb7aeaa08bc4b22a32a32.0":"2021-09-01T08:16:45.844Z","1.45.0":"2021-09-01T08:24:03.336Z","1.46.0-canary.675.249dfbe3acb8cc047c9c4e7d5a191bb3fdffd453.0":"2021-09-02T09:25:04.055Z","1.45.1-canary.647.ff0be2eb3de41df345c163311b0003c785432435.0":"2021-09-03T08:17:40.034Z","1.46.0-canary.687.30632f71de60c33c9e410b587a30da1fd9543f29.0":"2021-09-03T08:26:25.262Z","1.46.0-canary.687.5f8b1e9d1c77ab9ade2e51de2ed471ca45a359c9.0":"2021-09-03T08:28:03.737Z","1.45.1-canary.703.cfe2f51467e15ebca7789a5daad62fa062d6edf9.0":"2021-09-03T10:22:08.994Z","1.45.1-canary.705.168a0554c6781307fe5c0f38e9966b4887ebc82a.0":"2021-09-06T10:29:23.244Z","1.46.0-canary.676.70ca6b4b677f134a747aa3bd343457353331e4e5.0":"2021-09-06T13:26:45.359Z","1.45.1-canary.708.dfcd6142b03b25b0ef36d5714c442b69f3c37830.0":"2021-09-07T09:24:14.210Z","1.45.1-canary.709.dc27e90acf918b0abcb484744da8231ada89ede3.0":"2021-09-07T09:43:14.373Z","1.46.0-canary.675.10e2a4a5c80fc932c1a48c988b0102645af2864b.0":"2021-09-07T11:08:25.352Z","1.46.0-canary.710.8add91a4743cc87c9789f28a54c465f4b8606708.0":"2021-09-07T11:21:07.976Z","1.46.0-canary.710.b4c6a6d260f46430e36eaca95fc5893bfa6f4dd0.0":"2021-09-07T11:41:37.309Z","1.45.1-canary.647.e741cd10884544c45bfcab2b3e1584884ad7fd77.0":"2021-09-07T12:34:58.082Z","1.45.1-canary.716.6d58c288fb67587458c9ee98f0be82ef9ccc9673.0":"2021-09-07T15:06:28.497Z","1.45.1-canary.724.2482a64937b72da54ca6f748ce431153d4d5ab8f.0":"2021-09-07T16:33:59.243Z","1.45.1-canary.703.3885db3b2758d4849ca94b52403262d8a0573579.0":"2021-09-07T17:06:20.224Z","1.46.0-canary.676.49b126aff23d3db01f2e79109951c7d9e03b86ba.0":"2021-09-07T20:02:50.617Z","1.46.0-canary.676.76e229711ae8d640012d7c5b738738a43dc2d804.0":"2021-09-07T20:13:03.801Z","1.45.1-canary.647.ec77f22a9dba257cdcf26dfb6c499c242fc7ac43.0":"2021-09-08T06:43:28.694Z","1.46.0-canary.675.05ef4ee2dc2b2a8bdbda06f657321e0c60caf96c.0":"2021-09-08T08:49:26.181Z","1.46.0":"2021-09-08T09:12:20.934Z","1.46.1-canary.716.3b9e6aa5fdb236e69a56afa3641dbe12a7688fd3.0":"2021-09-08T09:44:04.513Z","1.46.1-canary.698.02cfb0ce2d5ab4c228abc1241980fa376455d0fc.0":"2021-09-08T10:12:32.995Z","1.46.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0":"2021-09-08T11:44:56.229Z","1.47.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0":"2021-09-08T12:38:00.892Z","1.46.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0":"2021-09-08T13:01:22.519Z","1.46.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0":"2021-09-08T13:17:54.685Z","1.46.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0":"2021-09-08T13:55:55.691Z","1.46.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0":"2021-09-08T14:47:43.909Z","1.46.1":"2021-09-08T15:00:16.908Z","1.46.2-canary.784.a7ed7a441fd26aae7f1b4074ff39b61532ffef52.0":"2021-09-08T15:16:16.948Z","1.46.2-canary.784.d35a9152317e020a461636e08f440f1d0dca9416.0":"2021-09-09T08:13:52.595Z","1.47.0-canary.676.599d7cc6af5f87df532b67773ab24975e1803628.0":"2021-09-09T10:16:34.976Z","1.46.2-canary.647.7c6d3ef0b3864e1782596c0623579177ba371c1a.0":"2021-09-09T11:05:07.043Z","1.46.2-canary.716.45271f8d435b5ebe0050625e097556315fbcdc8f.0":"2021-09-09T11:29:21.804Z","1.46.2-canary.784.cbfd11b2f0f940d01d90591d5abfb0ec8598a62a.0":"2021-09-09T12:18:26.491Z","1.46.2-canary.791.7c5fbf6791406c26628d2707bd524931fb8a9839.0":"2021-09-09T12:35:46.835Z","1.46.2":"2021-09-09T12:54:52.993Z","1.46.3-canary.791.5cbd912667f09ae3819c685b21e62746d3f9a96d.0":"2021-09-09T14:26:45.779Z","1.46.3":"2021-09-09T14:42:17.923Z","1.47.0-canary.676.d75d7df233ceed9f460a8409a7c048d4f72673b7.0":"2021-09-09T15:40:20.285Z","1.47.0-canary.676.a8a1eda0b1886fcd7dea955f98dce525c6517189.0":"2021-09-10T09:00:10.431Z","1.46.4-canary.800.d2ec6a8d74d5968993dfedb50c98b88b7f7e7c66.0":"2021-09-10T11:17:26.890Z","1.47.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0":"2021-09-10T13:57:18.710Z","1.47.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0":"2021-09-14T12:17:07.427Z","1.46.4-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0":"2021-09-14T12:33:16.082Z","1.46.4":"2021-09-14T12:52:21.539Z","1.47.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0":"2021-09-14T14:03:09.835Z","1.46.5-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0":"2021-09-14T14:15:57.206Z","1.47.0":"2021-09-14T15:54:02.020Z","1.48.0-canary.804.d90de2e2d7f8bd3d87eb5ef4371af7797b43a9ac.0":"2021-09-15T13:03:14.220Z","1.47.1-canary.800.bea6af432e2880196b0d56ae0b0f963ef58000d9.0":"2021-09-15T13:11:43.234Z","1.47.1-canary.716.4da691138b44ff7d90818a524b1ccf785412f855.0":"2021-09-15T13:44:22.859Z","1.47.1":"2021-09-15T14:04:55.928Z","1.48.0-canary.804.c46a8968225d5aa45ddc7a430478a76a380ac200.0":"2021-09-15T14:10:35.156Z","1.47.2-canary.708.78b2280ab95e9e8b6609ed6ec62375125621f635.0":"2021-09-16T10:22:40.603Z","1.47.2-canary.708.3b335569ddf1a8137ae1b6790cb42862b275e3ae.0":"2021-09-16T11:59:20.254Z","1.48.0-canary.804.fda03523dd74bc719c992d09da1302a677b8dc2c.0":"2021-09-17T10:08:25.188Z","1.48.0":"2021-09-20T08:23:11.299Z","1.49.0-canary.805.f04b5495501f74b50cb41982983341c67789a5f6.0":"2021-09-20T16:11:15.266Z","1.48.1-canary.708.220059787d1daeb64f5b7a5191fea748a8eafef5.0":"2021-09-21T16:36:59.888Z","1.48.1":"2021-09-21T18:58:28.059Z","1.49.0-canary.812.3411e0820c93f63988dc9c7a4c28118c9fe544d9.0":"2021-09-22T10:55:59.245Z","1.49.0-canary.811.7aace4c7d76620857c542a69df327bbbcb17a17d.0":"2021-09-24T08:40:38.540Z","1.49.0-canary.805.9bd4d3debc97b7e34f63f098a90eeff6ae311eb1.0":"2021-09-24T09:00:29.717Z","1.49.0-canary.811.8b850b6f2a8ff65b000c685d7dec0790371cd677.0":"2021-09-24T09:14:41.381Z","1.49.0-canary.811.b2bb8673af0e4b763f84d214cced753950cff808.0":"2021-09-24T09:18:35.844Z","1.49.0":"2021-09-24T10:07:18.845Z","1.49.1-canary.813.83ab0f334107a50309b6023b8ab316f1686517e9.0":"2021-09-27T13:19:36.333Z","1.50.0-canary.814.e9ea4090bc4c0bfa0b281121e80231d0129ac5f0.0":"2021-09-28T06:09:25.803Z","1.50.0":"2021-09-28T06:58:44.570Z","1.50.1-canary.815.3f0375e084e0846060f998f9f2f12dafaccb49ca.0":"2021-09-28T09:30:54.774Z","1.50.1-canary.813.e6bf373d3c81a7e13c0c3c99b7b13f059e209b10.0":"2021-09-28T09:44:49.263Z","1.50.1-canary.820.55e5a45c862207cd1380ba8352bd152f0884bdb4.0":"2021-09-28T10:23:43.258Z","1.50.1-canary.816.0450b8905e0a1cc63e2bec46fed9674db214739e.0":"2021-09-28T11:55:00.104Z","1.50.1":"2021-09-28T20:56:08.186Z","1.51.0-canary.821.c6d4cec836169e9788b8effedbed3c8db64fceb0.0":"2021-10-01T07:32:09.337Z","1.50.2-canary.824.d7e0d0eb3df5f278c9bdfddadf49df43c0d9212b.0":"2021-10-01T09:03:11.441Z","1.50.2-canary.824.d57972e54b6e5c2c5fad57d4a1f6d06ab11a95df.0":"2021-10-01T09:37:10.456Z","1.51.0-canary.824.1dfe63028b49aa876ff404090a011c1e2a90a060.0":"2021-10-01T10:07:22.436Z","1.51.0-canary.825.96afe2185ba682242c98b98b8c7db0b48349fbcf.0":"2021-10-01T11:23:58.556Z","1.51.0-canary.825.6256921f7e593ee7d6ca4f1c691b2c8dbc050205.0":"2021-10-01T12:15:50.172Z","1.51.0-canary.821.cf12c03bb6fae85375cf6824e13a7fed1e08d059.0":"2021-10-01T13:45:21.192Z","1.50.2-canary.826.994f19977594be6a36129aec57a0da158ef336cd.0":"2021-10-03T12:17:09.051Z","1.50.2":"2021-10-03T12:31:55.297Z","1.51.0-canary.824.780c4238691d8e423c352a1311b5a8bac37187a0.0":"2021-10-03T12:35:49.387Z","1.51.0-canary.824.3c679f42abe8d66ebc0cc94e81b4537290349436.0":"2021-10-03T12:49:47.538Z","1.51.0-canary.824.06249387fd557ce3d91f2a8df7e780acea7cc020.0":"2021-10-03T13:25:57.414Z","1.51.0":"2021-10-03T13:51:04.662Z","1.52.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0":"2021-10-04T08:17:48.425Z","1.52.0-canary.676.c5d277c1326c9d6854c02d06cc198d4ecc30bd2c.0":"2021-10-04T08:48:39.273Z","1.52.0-canary.676.d8bb107759505e636d7a4c1abcf4c864122b2ca3.0":"2021-10-04T10:30:12.810Z","1.52.0-canary.829.ce3e5be41344d7188f8dadd8db965165b50c7607.0":"2021-10-05T09:43:38.776Z","1.52.0-canary.828.819e25ef4f75f5334d73e2c7b5b89126fe590c77.0":"2021-10-05T10:11:10.127Z","1.52.0-canary.829.93f48b57c183bb4ff49b5b3f0a63dbdbd7939ee5.0":"2021-10-05T12:22:23.014Z","1.52.0-canary.829.bcdc094dec332b14d6b2d06d8db673c94a3025b5.0":"2021-10-05T12:22:29.093Z","1.52.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0":"2021-10-05T14:36:12.677Z","1.52.0-canary.833.a67d6cfe0eb4ceba855b6f853f671b6603052b55.0":"2021-10-06T06:26:30.250Z","1.52.0-canary.676.e88609e92c9b243c0767eeb8142650791de76275.0":"2021-10-06T09:00:59.783Z","1.52.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0":"2021-10-06T09:05:41.071Z","1.51.1-canary.834.f4128260aaf3833764bfbcd657675b02024cb40d.0":"2021-10-06T09:55:55.823Z","1.52.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0":"2021-10-06T11:12:52.429Z","1.51.1-canary.834.5e408309dc3d0048b0afa89e3414875b1e9a7278.0":"2021-10-06T11:43:17.824Z","1.51.1":"2021-10-06T12:01:07.378Z","1.52.0-canary.833.87c0141d2a06a3ecfa75dcac8bbbe79b773fc2ab.0":"2021-10-06T12:12:13.660Z","1.52.0-canary.825.ea7dd4ee2e034a272617df8a147602dff63e9f19.0":"2021-10-06T15:59:25.660Z","1.52.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0":"2021-10-07T09:37:21.731Z","1.52.0-canary.825.d9f12060b0bba13f623cceb819a7080a88d3cb06.0":"2021-10-07T11:30:48.830Z","1.52.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0":"2021-10-07T12:05:42.376Z","1.52.0-canary.825.d6de4ce096b1c70648cab7d4dc864472826cc5a2.0":"2021-10-07T12:25:00.218Z","1.52.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0":"2021-10-07T14:50:44.778Z","1.52.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0":"2021-10-07T14:51:44.883Z","1.52.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0":"2021-10-07T15:08:24.266Z","1.52.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0":"2021-10-07T15:10:03.748Z","1.52.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0":"2021-10-07T20:40:04.205Z","1.52.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0":"2021-10-07T21:59:26.161Z","1.52.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0":"2021-10-08T06:39:53.374Z","1.52.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0":"2021-10-08T08:40:23.432Z","1.52.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0":"2021-10-08T08:50:01.786Z","1.52.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0":"2021-10-08T10:00:13.837Z","1.52.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0":"2021-10-08T10:33:56.584Z","1.52.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0":"2021-10-08T12:22:55.196Z","1.52.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0":"2021-10-08T12:39:06.916Z","1.52.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0":"2021-10-08T13:11:29.665Z","1.52.0":"2021-10-08T13:21:40.804Z","1.52.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0":"2021-10-08T13:25:08.050Z","1.53.0-canary.845.84cbb3b36b3258aa69eeef59e10957665095c562.0":"2021-10-11T07:38:22.241Z","1.53.0-canary.836.0fe12d8c85cb00453741db41c034383d6255001a.0":"2021-10-11T08:43:28.213Z","1.53.0-canary.845.40e8d6d9137a8a03da1c635cdb0d77e917c38495.0":"2021-10-11T08:47:23.476Z","1.53.0-canary.836.c83b1a533a02be0d084d1fd180750de74b132eca.0":"2021-10-11T09:08:30.999Z","1.53.0":"2021-10-11T09:49:57.570Z","1.53.0-canary.676.630dd46d4b73aeefe43c910a2590e41ad48ba151.0":"2021-10-11T09:58:13.650Z","1.54.0-canary.825.676bb92503d8acb4d11318930208f2ea9b96f2d7.0":"2021-10-11T11:58:05.440Z","1.54.0":"2021-10-11T13:00:14.524Z","1.55.0-canary.845.440040b80c490764d2762586b94199ff97c953f1.0":"2021-10-11T13:21:53.060Z","1.55.0":"2021-10-11T13:46:37.714Z","1.55.1-canary.855.5e5d6d7405db01ef0ec0b3d59dba8b008c31838c.0":"2021-10-12T12:56:59.629Z","1.56.0-canary.819.188ba725eeba6f35ffea4a2d1d75cb7d28ab655b.0":"2021-10-12T13:45:59.155Z","1.56.0-canary.676.0428852089d6bcc88fcc95da9f198088c6fdd3dd.0":"2021-10-12T14:11:32.853Z","1.55.1-canary.855.4b8cdcf75ee00ad990982a73f51f16a33ea7619c.0":"2021-10-13T04:36:23.192Z","1.55.1-canary.857.bc8c9ba07e90c69a705ad777ad4efddc121195cd.0":"2021-10-13T06:44:04.511Z","1.55.1":"2021-10-13T07:41:54.224Z","1.56.0-canary.676.60e1b108b4cc742f2c1f98ad67695b93a127daa8.0":"2021-10-14T08:28:30.744Z","1.56.0-canary.863.58fa87dc4e01da5ba441ddbdec8349223d549051.0":"2021-10-14T09:17:43.409Z","1.56.0-canary.863.1eaa8751b9962c29953ca3279efa9bd875b4d6c5.0":"2021-10-14T09:27:28.973Z","1.55.2-canary.864.34ab922b9396d22bff575d5660316e6ed1c14575.0":"2021-10-14T12:27:10.559Z","1.55.2-canary.864.95726dd14a1c06207bf262c2ebafb4ee9f044449.0":"2021-10-14T13:04:25.641Z","1.55.2-canary.864.5ccc18994fb2ec56024561286e2d896e91f7391e.0":"2021-10-14T14:39:14.775Z","1.55.2-canary.864.f7b7e1d72ccc747fe5520e61581ac0d4f56ba734.0":"2021-10-14T16:02:37.511Z","1.55.2":"2021-10-14T20:47:00.530Z","1.56.0-canary.819.ea1f82ecaf6fe7519f8c16a97d7c2090e70e3549.0":"2021-10-15T12:53:11.642Z","1.55.3-canary.857.a3ff0e4fda42d8ae8e3adf6dad3680eb638f94c6.0":"2021-10-15T13:04:27.684Z","1.55.3":"2021-10-15T13:30:15.838Z","1.56.0-canary.819.4b08b3bf52ecb03cb67d6bfce3a9b3b44486ba76.0":"2021-10-19T06:16:05.153Z","1.56.0-canary.676.935bfd640f9ccf5dcbd183a00a27244d29835149.0":"2021-10-19T09:59:03.553Z","1.55.4-canary.875.a37eab0dea0a526da60c7cd8ee543d94ddc52142.0":"2021-10-19T12:57:33.086Z","1.56.0-canary.874.9409ec57dc1e0d693b3d0e7bf56945d09aba8fb3.0":"2021-10-19T13:49:37.620Z","1.56.0-canary.819.205a3f01dc47ce8f776fcd0b41365cf7c5d5563d.0":"2021-10-20T10:15:10.710Z","1.56.0-canary.819.770d85e58201d493d0d880840628a6e1e29d7069.0":"2021-10-20T12:15:05.451Z","1.56.0-canary.866.61d920cb1176d524a3b95a88019ac16402d5124c.0":"2021-10-20T13:41:31.668Z","1.55.4-canary.867.0246c00aa376e1a18b5706d691726621e0df70fc.0":"2021-10-20T14:27:19.239Z","1.56.0-canary.882.b913f28ccf5dd7e62637bcdae316738fa8b54dd7.0":"2021-10-20T14:34:30.478Z","1.56.0-canary.877.b57836f5eec7ab64aec7c12ba1b986eb18c4b7cf.0":"2021-10-20T15:14:54.843Z","1.56.0-canary.883.afe4a889b90300794636dbc052d4446517085c35.0":"2021-10-20T16:00:31.695Z","1.56.0":"2021-10-21T03:12:49.123Z","1.56.1-canary.875.43349798cc2502d9edae76da43d6bbfbc695b080.0":"2021-10-21T09:17:56.222Z","1.56.1":"2021-10-21T09:52:10.136Z","1.57.0-canary.863.eb348ed4cc27dfa006a7ed2ab860f849739da2f2.0":"2021-10-21T10:08:11.379Z","1.57.0-canary.866.daa98f2a77f878d2ef157ac3af1312b857f2935d.0":"2021-10-21T10:21:58.350Z","1.57.0":"2021-10-21T10:33:35.116Z","1.58.0-canary.874.b4182dba445649549c92171fb81edcfbfbe473d4.0":"2021-10-21T11:06:57.727Z","1.58.0":"2021-10-21T11:42:51.006Z","1.58.1-canary.887.4cd5dcfcbfc5c85bcf8f62d2821e8fa669856e4f.0":"2021-10-22T09:15:20.988Z","1.58.1-canary.887.fed181fdbd784b54cca769b7056a8f224018592e.0":"2021-10-22T09:40:22.198Z","1.58.1-canary.887.688610dd55c1db6d7000acdf345bdbd9c4275a90.0":"2021-10-22T14:37:47.124Z","1.58.1":"2021-10-22T15:09:08.724Z","1.58.2-canary.889.816d3bda31ea00c9549396b77e7c15b1fe023a0c.0":"2021-10-22T17:32:58.728Z","1.58.2":"2021-10-22T17:59:36.937Z","1.58.3-canary.890.026812b71ae37c7446da06f38331936023ed52b1.0":"2021-10-23T15:08:19.664Z","1.58.3-canary.890.1be9604774e0b121d3f4153dee1f2f99b751cb22.0":"2021-10-23T15:14:30.447Z","1.58.3-canary.890.1b9a91aa5d924d06afcfa315faf7ee014404dd4c.0":"2021-10-24T13:03:07.530Z","1.58.3":"2021-10-24T14:32:12.496Z","1.59.0-canary.710.712a60967b9bdec4d4173fd8b0b4d7feb2a1f3b7.0":"2021-10-26T09:57:58.363Z","1.59.0-canary.883.66de901f5975aa194df84903dff25dfac67cced1.0":"2021-10-26T16:01:23.567Z","1.58.4-canary.897.e63301a2657616f03d25f82818e4e9b075ea513a.0":"2021-10-27T07:36:22.430Z","1.59.0-canary.896.4d78fc6fc7a1a7aaa194ad4edf7e8d5028afcb85.0":"2021-10-27T07:59:10.189Z","1.59.0-canary.866.10e3a1ef4439f4b96326caced8f428707e3cd73d.0":"2021-10-27T12:58:31.093Z","1.59.0-canary.883.1c676c7081fdb6d6e6ca08f679ee93a3d7f9b0d2.0":"2021-10-27T13:03:53.331Z","1.59.0-canary.896.4444cbfc504885c2cb666430ffd092a7bc0db5a9.0":"2021-10-28T07:56:51.090Z","1.59.0-canary.896.b75b0a4fe9334226cc8a1ec5cbea85da082ae8fd.0":"2021-10-28T08:43:04.101Z","1.59.0":"2021-10-28T12:28:41.983Z","1.59.1-canary.897.db7b74c67885d0e99fb96302ec947be508d7f04c.0":"2021-10-29T05:59:28.971Z","1.60.0-canary.866.4555175647d32931587d5f14e6b03f59aa23e6ca.0":"2021-10-29T08:43:13.045Z","1.60.0-canary.866.9cde548d8012e232295c09be1141a3bd842db726.0":"2021-10-29T09:58:58.264Z","1.60.0":"2021-10-29T10:22:00.150Z","1.61.0-canary.903.9c87ab1003e80796233d769d876af73f1b04e007.0":"2021-10-31T10:59:00.894Z","1.61.0-canary.903.4f4dedd08fe5c258be1248b103dcdb9a9c9f1267.0":"2021-10-31T11:46:32.225Z","1.61.0-canary.903.cb89e3bcd9fda1d82fb3d639098c885fa7ff7053.0":"2021-10-31T12:05:25.288Z","1.60.1-canary.897.03b749d28895afb3767d6c4f647eda81b3cfa9d2.0":"2021-11-01T03:57:42.811Z","1.60.1-canary.897.59e60c3025611aeff0ceaafbf7e74146c35da537.0":"2021-11-01T04:59:04.013Z","1.60.1":"2021-11-01T07:26:34.933Z","1.61.0-canary.903.0cc9d7c0ee182d7fd979153a545cbd1b18751114.0":"2021-11-01T09:07:08.408Z","1.61.0-canary.676.228ef1c4c8476532e5a7886abd36a20a746dfc2e.0":"2021-11-01T12:27:52.261Z","1.60.2-canary.908.bd14f00f1e4f26ee78e2a2a8b1674c84b2069d6a.0":"2021-11-02T10:51:03.984Z","1.60.2-canary.909.48e35273ac91bfab0ea1ae1126d3603cfaeda17a.0":"2021-11-02T10:53:03.756Z","1.61.0-canary.910.136994ef200bcbb70b13584d77ed37abc93824e9.0":"2021-11-02T10:57:34.376Z","1.61.0-canary.676.b6e5980a2da52251807f6fd191d953af84ab18da.0":"2021-11-02T14:48:55.328Z","1.61.0-canary.910.2f1fa0b84fb20b422b154a2c09080ee093c07556.0":"2021-11-02T16:20:18.106Z","1.61.0-canary.710.993a8f2c5e6a22c3c6f1d927972e21d3100a21d7.0":"2021-11-03T08:02:28.358Z","1.61.0-canary.913.bb5444e9425a60b0d7961151d1b5e2e297bc4081.0":"2021-11-03T08:44:40.136Z","1.61.0-canary.910.515ff653f0311e0bf4dd0801b32ee50bf7088ef8.0":"2021-11-03T09:42:32.903Z","1.61.0-canary.676.2b7d9bf5ed4065da91c443af7bbbd47dc249f29a.0":"2021-11-03T12:40:49.861Z","1.61.0-canary.911.51543faae081a06ac3a60740f8df6c6de5edfd31.0":"2021-11-03T12:43:42.977Z","1.61.0-canary.910.b936c83abbb7883bfa22c2f521eabca6a9b2b314.0":"2021-11-03T12:44:46.765Z","1.61.0-canary.916.ffae7476296feda9266fd376c0ab3687c649138d.0":"2021-11-08T10:39:51.480Z","1.61.0-canary.916.23be31fe6d638f3a96ced8750b8c5116b80c60dc.0":"2021-11-08T10:43:14.473Z","1.61.0-canary.918.02bde25c04467e41f19100a9d9f4fc2ce278c98a.0":"2021-11-08T14:35:06.603Z","1.61.0-canary.919.918b1ea2bd541e6016606c347bda6ef6c930af9d.0":"2021-11-09T07:55:05.816Z","1.60.2-canary.909.b3a0085e82412e31568365f7d3ee82d1e12f08f1.0":"2021-11-09T11:18:16.897Z","1.60.2-canary.920.26c387e307fa4da356477800b52d72a5259ad34e.0":"2021-11-09T11:20:08.965Z","1.61.0-canary.913.6b5ece181c5e36c9225115d1033cf8bf335e9a89.0":"2021-11-09T12:13:54.837Z","1.61.0":"2021-11-09T12:33:34.646Z","1.61.1-canary.909.d9ff10201c0ccd19285070f8176b1e37f83651c2.0":"2021-11-09T13:03:30.570Z","1.61.1":"2021-11-09T14:00:53.544Z","1.61.2-canary.920.a7bd37e96cad51b083d2d9f2a978c375a69d92f1.0":"2021-11-10T09:23:23.947Z","1.62.0-canary.916.2135eb39270b37488dc6dfe3a0db61d58a549dcc.0":"2021-11-10T10:00:56.719Z","1.62.0":"2021-11-10T11:02:13.504Z","1.62.1-canary.920.4db092572299e5eee849623fe82e9547f1cb829a.0":"2021-11-11T10:49:57.183Z","1.62.1-canary.920.75f85398a557e889fed4e229693be3eb5c9134ab.0":"2021-11-11T11:43:20.038Z","1.62.1-canary.898.20ca0cb15371a5c7a40b15f41deb7c9bbae4f089.0":"2021-11-12T09:10:53.474Z","1.62.1-canary.908.391e646844347cc246bc578db3c465ef1e33fd23.0":"2021-11-12T10:14:12.565Z","1.63.0-canary.924.b7f40a5de0765f3bce8298074499b7cfb1cb6d08.0":"2021-11-15T09:04:07.807Z","1.63.0-canary.924.36b8ac61db027a27d00789ebf8490e013446d40a.0":"2021-11-15T09:55:09.534Z","1.63.0-canary.923.804b91c1567fa70d31e009b438b292f957f73538.0":"2021-11-15T10:20:33.256Z","1.63.0-canary.911.3447331d3bcd50a158e09252028d4c3f749f9b5f.0":"2021-11-15T13:12:42.433Z","1.63.0-canary.923.6727ef3c1b60b0a47fe5a001b1684550d66c8027.0":"2021-11-15T13:36:09.354Z","1.63.0-canary.924.378e0849abb84d8f7760a5185fc008407278c9fe.0":"2021-11-15T13:46:10.507Z","1.63.0-canary.924.7406b4eba7954ee9e51ecd2dce3b7baed549370f.0":"2021-11-15T13:47:32.002Z","1.63.0":"2021-11-15T14:04:24.427Z","1.63.0-canary.676.17372539dcbdf3ec160a0048cd5a680e68999390.0":"2021-11-15T14:09:52.497Z","1.64.0-canary.910.dde5440084d3be57e693ece838c0f218bb46d823.0":"2021-11-15T14:43:05.230Z","1.64.0-canary.923.8eb735bf506038babb7498ae0b12faafac3ca328.0":"2021-11-15T14:46:33.733Z","1.63.1-canary.908.edee9289d5ff9b87cab19b020ce9414dcdeb17a4.0":"2021-11-15T14:49:40.646Z","1.63.1":"2021-11-15T15:20:41.547Z","1.64.0-canary.903.08f8b4d3cd1615a871c5c030f482404edf8a313c.0":"2021-11-15T15:34:52.859Z","1.64.0-canary.903.3dbd65b73e35056ba88719514c82e157d166d25c.0":"2021-11-16T07:41:42.936Z","1.63.2-canary.920.d08eaf2c340d1b311e3636091a96c1e0ec7b0f21.0":"2021-11-16T08:08:53.854Z","1.63.2-canary.925.ea8e479458337d952c8e8be1666e1466116a4000.0":"2021-11-16T08:43:01.003Z","1.64.0-canary.903.8b8d1e84abb90c3b586ee8fdb52986ab17211a9b.0":"2021-11-16T08:58:54.583Z","1.64.0":"2021-11-16T09:29:50.709Z","1.65.0-canary.923.4f5043d6567b63fe0e03ac59fc02258783f30e4f.0":"2021-11-16T15:21:17.978Z","1.65.0-canary.910.e28fcc65ce6908ed30f44e4683a33eeac49411db.0":"2021-11-17T05:47:32.739Z","1.65.0-canary.923.f35c8a166a2d56242e7efa005865124a4d29ed47.0":"2021-11-17T05:47:47.335Z","1.65.0-canary.930.a720ac680e99e05e66f4bb0be6fc9fe762628504.0":"2021-11-17T07:22:17.436Z","1.65.0-canary.930.b756f53d10961a9a27c7056fe1731a2d64c7ebf9.0":"2021-11-17T09:03:35.970Z","1.65.0-canary.676.24b83a45baba188afab27d64128d2f46bff247ae.0":"2021-11-17T10:13:25.291Z","1.65.0-canary.676.ad2ee60de250ac8f22d64d782bac728300a01018.0":"2021-11-17T10:13:33.778Z","1.65.0-canary.910.0d8bf15ff4dcfdc0fd83449a9077c2786c044552.0":"2021-11-17T14:57:56.983Z","1.64.1-canary.934.c10f6055f2a043ca2e29016cb2cf5f21e8fc9e28.0":"2021-11-18T07:38:07.566Z","1.64.1-canary.935.abe7d877f2ddb53db9513ad34175ea0950d223db.0":"2021-11-18T09:28:39.743Z","1.65.0-canary.936.8e9dad2c05528813d7c4ac08f4b90ce2d548bc6d.0":"2021-11-18T10:39:26.588Z","1.65.0-canary.930.fc23aeee4a650bf7d78871c02de8dcec6b7da1be.0":"2021-11-18T10:48:57.335Z","1.65.0-canary.936.5da1a1ac02a44c82150e89b2aba7d87bb09a1af3.0":"2021-11-18T10:52:50.224Z","1.65.0":"2021-11-18T12:38:45.472Z","1.64.1-canary.937.d12d7b4a4fc7b2eb3a595b2b5d4a9ceb52797dd6.0":"2021-11-18T12:41:27.738Z","1.64.1-canary.925.5d479bbe59fef3082ab5ed243ee369581a24835a.0":"2021-11-18T12:48:31.874Z","1.65.1-canary.935.241708dd1525963a7a979b39ca87a8274ba73503.0":"2021-11-19T12:49:50.438Z","1.66.0-canary.919.3516630b9296ab917e3e26b0f7012141f9402077.0":"2021-11-19T13:05:21.835Z","1.65.1-canary.935.d612f22448704c3dfdabe5f38ba533b99c25d421.0":"2021-11-19T15:40:29.679Z","1.66.0-canary.945.fbb489ef2e28161e565bf7a2c1c65515dd3d165c.0":"2021-11-19T16:25:46.599Z","1.66.0-canary.919.963ad92621e1a89f57cd1536ee8b43bf55f3051b.0":"2021-11-22T05:25:33.564Z","1.66.0":"2021-11-22T05:58:00.484Z","1.67.0-canary.910.2bf658aaa122680ae09244326cb31b8c6c290017.0":"2021-11-22T14:42:38.675Z","1.67.0-canary.946.459a775fc50f680d8a0ab993db96255dffadfee7.0":"2021-11-22T14:48:02.858Z","1.67.0":"2021-11-22T15:27:39.032Z","1.68.0-canary.676.3d41a9fb13087d4b850ba1eb2302f9dd96d91b43.0":"2021-11-23T08:32:39.327Z","1.67.1-canary.950.fd69a9ec6a41ee952c5ea5f33761ca9b7ef7d3e1.0":"2021-11-23T09:05:25.717Z","1.68.0-canary.955.57c81cf11e8593032f787fb51817428e7f7c5b46.0":"2021-11-25T10:25:38.488Z","1.68.0-canary.955.3bb3ba81550d7790066cc9dc629f271bdbd0e14a.0":"2021-11-25T11:35:23.430Z","1.68.0-canary.676.b82c29b8964b8f076f96f91a6d560eb53085049b.0":"2021-11-25T14:02:59.084Z","1.68.0-canary.676.bc31d65660c57e9e065449d706adf88c9b2438e4.0":"2021-11-25T14:22:26.802Z","1.68.0-canary.676.df436809988040a845854d76df375b842eea2be7.0":"2021-11-25T15:38:30.881Z","1.68.0-canary.957.aabf6102e452173b66e5e8fcfc9c7c19e64b7f22.0":"2021-11-26T13:11:55.375Z","1.68.0-canary.676.c8fd8e59000f90eec7ab5fe693b5a8e95b673d7f.0":"2021-11-28T18:56:51.562Z","1.68.0-canary.957.26c6e8f40973b13e2130ef91933de5d531d31183.0":"2021-11-29T05:27:42.286Z","1.67.1-canary.935.043a3d383ac2d65fe6310502e5c36410b427c1bb.0":"2021-11-29T08:00:24.546Z","1.67.1-canary.935.4ac11b555b3ed480ff7d870e250cd2e6408d2a63.0":"2021-11-29T08:38:07.599Z","1.68.0-canary.946.918f4dd1caa043acb6f2cfca7fef66aeadc800dc.0":"2021-11-29T08:49:04.185Z","1.68.0-canary.923.32da22cc772c775c7f8ba284ad0810fcd672f488.0":"2021-11-29T09:07:12.358Z","1.67.1-canary.935.7cadd099bb0fa69cbb3ec897e1ee4da21faa29b3.0":"2021-11-29T10:26:20.429Z","1.67.1-canary.935.7595cc23982c108327a3a70cd5f4641a990bd51e.0":"2021-11-29T10:47:43.055Z","1.67.1":"2021-11-29T11:50:08.925Z","1.67.2-canary.958.0442e9461f2ef38ffc428cc3eb70cf9f1442fc17.0":"2021-11-29T14:44:22.497Z","1.68.0-canary.930.0878aab7d00d478b63ec1f317c600563808c0d93.0":"2021-11-30T08:39:45.079Z","1.68.0-canary.960.0f1455ada369fd56c166e6bb81a0a9d08fa58df3.0":"2021-11-30T13:18:08.553Z","1.68.0-canary.923.2cb009694b0a79b458237ac57774822ed86aba38.0":"2021-11-30T15:26:32.796Z","1.67.2-canary.962.60e1cf4ec1e6efbe0e0d707c46058673ee345ab4.0":"2021-12-01T06:31:47.038Z","1.68.0-canary.955.e100287611a45c0b28b4eaa69357ba60a0b2aad4.0":"2021-12-01T06:36:51.251Z","1.67.2-canary.934.7ea0cb8d11ca8157f7ad42dcd805ed39add52f0a.0":"2021-12-01T06:42:04.237Z","1.67.2-canary.962.7434b0454f4693336b6b9668d7cced41c6214a07.0":"2021-12-01T07:14:43.286Z","1.68.0":"2021-12-01T07:46:13.009Z","1.69.0-canary.676.f995137a41dd48609e8d4340c7e602d1e4c3265b.0":"2021-12-01T08:22:23.111Z","1.69.0-canary.964.88f020e0548de34b667842e635e9fa5d8a4a38de.0":"2021-12-01T09:28:06.466Z","1.68.1-canary.962.b57a3c331043696cb92cbce6088c5728a86bfdd5.0":"2021-12-02T06:14:32.424Z","1.69.0-canary.955.6905312ee754764d84fe4bc2ffc9f579d29b9184.0":"2021-12-02T06:17:35.652Z","1.68.1-canary.934.bd06ae95e681359a8ba52c3d0edd23cc21888a59.0":"2021-12-02T06:47:45.634Z","1.69.0":"2021-12-02T07:31:30.670Z","1.69.1-canary.934.5fced32107aae34ba59f9a449a77deb18be157af.0":"2021-12-02T09:27:34.256Z","1.69.1-canary.934.9616bf7fb7593eb6c2efc88fadda67f3228f4752.0":"2021-12-02T09:30:23.696Z","1.69.1-canary.934.e38bc3b56262dfb4bd0ce9a789688a6e2c4a680b.0":"2021-12-02T10:37:10.378Z","1.70.0-canary.946.bd26b4cdb588b04c17964073f3f37cac6798658e.0":"2021-12-02T13:11:47.207Z","1.70.0-canary.946.f94c18eb80a568c819ea9852a54e34d29323e52b.0":"2021-12-02T13:31:54.669Z","1.69.1-canary.967.c6488203ae544e49386f06c347515268bd19c683.0":"2021-12-02T14:00:32.744Z","1.70.0-canary.963.ecf6b6ba591c773c016c8b70c9d41599f37dfe33.0":"2021-12-02T14:50:21.880Z","1.69.1-canary.966.8771157b0d82c4e3dc9fd26760fbbcbea1615737.0":"2021-12-02T14:53:53.958Z","1.69.1-canary.962.0e7e96873317c5208ce16f36aa190061ccc2e216.0":"2021-12-03T03:29:33.320Z","1.70.0-canary.943.7e97113d97caf79a5b13de569db2d07f15a8b5b0.0":"2021-12-03T07:44:22.168Z","1.69.1-canary.966.720ecbba5498cd34e2f33ecf369489002d08bfcc.0":"2021-12-03T09:15:43.745Z","1.70.0-canary.947.2a0c7098d63c6ad23cca298d0621bfe7f86dfd76.0":"2021-12-03T10:26:28.379Z","1.70.0-canary.947.dbae3196634f9474a2f61a41d25f20bcfa8bfc1b.0":"2021-12-03T10:43:32.284Z","1.70.0":"2021-12-03T11:04:28.281Z","1.70.1-canary.962.dedb44722a822880ec8ec5a7e85646787897ded1.0":"2021-12-06T05:22:16.000Z","1.71.0-canary.969.c2d9485cd7bd58c793f5c7e13c35396f6f15a8c0.0":"2021-12-06T11:11:44.939Z","1.71.0-canary.969.287385fde8614acb4c2fbc7ef5cd1db420c51b7d.0":"2021-12-07T05:27:39.978Z","1.71.0-canary.676.ff074f23cfd9a09e8aa87d4e491fabdf726c2fa2.0":"2021-12-07T12:51:48.784Z","1.71.0":"2021-12-07T13:23:58.356Z","1.72.0-canary.973.63191402991735ae235a9c1da136b76985bb055e.0":"2021-12-08T09:19:54.311Z","1.72.0-canary.957.e9ba3d7d3a4f79b70c22bc9ef2b5c4ec15693ad2.0":"2021-12-08T12:32:25.453Z","1.72.0-canary.973.f38b8b3d7c39a4634b7882231a453ac7ca3c0822.0":"2021-12-08T12:46:02.536Z","1.72.0-canary.973.4a79c810a232f69479c7e7224f3f25d8a6f46e43.0":"2021-12-08T15:57:52.043Z","1.71.1-canary.962.97bfdc30bdfbca7f541ffc41ffcfb9ff00f074dc.0":"2021-12-09T06:11:18.789Z","1.72.0-canary.969.5a48abeac598b8c1a242460ba1b99c66155ad884.0":"2021-12-09T06:52:23.647Z","1.72.0-canary.973.0a39d2745eafbb45273e5303870ea90407135144.0":"2021-12-09T12:34:26.362Z","1.72.0-canary.957.e469ee43fb6982de12085f03bb27983c03e36aa4.0":"2021-12-09T12:47:20.838Z","1.71.1-canary.966.19afd3a584a9b4fcf65fc5f9d6a8c5ff9dafda21.0":"2021-12-09T13:12:59.061Z","1.71.1-canary.966.23bf463d3f8961862e4c09bf460dfd29ea9cb6a4.0":"2021-12-09T13:13:27.647Z","1.72.0-canary.972.e3e758d9bd6d3946cc6fedf410cb9b0caba11677.0":"2021-12-09T13:28:02.699Z","1.71.1":"2021-12-09T13:43:58.405Z","1.72.0-canary.973.941293786c4cc0eb0533ba6e5b7923a0a7008ac2.0":"2021-12-10T05:34:20.296Z","1.72.0-canary.957.69bd9dd1aecaf099b98b91c13e43061f16c925d4.0":"2021-12-10T05:49:00.086Z","1.72.0-canary.976.ecf20377a0eb96c13c2e20c108249444487d7772.0":"2021-12-10T13:14:36.359Z","1.72.0-canary.957.da8ff7f08c1e524623cc45f9638e00483b224387.0":"2021-12-14T13:30:35.911Z","1.71.2-canary.950.e24641c3a0b47af7cac94b90b7d2a1036c2aed2e.0":"2021-12-14T14:36:02.688Z","1.71.2-canary.989.3dd91b4e3c41615e5b3e7ca3e28407758388dff5.0":"2021-12-14T14:43:54.943Z","1.71.2-canary.950.bb86e97a97218d05c173025790c847bcfdd3b18d.0":"2021-12-14T15:19:32.078Z","1.71.2-canary.950.f02db5ae7be8f0daeac1e563b1a4bc253ddc357f.0":"2021-12-14T15:45:11.111Z","1.72.0":"2021-12-14T17:06:22.653Z","1.73.0-canary.969.cf9a990e7dd1a802f8dcfacd25b33637551c7c55.0":"2021-12-15T05:04:59.986Z","1.73.0":"2021-12-15T05:27:25.774Z","1.74.0-canary.972.f956e1a40ea733a963b4a4c51cb38b2d6242cec3.0":"2021-12-15T12:02:23.857Z","1.74.0-canary.985.345f5be20e41d01ea30cf73b1bf836a82e105ed8.0":"2021-12-15T13:44:41.286Z","1.74.0-canary.992.18ad2ff59b9f72936dc9f9dbfc6cee563e083353.0":"2021-12-15T17:55:13.449Z","1.74.0":"2021-12-15T19:01:50.492Z","1.74.1-canary.996.60fe43e36eaf923fbaf079d05fc6290685129632.0":"2021-12-17T09:35:14.712Z","1.75.0-canary.1000.a0a0428700c66b3c6bee6b9463a21e6f57767ed0.0":"2021-12-18T10:49:39.078Z","1.75.0-canary.1000.8ad310d6a5db0dba26b640b6c9b8f278ea099ce5.0":"2021-12-18T15:19:49.814Z","1.75.0-canary.1000.dee515ab3344ab203809cda01bb2add3fcf40597.0":"2021-12-19T12:56:41.681Z","1.75.0-canary.1000.d87069dd61a1b0cdf08f3c7e3744120dc54e3b87.0":"2021-12-19T13:53:03.986Z","1.75.0-canary.1000.25438439e55b83e55cfb2dc89a71d2fb9d643f22.0":"2021-12-19T17:58:45.688Z","1.74.1-canary.996.c47e2997c8f91bb9a6043fdd2c17d0035c48c2a1.0":"2021-12-20T06:56:57.946Z","1.74.1-canary.996.f0a9139f9b478f5ce9dff69154accbf7628b6e54.0":"2021-12-20T10:45:19.506Z","1.74.1-canary.996.c5587e20152eebb4359214cc1ea2cb6bd2abca58.0":"2021-12-20T12:26:07.144Z","1.74.1-canary.1005.8be4a2c8f997608172abb569dafcb6f1ba0e0fd0.0":"2021-12-20T12:43:34.287Z","1.74.1-canary.996.30eb3231ed64ba6774e0389ee63a66576814610d.0":"2021-12-20T13:17:58.002Z","1.74.1-canary.958.92e490035c69b04f2f558e7dfbfcb5a6da474d3c.0":"2021-12-20T14:18:58.916Z","1.74.1-canary.996.1d42e762e32a1af7e7634325966ddd6d4fb29eda.0":"2021-12-21T06:55:08.302Z","1.74.1-canary.1007.03647bd47fb2655364879ce52903e856fbbff55d.0":"2021-12-21T09:31:11.516Z","1.74.1-canary.983.7a3bef9debdb08dc38c70f9982e95eca8da292e4.0":"2021-12-21T14:25:09.661Z","1.74.1-canary.1008.aa7dc818afbb51e9294a4d6c87b98d615d67db89.0":"2021-12-21T20:42:38.291Z","1.74.1-canary.983.3e7930499d27d63abd0657820c64c28e87f56a43.0":"2021-12-22T08:47:27.374Z","1.74.1-canary.983.3c33e104d648b23a5eae50fad376c829c6d0fc79.0":"2021-12-22T09:25:23.955Z","1.74.1-canary.1010.6048957f0d59b714f0816dc7bb35eb8bbd3dc6b4.0":"2021-12-22T11:33:08.506Z","1.75.0-canary.1011.bed33c2a22315debb736d995ff0db729d8ad6480.0":"2021-12-22T13:54:28.715Z","1.74.1-canary.1010.8718a9dd04afd401ecc663bd6529d839e1e2d538.0":"2021-12-22T16:57:40.831Z","1.74.1-canary.958.9bb381706a0e7c53b674fb19c2f26048f003f700.0":"2021-12-23T07:41:41.191Z","1.74.1":"2021-12-23T09:11:31.816Z","1.75.0-canary.985.35df320e587978e48537e8e7c6f1962126e375d3.0":"2021-12-23T09:19:35.783Z","1.74.2-canary.1014.01682e7faba5d61cc13d9a52cd493b1cefb7951d.0":"2021-12-23T13:13:18.882Z","1.75.0-canary.976.60c29185a560da543702eaaf99185d7b7471231d.0":"2021-12-24T05:22:38.818Z","1.74.2-canary.996.968cf5161e6bf80013c9af9615f4546c6d1b367a.0":"2021-12-24T05:35:55.025Z","1.74.2-canary.1007.c077cfb8247f7ddb1255fbd2e1f2c29e193e9053.0":"2021-12-24T05:39:16.468Z","1.74.2-canary.1016.a6d4a1044a84dd90932c26fe7a85b2f250a99743.0":"2021-12-24T12:08:34.865Z","1.74.2-canary.1016.4396a82d9ce5b476fc25bcfbfaccf3345c6c4d9d.0":"2021-12-24T14:03:03.247Z","1.74.2-canary.1007.1ebda925a22abbd21d18a32b7b309c045dc04bd1.0":"2021-12-27T06:17:09.946Z","1.75.0-canary.976.20b220bdbf2a80a585f8659d87ee433afcf59d2b.0":"2021-12-27T06:51:09.418Z","1.74.2":"2021-12-27T07:52:49.170Z","1.74.3-canary.996.689f22a0f008c3e442edccce39867d4bc24ddb31.0":"2021-12-27T08:42:45.926Z","1.74.3-canary.1017.f79b21629479e00ad164022a99873f8d8cacdabc.0":"2021-12-27T09:22:09.085Z","1.75.0-canary.985.5ae7644942e936c9c492ae3ec5e7da39c031ddbd.0":"2021-12-27T09:49:16.243Z","1.74.3-canary.1008.9dcb35045f30a0c25e07fce320f8423d8394ec46.0":"2021-12-27T10:51:38.388Z","1.75.0-canary.985.4f6d30b851fd3d8dc2060bb4ad92d808b104499f.0":"2021-12-27T11:27:52.268Z","1.75.0-canary.985.577ce4cd9a66cb17e4bdc0fec19e1004524612ab.0":"2021-12-27T13:32:48.928Z","1.75.0-canary.976.e2fbe510fd1e49e84ec20a6a6e694e0b4c0f0dae.0":"2021-12-28T07:04:24.821Z","1.74.3-canary.1016.edcadf6ab626d0dc8f7d086783f113259d20b17c.0":"2021-12-29T10:12:18.949Z","1.75.0-canary.1022.a1a906d8b405eefc0bbf1ee61af907c27bf512de.0":"2021-12-29T11:45:24.448Z","1.75.0":"2021-12-29T12:20:55.678Z","1.75.1-canary.1016.4eaa3bc9c9203f268fa09b8ede6b062621a22ded.0":"2021-12-29T15:27:02.531Z","1.75.1":"2021-12-29T16:14:05.132Z","1.75.2-canary.1014.450fb8f647c49d54f7ab3841e96cb4665db83f25.0":"2021-12-30T09:42:54.457Z","1.76.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0":"2021-12-30T14:20:08.359Z","1.76.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0":"2021-12-30T14:36:30.548Z","1.76.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0":"2021-12-30T15:29:12.009Z","1.76.0":"2021-12-30T16:21:19.320Z","1.77.0-canary.1027.b831f3bdc41c920342d7fb6834e2f3c587c41a40.0":"2022-01-10T11:02:00.390Z","1.76.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0":"2022-01-10T14:15:57.647Z","1.77.0-canary.1031.bb8d7aacdf758bd881509110c72b0993cbcb7f5e.0":"2022-01-10T15:14:06.952Z","1.77.0-canary.1031.0a10562b9aeba47870099e3028d33e0d0198477f.0":"2022-01-10T16:44:51.103Z","1.77.0-canary.1031.f78ced5a16bcaf0a2399f2f510c7c59d658bf529.0":"2022-01-11T08:50:45.356Z","1.76.1-canary.1014.8cbea68cc84dc6e00dcf4827425f489466aec438.0":"2022-01-11T09:01:54.890Z","1.76.1-canary.1014.2f3f7629d71aeb984af98ebb2e0e091fb2800913.0":"2022-01-11T09:58:33.466Z","1.76.1":"2022-01-11T12:15:22.615Z","1.76.2-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0":"2022-01-11T14:25:32.002Z","1.77.0-canary.1031.5ec747ef68976beb8abdd9a396bbd900df6f374c.0":"2022-01-11T14:52:27.111Z","1.77.0-canary.1031.36bfaf4d5b591fd9cd2640e1e9cabf5f05e2cc17.0":"2022-01-11T17:32:47.365Z","1.77.0-canary.976.a1efc698d002c3026247918dfbf17480a572a0cb.0":"2022-01-12T07:44:31.781Z","1.77.0-canary.1031.e77817ad74ead92bf180bbaa5cf013379119ff69.0":"2022-01-12T09:56:06.878Z","1.77.0-canary.1031.bbd8f4fd8ad770e354be4518dc79c7706b33d795.0":"2022-01-12T12:01:18.740Z","1.77.0-canary.1031.6b0b21a472757e157f3ad9df23b715d2fa03a9e2.0":"2022-01-12T13:13:33.050Z","1.77.0-canary.1031.27e10d508558a52cb4e50f5f7c81b7e7a1acda40.0":"2022-01-12T15:19:39.271Z","1.77.0-canary.1037.722b84c3fa1c9e1cf094b870a54c381b27b17d00.0":"2022-01-12T16:04:09.162Z","1.77.0-canary.1031.1a509bea264a6bb97a556424d8a26aeef6e54d0c.0":"2022-01-13T09:07:01.331Z","1.77.0-canary.1031.9b7e39d6b76300332a490b16d6df55b1f80fcbcf.0":"2022-01-13T10:51:30.835Z","1.77.0-canary.1031.d7b83a821ad45d41afa89ab6eb7f793aa1af7e2f.0":"2022-01-13T11:39:52.222Z","1.76.2-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0":"2022-01-13T12:09:29.217Z","1.77.0-canary.1037.fb629d359ef02922885089d821f8d822511fdbbe.0":"2022-01-13T13:09:04.218Z","1.76.2-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0":"2022-01-13T13:24:18.715Z","1.76.2":"2022-01-13T13:30:11.680Z","1.77.0-canary.1037.f05f54339c4daf1e9c43b120cd5117e1f30ca1ed.0":"2022-01-14T11:33:38.317Z","1.77.0-canary.1037.6923789e5654cf6870cf2756eeecc52aa9016c11.0":"2022-01-14T12:07:05.335Z","1.77.0-canary.976.562f31f534eba22dc326cdc681c95f83cf1bea3e.0":"2022-01-17T06:11:39.733Z","1.77.0-canary.976.2838b9c3f9c6fb4aaab3b984aa6fe886c2189ea9.0":"2022-01-17T06:54:17.453Z","1.77.0-canary.1037.fcfc6c621e64bc17a579c6567415d4acc54b78ab.0":"2022-01-17T10:22:11.480Z","1.77.0-canary.1037.04ef34ce3ffd86d730c3b03098bc226b9813ce3e.0":"2022-01-18T11:31:28.587Z","1.77.0-canary.1037.6050dc4730ebd6c1076f9505c32be018e201fc61.0":"2022-01-18T12:35:41.640Z","1.77.0-canary.1044.deb9f266f833b342b540bcdbc889b23d12014775.0":"2022-01-18T13:05:10.383Z","1.77.0-canary.1037.79de2ef9b8863cf268b299a9cc975128e4cfe7fd.0":"2022-01-18T13:24:46.706Z","1.77.0-canary.1037.fa100f6355a8986bb69aa5c9713b9e84c4f49e61.0":"2022-01-18T13:35:12.028Z","1.77.0-canary.1037.22df173c8ec75edce279e19f6cfd45b71605d0c0.0":"2022-01-18T14:27:07.430Z","1.76.3-canary.1045.f7a52b5141941bb23433d8a5a536414eaac79f6a.0":"2022-01-19T09:43:34.369Z","1.77.0-canary.976.e192022042e7182ead1ef78aa5157aad377e2837.0":"2022-01-19T11:40:41.398Z","1.77.0-canary.976.00868d5c29210073fbb140ef1d227eed5d18c822.0":"2022-01-19T13:24:21.319Z","1.76.3-canary.1047.53ccab2285e34123a0c96ff0686e14088421ce63.0":"2022-01-19T14:03:40.980Z","1.77.0-canary.1044.e9713a84f5f685b5f488eba2b80894f0e8058283.0":"2022-01-19T14:46:47.716Z","1.76.3-canary.1047.ca5a43940a9f880302613bc6c479aa60b4c8e882.0":"2022-01-19T15:03:04.071Z","1.77.0-canary.1044.7f0d1866e599ac346bc0e2080d62dd040ce55e0e.0":"2022-01-20T09:25:47.731Z","1.77.0-canary.1044.8d402d813a22b48b0dcb8ed685314f0f80847de1.0":"2022-01-21T11:21:09.276Z","1.77.0-canary.1051.f48ecda321383de949e760f851aa1eb9a5c3fdda.0":"2022-01-24T07:45:53.217Z","1.77.0-canary.1051.9103bdccf4b605a8acbfb09571e7eb15866f98be.0":"2022-01-24T09:02:08.515Z","1.77.0-canary.1051.b3de02362866c1489ae20ab5ec82924ea1a4285d.0":"2022-01-24T09:10:55.265Z","1.77.0-canary.1037.a7c899d5c0cd5c8ede80cbce769af69c762d1fe0.0":"2022-01-24T13:27:36.617Z","1.77.0-canary.1037.ced5809accedd1c89bf8cbbfbdaff6e7232c088f.0":"2022-01-24T14:01:41.939Z","1.77.0-canary.1031.202ae0e7a1e6ede01f6504c0126dc9acb585ae50.0":"2022-01-24T14:41:12.569Z","1.77.0-canary.1037.3e552c8e1e5e5c52c4b6b7108879540845d2badd.0":"2022-01-24T14:55:53.613Z","1.77.0-canary.1037.577de6af98bd1ffb683c0597c923414019a80f46.0":"2022-01-25T07:39:00.064Z","1.77.0":"2022-01-25T08:20:58.048Z","1.77.1-canary.1053.64272db41a493b85096e9171e05209fe8e3040e2.0":"2022-01-26T06:54:37.830Z","1.78.0-canary.1055.363bf0407f0f763976d31150c27d2211a5220718.0":"2022-01-26T08:46:58.256Z","1.77.1-canary.1045.d0577854b72aa4f189200dd348a61b81b5836e36.0":"2022-01-26T08:48:47.599Z","1.77.1":"2022-01-26T09:19:01.968Z","1.78.0-canary.1048.6ef4213dc6de18e28e487221cba847b59dc8e979.0":"2022-01-26T09:30:12.266Z","1.77.2-canary.1053.8e2a4710c66913d2c71f723e80fb74c2315f3bd1.0":"2022-01-26T10:40:14.351Z","1.78.0-canary.1055.300b30cfd472b5ec747019308070adb28870deb7.0":"2022-01-26T12:25:41.483Z","1.78.0-canary.1031.7584e23127494db626e5a707285019ed8ddb0024.0":"2022-01-26T12:39:30.543Z","1.77.2-alpha.1":"2022-01-26T16:10:52.453Z","1.78.0-canary.1044.8207b5c369d9410fc29b1295a07b3571ecfdb81e.0":"2022-01-26T16:23:22.404Z","1.78.0-canary.976.bed176d4e344aa61f840b35e2f7bbd4838099897.0":"2022-01-27T05:45:25.004Z","1.78.0":"2022-01-27T06:20:03.290Z","1.78.1-canary.1047.5dd6b61776cea0c83a5b702c4c428978246cad1c.0":"2022-01-27T06:43:33.996Z","1.78.1-canary.1047.724a358b6a7d9c2ca6a6ba34654543be2fe1d9ce.0":"2022-01-27T06:56:34.517Z","1.78.1-canary.1056.e85da8ed0d61f1e65fb8a4f4e6633551bd4cfcfe.0":"2022-01-27T07:21:25.194Z","1.79.0-canary.1051.f299438a3882aa1f90da1834e30c40425220d09f.0":"2022-01-27T07:35:50.771Z","1.79.0-canary.1031.265986cfcb9fb2654c7b226b074db4df2274abe0.0":"2022-01-27T09:47:09.584Z","1.78.1-canary.1053.61cba54eeb72809cded2ac92a8bbe63579f882a3.0":"2022-01-27T12:01:15.229Z","1.78.1-canary.1047.66ad430edf68fa11ed9c90d71e757555904513a8.0":"2022-01-27T13:00:57.941Z","1.78.1-canary.1057.7a97775c8db182150b9fc132fee25161e24d0695.0":"2022-01-27T16:52:37.351Z","1.78.1-canary.1056.77d2ec501ae5353903277ebd497c588d6d37815c.0":"2022-01-28T05:38:39.058Z","1.78.1":"2022-01-28T06:26:17.600Z","1.78.2-canary.1057.9e54d520e136b1894f82e8471220a8bc0c1f7c6e.0":"2022-01-28T08:04:36.389Z","1.79.0-canary.1051.c1085c5efba0b90f225384f297b1ba01a30013be.0":"2022-01-28T09:32:59.495Z","1.79.0-canary.1051.448849856bdc1fd2a35de8766ef2d96ebdcfdbe7.0":"2022-01-28T10:01:44.161Z","1.79.0-canary.1031.f1c040254c34109ea9d19b455b8d97d1ce7bfa34.0":"2022-01-31T09:06:54.559Z","1.79.0-canary.1055.3daad922dc83c637e549cebbbcac31c9e9c3f59d.0":"2022-01-31T13:56:00.901Z","1.78.2-canary.1060.eb5e22a7fe4254b3dfe9ed76c0a8a1393c4b86e8.0":"2022-01-31T14:02:13.072Z","1.78.2-canary.1062.7c4a9e477f2573a0d0523de553babf948960b2ea.0":"2022-02-01T09:22:20.663Z","1.78.2-canary.1057.58c80cc3940acf42ceb3f3f75800445323976b61.0":"2022-02-01T09:30:39.897Z","1.79.0-canary.1048.9358e588dfea6fd57965803565e1063eea5c82ca.0":"2022-02-01T09:39:19.250Z","1.79.0":"2022-02-01T10:21:16.568Z","1.80.0-canary.1063.2b1bc5904058546db1ef28bdc5ae652523f4a255.0":"2022-02-01T15:53:20.470Z","1.80.0-canary.1051.f70d75d92c33b9a69e555e810c2d0f00afa12fc8.0":"2022-02-02T05:46:09.944Z","1.80.0-canary.1048.023e669f711fecb0f53202246ebd6ad51b9a57ce.0":"2022-02-02T07:20:51.721Z","1.80.0":"2022-02-02T07:25:10.853Z","1.81.0-canary.1055.f930b5985c6887cf4567108477d973d7f77c3c6c.0":"2022-02-02T08:27:37.856Z","1.80.1-canary.1047.0762631ed9475ddc2dafa4df2276e99a8281fcc9.0":"2022-02-02T08:44:31.170Z","1.81.0-canary.1055.f0bb8d8f7adbda0899f5331c44c5bb691ec1b813.0":"2022-02-02T14:20:05.744Z","1.80.1-canary.1064.0f7eb924ded0afe804380857bbbdc2871e9fab5e.0":"2022-02-02T15:24:53.213Z","1.80.1-canary.1053.bb84e31e66c83a73ad444b32404084bcf51f87d5.0":"2022-02-03T08:28:55.658Z","1.80.1":"2022-02-03T09:26:09.179Z","1.81.0-canary.1055.cb0fe56eb1bdd7815754f00a2194c9c40fb65c26.0":"2022-02-03T12:23:38.787Z","1.81.0":"2022-02-03T13:07:55.829Z","1.81.1-canary.1064.41eb22c7f2f0ba52d2c3e13be86e485e5f4f5dd7.0":"2022-02-04T05:08:02.101Z","1.81.1-canary.1064.9d500f71b5a1ec722d167c46548ff9241dd0c1a3.0":"2022-02-07T08:01:14.571Z","1.81.1-canary.1068.b8c13190e3346897f2577cd6045bb2db4c9fe2f2.0":"2022-02-07T08:43:15.448Z","1.81.1-canary.1064.b306d6ee7358a9305957b17dc2757f16a1cfd81c.0":"2022-02-07T09:23:44.648Z","1.82.0-canary.1048.2ee885faa73c6fad68e7277986a56dc89a9672e0.0":"2022-02-07T12:18:44.662Z","1.81.1-canary.1054.a2ba6d35bc3279f2a75b8a0b339967d9602f895b.0":"2022-02-07T13:05:15.804Z","1.82.0-canary.1048.41513931c15ace04b53b73eacb6859c83fec9db3.0":"2022-02-07T13:13:58.950Z","1.82.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0":"2022-02-07T16:31:04.016Z","1.82.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0":"2022-02-07T16:32:22.765Z","1.82.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0":"2022-02-07T16:40:11.500Z","1.81.1-canary.1068.0addced2988f4bb3337527e17bc75a6d180517a7.0":"2022-02-08T08:22:07.822Z","1.81.1":"2022-02-08T09:00:39.994Z","1.81.1-canary.1054.c9cee54e0ebd0b01f30f83243d8c7a97bf9eaf87.0":"2022-02-08T09:06:23.656Z","1.82.0-canary.1044.bc788d6c7d99d594e059efa986e88c4aab108b9a.0":"2022-02-08T12:44:42.314Z","1.82.0-canary.1044.8674a0d46e16e08f09f4a9ca4508db9d13940950.0":"2022-02-08T19:16:20.276Z","1.82.0-canary.1047.9488dacbb4f65570cfe3e5aed388c8708aad826b.0":"2022-02-08T23:37:36.557Z","1.82.0-canary.1075.2e755950017a6adc398487e567338c380e115180.0":"2022-02-09T10:42:43.126Z","1.82.0-canary.1075.ba849a5167cc6e73e664cc8619f0ee4433d415e7.0":"2022-02-09T11:01:42.476Z","1.82.0-canary.1075.b4086422f28fd0cf0fec5fd3352cc3870333b7d4.0":"2022-02-09T14:36:36.129Z","1.81.2-canary.1076.e442dbc34c67edbc56f046a6cd9c671c1903c9e9.0":"2022-02-09T14:47:09.784Z","1.82.0-canary.1044.102b8df4c214674ed8054b93b793d5766d730bc7.0":"2022-02-10T12:43:11.168Z","1.82.0-canary.1081.60ff2c6e9adfb16006281ed2150f99d969e58116.0":"2022-02-11T12:28:58.216Z","1.82.0-canary.1082.6e58a7cf7b18b8caae0e6582d64dabd99dda41d7.0":"2022-02-13T20:34:08.507Z","1.82.0-canary.1083.c8a06e2fd6a3079488a3eff12eb56dbe85a61785.0":"2022-02-13T22:12:30.980Z","1.81.2-canary.1085.20b0098f2f594e61c6933dd9e3abef1a4d9886be.0":"2022-02-14T11:33:21.683Z","1.81.2":"2022-02-14T12:20:10.947Z","1.82.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0":"2022-02-14T13:03:57.882Z","1.81.3-canary.1090.1393ac6f64d4af31f1546ad9375f672208b4dee6.0":"2022-02-14T20:31:37.086Z","1.82.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0":"2022-02-15T13:37:18.522Z","1.82.0-canary.1081.b24fb97a407ed9c5b514cc611ad30e59cb59cfa1.0":"2022-02-15T15:31:15.805Z","1.81.3-canary.1090.cf36af0364e6e34cc381c44b793a2b2c3e14bb41.0":"2022-02-15T15:53:17.661Z","1.82.0-canary.1083.d3b68adbf2b025f785e4efa812cac0bdc8c95253.0":"2022-02-15T21:01:16.598Z","1.82.0-canary.1083.9e7a3a99a3bbeab92e861b4c52de500d11b87a31.0":"2022-02-15T22:02:01.962Z","1.82.0-canary.1082.2e848876cfadd3dbd267a463cf2735b34a1061a9.0":"2022-02-15T22:02:49.494Z","1.82.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0":"2022-02-16T06:04:01.918Z","1.82.0-canary.1096.ae01919f2c4a45e839db0c97ceed24941bc694fa.0":"2022-02-16T06:10:26.374Z","1.82.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0":"2022-02-16T06:19:04.566Z","1.82.0-canary.1096.757c0363f1b23cc6f66c497474ba540e3afee84f.0":"2022-02-16T06:26:37.086Z","1.82.0-canary.1099.d3298899affe6498967ee8278527d23fbbe35f11.0":"2022-02-16T06:47:51.340Z","1.82.0-canary.1102.01b2164835eb5fbdb7145d17b584a19e8cbdccdb.0":"2022-02-16T07:05:29.002Z","1.82.0-canary.1081.3d01923572447584ba32ea80ae37e8b45a445887.0":"2022-02-16T07:08:48.768Z","1.81.3-canary.1054.77458a775e128c85cba66f85d44bb7dc662c0f0f.0":"2022-02-16T07:57:47.227Z","1.82.0-canary.1075.5a59fd80e9a75e01d7b15c3cbcfabe50ba9b3a27.0":"2022-02-16T09:00:32.581Z","1.81.3-canary.1088.068761d536e9545c767171a330d4946660a4e896.0":"2022-02-16T09:03:23.667Z","1.82.0-canary.1075.2580f09d7853e88abb0e77f3b50bf7d445edec88.0":"2022-02-16T09:05:23.025Z","1.81.3-canary.1076.37c80d80486dfcb918957ba64d2eabb02fc00e4f.0":"2022-02-16T09:15:25.188Z","1.82.0-canary.1080.f8d7cc4a2bb6efb24893d31bc1c456b230c92ddc.0":"2022-02-16T10:30:47.124Z","1.82.0-canary.1044.46dcb329baf2b8fcc65e8a6a3d487f6c68469624.0":"2022-02-16T11:35:47.388Z","1.81.3":"2022-02-16T11:49:55.615Z","1.82.0-canary.1075.6f4d2b5938de6348744e2340b0e62e635f2ea8c2.0":"2022-02-16T15:53:28.468Z","1.81.4-canary.1104.647ec8cd2f3d9beda1f71e3d4bb1fe746e2a296e.0":"2022-02-16T19:07:51.866Z","1.82.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0":"2022-02-16T19:35:15.717Z","1.82.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0":"2022-02-17T06:43:23.825Z","1.82.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0":"2022-02-17T09:41:03.664Z","1.82.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0":"2022-02-17T09:58:49.458Z","1.81.4-canary.1106.3832627581dd419cdf60751509a35625be54f156.0":"2022-02-17T10:01:56.662Z","1.81.4-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0":"2022-02-17T10:21:24.440Z","1.82.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0":"2022-02-17T10:44:56.251Z","1.81.4":"2022-02-17T11:01:20.155Z","1.81.5-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0":"2022-02-17T12:30:23.790Z","1.82.0-canary.1081.5d4e965439f0b7ca9f169233c81779e49511002e.0":"2022-02-17T12:59:35.104Z","1.82.0-canary.1081.b8a2a513349848d723073fc5a45637246f2edb82.0":"2022-02-17T14:33:47.374Z","1.82.0-canary.1083.84717b25895cdc7abe9ba6e159b4c7682ce14683.0":"2022-02-17T15:56:25.504Z","1.81.5-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0":"2022-02-17T15:58:13.523Z","1.82.0-canary.1083.137d42c941c94d85c82f082d0056ab0bdbc95f5a.0":"2022-02-17T21:37:59.937Z","1.82.0-canary.1083.126a074ee13990a04a67e21838d7c4c965fcea52.0":"2022-02-17T21:45:15.680Z","1.82.0-canary.1083.f6576c5a71b64869dd470474b42746a093de6ae8.0":"2022-02-17T21:48:04.591Z","1.82.0-canary.1075.80d245bc11860c01e312048444f4eec86dfb3a20.0":"2022-02-18T06:27:24.542Z","1.82.0":"2022-02-18T07:17:09.267Z","1.82.1-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0":"2022-02-18T10:58:24.548Z","1.82.1":"2022-02-18T11:37:41.504Z","1.83.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0":"2022-02-18T14:00:03.108Z","1.83.0-canary.1044.2ae7529bd7d5fbdd08a9ad7d26e6f2b1fcd132d1.0":"2022-02-18T14:49:18.656Z","1.83.0-canary.1083.c687b717b7e6e658929d31aee5b3e0b801491fe7.0":"2022-02-20T15:57:30.905Z","1.83.0-canary.1082.66eec31de992e2580d3c032f0aad8a3063e10d1b.0":"2022-02-20T16:42:14.263Z","1.83.0-canary.1082.7831390cf8163814f7c634741bb540ef9c50ce4a.0":"2022-02-20T17:07:48.199Z","1.83.0-canary.1083.4c5ee64a1aa7ce8588ae3803b2eea4b20aebbefd.0":"2022-02-20T17:08:35.319Z","1.83.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0":"2022-02-20T17:24:43.115Z","1.83.0-canary.1096.b16b434c2ad57f52805e0507625a8b5e0a3a8d39.0":"2022-02-20T17:33:49.849Z","1.83.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0":"2022-02-20T17:37:47.069Z","1.83.0-canary.1099.950339cfc1a8dd2b9136596494d003af570463ea.0":"2022-02-20T17:53:00.258Z","1.83.0-canary.1102.52a5b7f1379831fa02b05dad43ecdcb6b9f49d80.0":"2022-02-20T18:16:18.983Z","1.82.2-canary.1113.f831b445938d41b09534a11476c8f9d61acd7f9e.0":"2022-02-21T10:55:33.256Z","1.82.2-canary.1114.2124c75fb35ec8286610d5a9f9efbba088fff086.0":"2022-02-21T13:56:00.105Z","1.82.2-canary.1114.432ea028216af3594cb8ad12c78f98b51b91d57a.0":"2022-02-21T14:26:17.839Z","1.83.0-canary.1102.1f185a96872baf98c97b49813bdf32206af0d215.0":"2022-02-21T16:36:43.246Z","1.83.0-canary.1099.86a7bb4fb5e97b43bafe6743c81d7e8c74413928.0":"2022-02-21T16:50:01.399Z","1.83.0-canary.1096.e78215a8f5b9f268cf9c3f3e81f66153aad8eefa.0":"2022-02-21T17:07:26.483Z","1.83.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0":"2022-02-21T17:21:50.187Z","1.82.2-canary.1114.b6b38cc49462a516b4acf03d6b7a9b0a6f91280a.0":"2022-02-22T07:47:11.943Z","1.83.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0":"2022-02-22T08:33:23.784Z","1.82.2-canary.1115.11c88bdf4ec97c275a9f0ba067b67f36a2147979.0":"2022-02-22T09:29:58.305Z","1.82.2-canary.1113.eb62e28f202cb4ff6d0b2f0ee672934047bd4d82.0":"2022-02-22T09:59:22.545Z","1.82.2-canary.1116.10eea8faef160679874949e3bacfca272c0fae0b.0":"2022-02-22T10:00:30.398Z","1.82.2-canary.1117.5b8b004d07eb7e5020520a090be7df647a60a93e.0":"2022-02-22T10:09:51.994Z","1.82.2-canary.1116.45146db10bf665e75fc95170c01f188e7418af3b.0":"2022-02-22T10:14:15.395Z","1.82.2-canary.1118.dd44e2d2762390998f20657e5c6c2b81342b3197.0":"2022-02-22T11:18:55.430Z","1.83.0-canary.1119.dca889795345ee5ad156deed8fff9f4206b99ec3.0":"2022-02-22T12:17:05.413Z","1.82.2-canary.1117.a1752f7e1a77264bb3a2602964fa55511143c2fa.0":"2022-02-22T13:40:59.436Z","1.83.0-canary.1119.32daae97ffb79d411d316ff19a796065efd2ac39.0":"2022-02-22T14:29:22.945Z","1.83.0-canary.1083.817efec0d1f8d64f74ec200593ea4afc92967801.0":"2022-02-24T05:09:29.106Z","1.83.0-canary.1082.f0ad1d03df2a78c3609086a495404ac61005e16d.0":"2022-02-24T07:10:23.934Z","1.83.0-canary.1047.9a84119662956cdcce263c11256ce46d879cb252.0":"2022-02-24T07:53:01.051Z","1.83.0-canary.1083.8ddf5c527e57abbdfe227edd5f0cda789d0ce937.0":"2022-02-24T08:02:44.804Z","1.82.2-canary.1117.cfa29a1a2e1ce426adf8716b67b07d12c12069d7.0":"2022-02-24T09:29:52.226Z","1.82.2-canary.1118.a8b17e973e9f242b25fac4faed5c9d921098f6b2.0":"2022-02-24T09:34:11.491Z","1.82.2-canary.1104.7afcb82860cc1a4d585a889146622c9d4920684c.0":"2022-02-24T10:07:59.444Z","1.82.2":"2022-02-24T10:54:56.331Z","1.82.2-canary.1116.8e200969d93eb8e24dbdb36670ac115364299963.0":"2022-02-24T10:55:04.054Z","1.83.0-canary.1083.7009d31ce69a6bb553063fbb2eb0cc06ceb6cad7.0":"2022-02-24T10:59:40.506Z","1.82.3-canary.1115.4d6aef8795510b00f0a33eee94250e72d92a4863.0":"2022-02-24T11:58:30.072Z","1.82.3-canary.1116.5f01a9cc59f79fe2fcfc711636c766d0da534d53.0":"2022-02-24T12:14:03.209Z","1.82.3":"2022-02-24T14:25:04.422Z","1.83.0-canary.1047.96ad687a17b4fb0206de4e321e7cec94f11de002.0":"2022-02-24T21:59:43.920Z","1.82.4-canary.1120.0f07af60c83e09334c3edbcfbe6b5b618aa682b5.0":"2022-02-25T09:37:43.748Z","1.83.0-canary.1044.fdc1fca6346aede84202aa9e5964962e55e4836d.0":"2022-02-25T11:34:45.246Z","1.83.0-canary.1081.f68aaff822877b9deecdd9289f37822b5a1f4702.0":"2022-02-25T13:55:58.412Z","1.83.0-canary.1044.678d052f0a82b8655ce18e3728272b6d17b7c9f6.0":"2022-02-25T14:55:12.906Z","1.82.4-canary.1118.c8b6853bdb4162b31255f117bbd17c944fb59a79.0":"2022-02-28T08:09:58.450Z","1.82.4-canary.1117.3f55227675ce365f7a43509cec33a930b7460507.0":"2022-02-28T08:10:34.070Z","1.82.4-canary.1114.40173294eede96bb3f371eb4aa3733a40f6a57e7.0":"2022-02-28T08:39:42.943Z","1.83.0":"2022-02-28T08:49:23.322Z","1.83.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0":"2022-02-28T09:11:35.941Z","1.82.4-canary.1117.7f02bcfa5617f28fc3d936b2b38e79f97b61f95a.0":"2022-02-28T10:39:02.555Z","1.82.4-canary.1116.0b0cbbc544f7a1ac55d93db6974e09519f6e5e70.0":"2022-02-28T10:52:01.649Z","1.83.0-canary.1080.3d23298547512ab647bcdc1226b7889e64928242.0":"2022-02-28T12:18:57.832Z","1.82.4-canary.1117.87573ef350f29b1f8caaa9df086b69c5a4afbd5e.0":"2022-02-28T13:06:05.586Z","1.82.4-canary.1120.4666358825e573870c80608219a80037ef113d63.0":"2022-02-28T14:27:10.893Z","1.83.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0":"2022-02-28T14:40:21.734Z","1.83.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0":"2022-02-28T16:13:58.067Z","1.83.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0":"2022-02-28T19:21:58.634Z","1.83.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0":"2022-02-28T20:16:01.527Z","1.83.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0":"2022-02-28T21:11:40.802Z","1.83.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0":"2022-03-01T07:25:19.490Z","1.83.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0":"2022-03-01T08:17:36.497Z","1.82.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0":"2022-03-01T08:17:54.037Z","1.83.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0":"2022-03-01T09:15:45.655Z","1.83.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0":"2022-03-01T09:37:04.483Z","1.82.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0":"2022-03-01T09:58:03.917Z","1.84.0-canary.1047.d61150b6998f67c4aeccd1ae9736fd0d91b4dd22.0":"2022-03-01T10:13:15.890Z","1.84.0-canary.1124.9d757a18abebacbf765bb919e1f3165a446946f9.0":"2022-03-01T10:30:30.891Z","1.84.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0":"2022-03-01T10:39:15.138Z","1.84.0-canary.1079.654568687828249d54fdc3d974535182ca5b5284.0":"2022-03-01T11:00:02.503Z","1.84.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0":"2022-03-01T11:10:48.474Z","1.84.0-canary.1108.60337f25483494318362a1c35f8ee116ca0fb566.0":"2022-03-01T11:23:00.610Z","1.84.0-canary.1083.3bbfd02e9ff83e959d53252f09a444ab323d26a4.0":"2022-03-01T11:48:34.757Z","1.84.0-canary.1083.e21e9ecc03b029d68b0ead7849a52f5d4036acaf.0":"2022-03-01T11:59:59.216Z","1.84.0":"2022-03-01T12:13:42.441Z","1.85.0-canary.1083.906c50463d54ca289934602678b41f0012bc358c.0":"2022-03-01T13:36:26.381Z","1.84.1-canary.1116.8b7540359acfe94c5d209d754274115f10d73e0c.0":"2022-03-01T13:44:36.996Z","1.84.1":"2022-03-01T14:33:35.336Z","1.84.1-canary.1120.a70d549e2753967deba0afb4e9ebb02b69379129.0":"2022-03-01T14:50:25.831Z","1.85.0-canary.1083.850001d6dd3b6eb4a31c11a6f5681a06a65e3813.0":"2022-03-01T15:33:32.214Z","1.85.0-canary.1083.6adab72da1eb1b667974cae0b7e9f32a326b8f49.0":"2022-03-01T23:42:16.149Z","1.85.0-canary.1125.85ebe63d153ee25ef3b215dfa924750638ec07ed.0":"2022-03-02T07:06:33.308Z","1.84.2-canary.1126.4250751667fb79a56ecc63011da0f7948d62f6a0.0":"2022-03-02T07:46:06.100Z","1.85.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0":"2022-03-02T10:18:31.758Z","1.85.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0":"2022-03-02T12:37:41.322Z","1.84.2-canary.1120.7a10d381fa8cca5060b51fd0f9cf28369c2e72ee.0":"2022-03-02T12:48:28.815Z","1.85.0-canary.1081.6dc9a9a421035738466249c9a998368a20f2977b.0":"2022-03-02T13:44:51.080Z","1.85.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0":"2022-03-02T13:46:24.694Z","1.85.0-canary.1081.f72a5ffecbb81c5358b2925f5175711f3d754935.0":"2022-03-02T13:53:41.341Z","1.84.2-canary.1120.99b0753e49958b53df5d6c4d657e3659b7d60f0a.0":"2022-03-02T14:26:26.218Z","1.85.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0":"2022-03-02T14:36:08.448Z","1.85.0-canary.1127.6d83e5e016076f82514e4c622d2b6ebd00eddd30.0":"2022-03-03T08:52:47.249Z","1.84.2-canary.1122.44aa8f7f3347f20665bd7b65978c6020d26195ae.0":"2022-03-03T09:23:53.523Z","1.85.0-canary.1128.96d12aa1bea7a78d8d0cada8c18329cfffe8c4ff.0":"2022-03-03T10:32:03.752Z","1.85.0-canary.1128.125c5ca43b48e51f156215ae052c7f2716c91806.0":"2022-03-03T11:14:45.955Z","1.85.0-canary.1128.6d33d603cc03d609f82ba470a24e1474f69ce7f8.0":"2022-03-03T12:13:52.478Z","1.85.0-canary.1130.8eedfbd5ca76091365d10aa8982d1228f4441ecb.0":"2022-03-03T13:37:02.668Z","1.85.0-canary.1131.518ed3e5f260979be6bef7e94c9db7abaf7edddf.0":"2022-03-03T22:46:46.346Z","1.84.2-canary.1132.dda0ad7bc86341ef8ccab48874b4e7f5e9eb7624.0":"2022-03-04T08:45:31.131Z","1.85.0-canary.1080.9b27ade5fd2acc96fedde32033ede66a906da9ab.0":"2022-03-04T10:28:58.770Z","1.85.0":"2022-03-04T11:37:58.316Z","1.86.0-canary.1133.350daf04f80348b4d0323de7cfb76ce5fe8f7d26.0":"2022-03-05T07:50:21.023Z","1.85.1-canary.1120.7e074b8e83b895eb87b797d51fd987bb67871f00.0":"2022-03-05T11:12:09.368Z","1.85.1-canary.1120.659f6f7505ef30212bda7653d9f847cbde326719.0":"2022-03-05T13:06:33.403Z","1.86.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0":"2022-03-05T14:40:49.801Z","1.86.0-canary.1081.7fc5fb1aaeebdb3d9f367154fd45210b3f03d418.0":"2022-03-05T15:51:13.519Z","1.85.1-canary.1120.9ef57838a047a195b9197738ca3c921fa1cd04a9.0":"2022-03-05T20:58:34.836Z","1.86.0-canary.1081.98799eb933feae330d11327aea9f9d579eb2795b.0":"2022-03-09T06:36:42.759Z","1.85.1-canary.1120.009370ef10d0491f256bbc4204d00064cfcf155b.0":"2022-03-09T11:53:42.799Z","1.86.0-canary.1137.ed0dac74bc0bf66645f4c1274d53511a3a8f653b.0":"2022-03-09T14:14:30.292Z","1.86.0-canary.1137.e5f0647252c2587f9dd5123ad2c4371d036d0c2e.0":"2022-03-09T14:15:41.039Z","1.85.1":"2022-03-09T14:24:11.820Z","1.86.0-canary.1082.4a6002f96c70b9ae85ad30d19e75207ed394cd46.0":"2022-03-09T15:22:01.214Z","1.86.0-canary.1081.12741064b989e4bf56814ed5112f5c8d3d8d2f08.0":"2022-03-10T06:01:41.223Z","1.86.0-canary.1081.34d167bd968e9305f849ec641a8fcf4efa02cf50.0":"2022-03-10T07:19:56.085Z","1.86.0-canary.1082.84b8a4a5f7197eb826837f8dd6fa8def4755b859.0":"2022-03-10T12:14:32.885Z","1.86.0-canary.1124.854d12b5fc85ac4892c69832dbf55b99e23a8266.0":"2022-03-10T12:54:34.063Z","1.86.0-canary.1124.2aba3dfdf84d64a7b2cdfe614dcd08d22f55dd96.0":"2022-03-10T12:56:24.817Z","1.86.0-canary.1133.f3d5fee6f4617af0114680a8c76bc953a41546c9.0":"2022-03-10T13:10:12.271Z","1.86.0-canary.1127.018885559acba879252d818c5b454a5234a473fb.0":"2022-03-10T14:28:56.347Z","1.86.0-canary.1082.122eea92c75fd4b40bef36764136f3bb2531f82b.0":"2022-03-10T22:20:34.840Z","1.86.0-canary.1081.3b6060025c3075de11921753a002408bf3fba21d.0":"2022-03-11T09:09:12.515Z","1.86.0":"2022-03-11T10:26:27.360Z","1.87.0-canary.1142.6db57d98ca2b5c20c20c35a1955b74436a12890e.0":"2022-03-11T11:30:01.990Z","1.87.0-canary.1142.e49e7f07961652c21d9920df8c22edc9d18f5a9c.0":"2022-03-14T07:41:16.719Z","1.87.0-canary.1127.7f1b1629f8754093ca8f7dbd9181d40b69cfc097.0":"2022-03-15T12:04:53.215Z","1.87.0-canary.1146.96a0bf9b7f48079e50c44a28447205c0200f4af9.0":"2022-03-15T13:12:07.697Z","1.86.1-canary.1122.f11bd5839f6bfc24c33710a5d7fee5d9b406c19d.0":"2022-03-15T14:19:39.220Z","1.87.0":"2022-03-15T15:03:44.448Z","1.88.0-canary.1144.e3fbe226303984c1f29e087a961c98b3428a8fc4.0":"2022-03-16T09:46:41.744Z","1.88.0-canary.1124.006a44ea79b233f8d5ed0a2166029efc84ffb9c7.0":"2022-03-16T09:52:08.899Z","1.88.0":"2022-03-16T10:45:37.035Z","1.88.0-canary.1146.16b21bd1a0fa3043151e5a1edb620644c6ce463a.0":"2022-03-16T10:46:40.561Z","1.89.0-canary.1133.f3fc4a99469ffee4fd6479c8bde8eb0c216b79ea.0":"2022-03-16T11:47:33.793Z","1.89.0-canary.1144.e9e536ae6d62c10f31eafe2c5ed4a9837dd20317.0":"2022-03-16T12:05:36.731Z","1.89.0-canary.1140.3f66d111bb906c37b9ca117edb044fd0e74c86c6.0":"2022-03-16T12:38:27.747Z","1.89.0":"2022-03-16T12:49:10.164Z","1.90.0-canary.1144.9a3e8ce65bff100ca0dce2065d91d895a729c11c.0":"2022-03-16T13:45:48.625Z","1.89.1-canary.1149.18c7c5f9ba21e3790e3d916713b3d4f3d67e4342.0":"2022-03-17T09:46:57.067Z","1.90.0-canary.1144.6e8dc508a65c6d51e3f924af0aa9d56da13f4afd.0":"2022-03-21T08:19:02.241Z","1.89.1-canary.1149.50a7c2648c5a3a8060d470103907c971bad9fb30.0":"2022-03-21T08:31:48.319Z","1.90.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0":"2022-03-22T10:41:46.448Z","1.89.1-canary.1149.2bbaa42a7475dc14ab73d17f56eee7f558baf5f8.0":"2022-03-23T07:44:16.225Z","1.90.0-canary.1152.d3bb303f24cf1f01be1f5147631010a7eea94b10.0":"2022-03-23T08:07:48.957Z","1.90.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0":"2022-03-24T08:33:32.403Z","1.90.0-canary.1152.c5c4d21aacf86ce00e5cb4cbbabdb69418fed123.0":"2022-03-24T12:08:43.151Z","1.90.0-canary.1156.94d8f27de4afd279a1cd6b88fb1644941e5788ef.0":"2022-03-24T13:45:11.544Z","1.90.0-canary.1155.72c403de118d3d5ba4f882f15ddee41880ff2b4d.0":"2022-03-24T17:43:00.696Z","1.90.0-canary.1156.a6e87e65a622808c7683c120704978e5d8266d67.0":"2022-03-25T07:10:54.149Z","1.90.0-canary.1156.3171d27e3d07af8b3d90ce382147b95c07089b0e.0":"2022-03-25T07:51:35.808Z","1.90.0-canary.1156.a3a9c840556d4a1d2f445b1b594033dc1b3ae18d.0":"2022-03-25T09:58:07.790Z","1.90.0-canary.1156.abdde8b16099e5f8a6ecf9beaa738a483549900a.0":"2022-03-25T10:04:52.086Z","1.90.0-canary.1135.e4a18a5296f1b88e15e1a97d514f7044cd9bbdc7.0":"2022-03-25T11:31:35.793Z","1.90.0":"2022-03-25T12:05:15.425Z","1.91.0-canary.1157.e9cb0a383d4997c2a7ec1e461102ecba06b54276.0":"2022-03-25T21:36:33.422Z","1.91.0-canary.1157.0feb288ce93ca92b40ece4f36afe60a2f1dc2e2b.0":"2022-03-26T10:24:09.732Z","1.91.0-canary.1157.d8492f52c662fe27bba004062093d9370a73ed9a.0":"2022-03-27T12:46:16.699Z","1.91.0-canary.1157.c1975c2bf29a8919b9f88e46a5e4c250a0c4c95d.0":"2022-03-27T13:17:35.381Z","1.90.1-canary.1149.0a362bd3aa6bc1596ee371e984da9812c6246362.0":"2022-03-28T09:15:22.716Z","1.91.0-canary.1149.0bc47ea507ec56cfa5c18de423bb746413e8a033.0":"2022-03-28T15:06:24.297Z","1.91.0-canary.1162.e5e1df50b94146e96075add7c658dbbc3d97d200.0":"2022-03-29T07:26:34.249Z","1.91.0-canary.1164.7e4f299732a05640997571ed06257fea837ddd3f.0":"2022-03-29T08:55:57.791Z","1.91.0-canary.1149.083853bbe7c49fdb6865a3c6d099f6c49a3a17a8.0":"2022-03-29T08:59:15.480Z","1.91.0-canary.1157.77d24390d53ff6a65d0647d31d8bc56bf9e8ae35.0":"2022-03-29T09:47:07.687Z","1.91.0-canary.1165.cd437c4a733188e1cb37d5169d8081ae728b527b.0":"2022-03-29T10:27:36.201Z","1.91.0-canary.1166.a3f8ff9e6ca0f267e927a58623c95b3af2ce3b1f.0":"2022-03-29T10:30:59.869Z","1.91.0-canary.1167.9604cea624a10dcfa524da75e7c40d8322863198.0":"2022-03-29T10:55:51.417Z","1.91.0-canary.1144.d23fb3af90b2c8b71784afa26d3cb91ed927d119.0":"2022-03-29T11:24:32.642Z","1.91.0-canary.1157.20e585c09957f95d3f51b13b5ba00823a72559dd.0":"2022-03-29T12:05:26.619Z","1.91.0-canary.1149.0a83a00e05e2adb6cf2255869d77a86df2d9fbe7.0":"2022-03-29T12:40:10.725Z","1.91.0-canary.1157.f176924f02b0c5645982774d25579b1750406666.0":"2022-03-29T13:08:23.221Z","1.91.0-canary.1164.aa99f6a129cd56296d09fe4537f0f7ada9fdcb95.0":"2022-03-30T06:08:30.600Z","1.91.0-canary.1166.eb06ca743134ff6cc9a52a3d1648e1d9b17ad7aa.0":"2022-03-30T06:15:32.629Z","1.91.0-canary.1162.1f1e303908c1e798cf412e3caaf55165ceb6fa5b.0":"2022-03-30T06:43:50.786Z","1.91.0-canary.1149.85f8ffa5e9060b59bb81dbf27f2ecb35e902e80f.0":"2022-03-30T07:45:14.444Z","1.91.0-canary.1157.6b9fd31946c8174a6ec8b79fce7a1622512ef007.0":"2022-03-30T09:58:51.947Z","1.91.0-canary.1157.a649d350a8f9919ce5957f6a40573f82af94259d.0":"2022-03-30T10:04:39.966Z","1.91.0-canary.1149.22116069902a725a93870063673aa0bc4da66b7c.0":"2022-03-30T10:34:52.119Z","1.91.0-canary.1170.177a82779bbbe302c495876abda9ac7965144166.0":"2022-03-30T11:49:07.279Z","1.91.0-canary.1149.c06270d6e3d4c6e88ea27dfe3a2fc0eb4eeb38ff.0":"2022-03-30T12:15:10.829Z","1.91.0-canary.1162.c62d7ca41e6c2a0ee4b12f349f43cf3844f84090.0":"2022-03-30T13:21:49.445Z","1.91.0-canary.1164.c60e8646b04b94770ca88eb290dca7040245a66e.0":"2022-03-30T13:28:25.557Z","1.91.0-canary.1149.26b4f8339e7e22a7e6b5332c9657aba70c3db435.0":"2022-03-30T13:42:50.108Z","1.91.0-canary.1165.d4da253130216c8f89cac689f54584ab3f763a43.0":"2022-03-30T13:53:55.016Z","1.91.0-canary.1149.c8a9769ac3ba802855047187ae2093455402c373.0":"2022-03-30T14:53:04.182Z","1.91.0-canary.1157.abc20ec7819c821f9f78fdc4c9adb2a04df07499.0":"2022-03-30T16:07:47.767Z","1.91.0-canary.1172.6f4103142ce2b41a18060d7cd94481ff62a0ae71.0":"2022-03-31T05:59:20.366Z","1.91.0-canary.1166.4f38c57a727015468d82cab9a1ed908fc5a4a652.0":"2022-03-31T06:21:30.720Z","1.91.0-canary.1167.8470c7d21e8e322032c69068e74e78fffae11dfc.0":"2022-03-31T06:24:56.788Z","1.91.0-canary.1168.199cf322653db55230437fbba7e45fc5262b4964.0":"2022-03-31T06:48:43.070Z","1.91.0-canary.1167.9daf7c2630f7aa1d3e53a93a8d22ace2b22e13ad.0":"2022-03-31T07:52:31.508Z","1.91.0-canary.1157.659669180272930120b9719a78cac22c6b0b0ab1.0":"2022-03-31T09:54:36.180Z","1.91.0-canary.1130.4e625143d636e3ca257301e986a981eeb71de952.0":"2022-03-31T09:59:58.273Z","1.91.0-canary.1144.76499e2774c10b4f13790d0f8b20cf561597f266.0":"2022-03-31T11:30:19.339Z","1.91.0-canary.1163.f43c383798a253e672797bc5fed52b764ae1e17f.0":"2022-03-31T12:27:00.494Z","1.91.0-canary.1144.8b41d5efd51bf27bc73ffa3dccfd55301515a2e9.0":"2022-03-31T13:26:26.579Z","1.91.0-canary.1163.0f25b8958ff7d8bdf2c0a9a17395ab4416482594.0":"2022-03-31T13:28:32.488Z","1.91.0-canary.1168.c4c6406f0883c686525e890a28057299a5ed5c5f.0":"2022-03-31T14:40:03.373Z","1.91.0":"2022-03-31T14:55:38.499Z","1.92.0-canary.1144.8963c689b317e5c9e70ac69f51d9d27d0323c437.0":"2022-04-01T07:51:47.819Z","1.92.0-canary.1144.8a3ae97c105272fa2545db3acaa6ca5066f37f54.0":"2022-04-01T11:58:52.507Z","1.92.0":"2022-04-01T15:46:44.582Z","1.93.0-canary.1162.9ea49994d9c6079cdd61774c32eecdad3267c78b.0":"2022-04-04T09:22:24.388Z","1.93.0-canary.1179.13b2b2f351158a953d8827fcffe744e474ceedfd.0":"2022-04-06T11:41:28.092Z","1.93.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0":"2022-04-06T11:49:57.697Z","1.93.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0":"2022-04-06T16:04:20.485Z","1.93.0-canary.1179.e4cd827075c20cdbdba6b597afe65751bd66de29.0":"2022-04-06T18:09:56.176Z","1.93.0-canary.1181.8712f793b6bc6d6e1ded2e52bc1d0f289b3ea793.0":"2022-04-07T08:23:46.834Z","1.93.0-canary.1179.b5ea899acdf6cf2b2abe728489f8b3d3bf8931d0.0":"2022-04-07T09:15:41.457Z","1.93.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0":"2022-04-07T12:36:04.612Z","1.93.0-canary.1179.0ee57db2dda2d89a21bfe1441b2c443ddb82a265.0":"2022-04-07T12:57:16.331Z","1.93.0":"2022-04-07T13:20:30.721Z","1.94.0-canary.1183.f57808ac0b8eab9f5c3168364c93923ce4646f8c.0":"2022-04-07T14:53:42.500Z","1.94.0-canary.1181.97ab37ed19d78de85eb6c6037f236f87d4261533.0":"2022-04-08T09:50:25.702Z","1.94.0":"2022-04-08T11:07:14.171Z","1.95.0-canary.1186.c221296c0cf5e727baf52feea108fba3bf3fca45.0":"2022-04-11T11:41:02.170Z","1.95.0-canary.1186.c49c9853139608f981b87d790346b86ff2db1425.0":"2022-04-12T07:05:27.622Z","1.95.0-canary.1186.5efcc7d7f9e2526d222828be46b19844e1f11d8e.0":"2022-04-12T08:12:59.020Z","1.95.0-canary.1179.75a56f997eb9b536003917b87d80708b2f2a20a9.0":"2022-04-12T13:31:07.445Z","1.95.0-canary.1179.203c3a966d3cbaed65d7aea553f6a42d76bdf145.0":"2022-04-12T19:53:39.344Z","1.95.0":"2022-04-12T20:56:05.704Z","1.95.1-canary.4.b73b2fcde301505fad7d1fcd268469f6abfa02a2.0":"2022-04-14T05:38:19.749Z","1.96.0-canary.5.692437e99520469b781ae5031fd517683933334d.0":"2022-04-14T07:06:30.368Z","1.96.0-canary.6.c6f2936c44734a6e7bebcfe362c2692736e22c4c.0":"2022-04-14T07:21:20.401Z","1.96.0-canary.7.091e446321f786d153db5e9e005712813ddfecc7.0":"2022-04-14T07:22:17.840Z","1.96.0-canary.8.f2a1227df5d1a9e9cb5de7fd5698e77bd7b913a9.0":"2022-04-14T10:25:33.436Z","1.96.0-canary.9.ef162baa4185a6530417263e47870f311bd7e15c.0":"2022-04-14T10:29:34.097Z","1.96.0-canary.10.b4d82db0674a6a12de68e8c14af983536886b14c.0":"2022-04-14T10:36:24.301Z","1.96.0-canary.11.30ac0a068f587516965eae0128233b63649d87d0.0":"2022-04-14T11:13:55.168Z","1.96.0-canary.12.3390e86b0a06428fb87cf1c95e1ed20afbd9f73e.0":"2022-04-14T11:14:14.908Z","1.96.0-canary.13.061c9102f5d0cc02bb662296ae2f9d288275a375.0":"2022-04-14T11:16:45.543Z","1.95.1-canary.4.7a01883985e24a3d95a382c254228d5d25e84674.0":"2022-04-15T06:12:07.690Z","1.96.0-canary.14.51f420c57b58961ba11194bf4c9d1d85fe05cded.0":"2022-04-15T08:20:35.831Z","1.95.1-canary.4.77a7f4be869e2e2ea84bf5a672e00d97f919f107.0":"2022-04-15T10:51:46.921Z","1.96.0-canary.15.34cd9fd22a05203429c00582bbab1473f1b9559c.0":"2022-04-18T07:40:12.968Z","1.96.0-canary.15.744241837dfcbfa3ea2c55ad0c2d1a4b084a9a38.0":"2022-04-18T11:49:35.091Z","1.95.1-canary.17.b5bda6b1e3d58ef74ea6e269bd7b59941c103dac.0":"2022-04-19T10:37:41.778Z","1.96.0-canary.14.e64923349a770df4a9cb7dc71f4dcda3d7df4ff5.0":"2022-05-19T12:43:44.582Z"},"maintainers":[{"email":"ipuncho@gmail.com","name":"turanchoks"},{"email":"sberdevices.frontend@gmail.com","name":"sberdevices-frontend"}],"description":"SberDevices Design System","homepage":"https://github.com/sberdevices/plasma#readme","repository":{"type":"git","url":"git+ssh://git@github.com/sberdevices/plasma.git"},"contributors":[{"name":"Vasiliy Loginevskiy"},{"name":"Антонов Игорь Александрович"},{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Чельцов Евгений Олегович"}],"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"bugs":{"url":"https://github.com/sberdevices/plasma/issues"},"license":"Sber Public License at-nc-sa v.2","readme":"","readmeFilename":""}